'Programming/HTML'에 해당되는 글 2건

  1. 2013.05.13 | DOCTYPE
  2. 2013.01.17 | HTML 예제들

DOCTYPE

Programming/HTML | 2013. 5. 13. 16:56
Posted by 오요미

태그명 : DOCument TYPE Declaration - 현재의 문서가 어떤 형식에 맞추어 제작되었는지를 설명.

보통 HTML 제작도구에서는 새 HTML 문서를 만들때 자동으로 이 태그를 문서 상단에 만들어 주며, 실제 반드시 쓰지 않아도 큰 문제는 없는 태그입니다. 하지만 이 태그를 선언해줌으로써 브라우저가 좀 더 빠르고 정확하게 문서를 분석하여 표현해주며, 제작도구에서도 이 선언에 따라 문서에 제약을 걸어 정확한 표현을 해줄 수 있도록 해줍니다.

예1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">

이렇게 선언된 DOCTYPE은 이 문서가 HTML 4.0을 따르고 Transitional 방식에 따라 영문으로 제작되었다는 것과 http://www.23.org/TR/html4/loose.dtd 라는 Document Type Definition(DTD) 정의를 참조한다는 것을 알려줍니다.

물론 이 DOCTYPE 태그를 무시하고 선언하지 않아도 되지만 XHTML과 같은 정확하게 XML 구문으로 작성되어야 하는 HTML 문서에서는 반드시 선언을 하여야 합니다. 그렇지 않으면 브라우저가 XHTML로 문서를 인식하지 않으므로 XML 구문에 어긋나는 점이 있더라도 브라우저는 무시할 수 있습니다.

예2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">

위의 선언은 문서를 XHTML1.0을 따르고 Strict 방식에 따라 영문으로 제작되었다는 것과http://www.w3.org/TR/xhtml/DTD/xhtml-Strict.dtd라는 DTD정의를 참조한다는 것을 알려줍니다. 


예3)
<!DOCTYPE ①최상위엘리먼트네임 ②(국제적,공용||내부적,제한용) "③(ISO공인인증기관 || ISO비공인인증기관)//④기관명//⑤DTD type //⑥인코딩언어(ISO)" "⑦DTD 주소">

DOCTYPE을 선언하기 위해 위 1~7번 항목에 대해 설명해보겠습니다.


① 최상위엘리먼트네임(RootElementName)
html이나 xhtml의 가장 최상위는 무조건 <html>태그 이기 때문에 html로 작성합니다. 하지만 예외적으로 내부용일경우에는 다른 코드가 삽입될수도 있지만. 여기에서는 국제적인 코드를 생각해서 html이 삽입됩니다.

② 국제적,공용|| 내부적,제한용 (PUBLIC || SYSTEM)
이 문서가 국제적으로 쓰이는 문서인지. 내부적으로 쓰이는 문서인지를 설정합니다. 내부적일 경우에는 DTD든 최상위엘리먼트든 작성자 마음대로 작성하거나 지정할수 있습니다.

③ ISO공인인증기관|| ISO비공인인증기관 (Inernational Organization for Standardization || not Inernational Organization for Standardization )
본 문서가 어디에서 만든 DTD를 사용하는가에 대한 내용입니다. 공인인증기관일경우 " + " 모양을 비공인인증기관일경우엔 " - ' 를 사용합니다. W3C는 비공인인증기관이므로 " - " 값이 들어갑니다.

④ 기관명(Organization)
DTD를 작성한 기관명입니다.

⑤ DTD TYPE 
DTD가 어떤 타입으로 작성되어있는가에 대한 내용으로 3가지로 분류하게 됩니다.
DTD XHTML (version) Strict => 권장 표준 안
DTD XHTML (version) Transitional => Strict 보단 완화된 표준안
DTD XHTML (version) Frameset => 프레임을 나눌경우 프레임페이지에 사용

⑥ 인코딩언어
xml:lang일때 같이 ISO에서 인증한 언어코드로 문서를 출력합니다.
(모든 html DTD는 영문이기 때문에 EN이 거의 기본화 되어있습니다. / 실제로 DTD는 한글로 작성할수도 있습니다. 물론 선언은 영문으로 해야 하지만요.0

⑦ DTD경로 (DTD URL)
실제로 이 문서를 파싱할(유효한지 하지 않은지 판단) DTD를 지정합니다.


예4)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- 위의 예는 가장 표준이 되는 DTD입니다.
- 확장된 어트리뷰트를 허용하지 않습니다.
- 배경색 , 글자색등의 일정한 조건에 따른 어트리뷰트(bgcolor 라던가 font태그의 color속성)을 인정하지 않습니다.

Strict는 문서에 확장된 속성을 제공하지 않고 제약을 걸어둔다는 뜻인데, 이것은 모바일기기나 장애인을 위한 브라우저등 모든 브라우저에서 사용가능한 최소한의 태그만을 사용한다는 것입니다. 그래서 최소한의 태그만을 유지하고 화면상의 표현을 하기 위해서는 CSS가 더욱더 필요하게 됩니다. CSS는 모든 브라우져 표준이지만 이 CSS를 해석하여 화면상에 표현하는 것은 또 브라우저마다 다릅니다. 하지만, 표준을 사용함으로써 폭넓게 호환성을 지니게 됩니다.


예5)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

- 일반적으로 가장 많이 쓰이는 DTD입니다.
- 확장된 어트리뷰트를 호환합니다.
- 각 브라우져에 따른 DTD를 호환합니다.
- Strict보다 로딩속도는 느립니다.
- Strict보다 표준안에 가깝지는 않습니다.

Transitional은 현재 일반적으로 가장 많이 쓰이는 제약 사항이고, 여러 가지 내장된 태그를 거의 대부분 사용할 수 있습니다. Transitional로 하면 로딩속도는 저하되지만 그만큼 표현성이나 작업하는데에 따른 태그의 활용성은 넓게 됩니다. Transitional로 코딩된 문서중 일부는 다른 브라우저에서 읽지 못할 수 있습니다.



예6)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">


- 프레임셋을 만들때 사용하는 DTD입니다.
- 확장 및 프레임에 사용가능한 모든 내용을 포함합니다.
- html 4.01 Frameset.dtd 와 동일합니다.

Frameset은 프레임을 나누고 프레임에 따른 이름 및 설정을 지정하는 태그들을 저장한것입니다. html4.01버젼과 동일한 DTD를 가지고 있습니다.

'Programming > HTML' 카테고리의 다른 글

HTML 예제들  (0) 2013.01.17
 

HTML 예제들

Programming/HTML | 2013. 1. 17. 09:54
Posted by 오요미

<html>
 <head>
  <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
  <title>HTML태그와 옵션들</title>
 </head>

 <body link="#ff0000" vlink="#00ff00" alink="#0000ff">
  Naver : <a href = "http://www.naver.com"> naver</a>

  <h1>Naver</h1>
  <h2>Naver</h2>
  <h3>Naver</h3>
  <h4>Naver</h4>
  <h5>Naver</h5>
  <h6>Naver</h6>

  <font size=1>Naver</font><br>
  <font size=2>Naver</font><br>
  <font size=-1>Naver</font><br>
  <font size=3>Naver</font><br>
  <font size=4>Naver</font><br>
  <font size=+1>Naver</font><br>
  <!-- 기본크기는 3이며 부호가 붙을경우 기본크기를 중심으로 변한다-->

  <!--문자의 기본크기 지정하기-->
  <BASEFONT size=3>
  <font size=-1>changed font size -1</font><br>
  <font size=+1>changed font size +1</font><br>

 <!--문자 폰트지정하기 explore 5.5이상 charset=utf-8로-->
 <font face="바탕체" size=+2>바탕체</font><br>
 <font face="굴림체" size=+2>굴림체</font><br>
 <font face="궁서체" size=+2>궁서체</font><br>
 <font face="돋움체" size=+2>돋움체</font><br>

 <!-- p태그를 이용한 단락지정하기 (br과는 다르게 단락이 추가됨)-->
 <p> welcom to simplex internet!</p>
 <p> welcom to simplex internet!<br>

 <!-- 수평선 그리기-->
 <!-- hr 태그에는 4가지 속성 - size(픽셀수), width(픽셀수), align(left, right, center), noshade(수평선의 음영 효과를 없앤것)을 사용할수 있다.-->
 <p> welcom to simplex internet!
 두께 1인 수평선<hr size = 1>
 두께 3인 수평선<hr size = 3>
 두께 5인 수평선<hr size = 5>

 너비 500인 수평선 <hr width=500>
 너비 300인 수평선 <hr width=300>
 너비 100인 수평선 <hr width=100>

 noshade<hr noshade><br>

 <!--가운데로 정렬하기-->
 <center> 월드와이드 웹에 대하여 center를 이용한 가운데 정렬</center>

 <!-- 좌측, 우측, 가운데 정렬하기 -->
 <!--웹브라우저에 나타나는 요소들의 정렬을 위해 사용할 수 있는 태그로 div가 있다.이 태그의 속성인 align에 left/center/right를 지정함으로서 태그 내부에 삽입된 것을 원하는 대로 정렬할 수 있다.-->
 <div align=center>월드 와이드 웹에 대하여 div를 이용한 가운데 정렬</div>
 <div align = right>월드 와이드 웹에 대하여 div를 이용한 오른쪽 정렬</div>
 <br>

 <!--인용된 문장 보여주기-->
 <!--html문서 내에서 문장이나 단어를 인용할 때 blockquote(문장)와 cite(간단한 단어, 제목)를 사용한다. 이는 인용된 문장과 일반 텍스트를 구별되어 보이도록 만들게 된다.-->
 다음은 김옥진님의 시집<cite>용복 마을의 겨울</cite>에 나오는 시의 한 구절 입니다.
 <hr><p>
  사람들이 쓰다 버린<br>
  조각난 언어들이<br>
  쓰레기통에 가득 쌓인다<br>
  시름겨워내뱉는 한숨소리도<br>
  신문지에 싸여 던져지고<p>
  </blockquote><hr>

 <!--이메일 주소 모양 지정하기(이탤릭체)-->
 <address>
 이 웹사이트에 대한 문의가 있으시면
 <a href = "webmaster@hotmail.com">webmaster</a>에게 메일을 보내주십시오.
 </address><hr>

 <!--강조된 문장 모양 지정하기-->
 <!--strong > em-->
 <strong>중요</strong>
 <hr>이책에서<em> 이 부분</em>이 제일 중요합니다.

 <!--키보드 입력된 문장 모양 지정하기-->
 <!--kbd 태그는 사용자가 키보드로 입력할 것을 지시 하거나 키보드로 입력된 듯한 효과를 보여주기 위해 사용하게 된다.-->
 도스 프롬프트에서 다음과 같은 명령으로 컴파일 합니다.<br><hr>
 <kbd>c:/>javac javaapp.java</kbd><hr>

 <!--예제 문장 모양 지정하기-->
 <!--samp태그는 컴퓨터가 보여주는 메시지를 보여주거나 프로그램의 실행 결과를 보여주거나 할때 사용하게 된다. 일반적으로 글자 모양은 고정 폭 글자체로 나타나게 된다.-->
 <samp>hello world!</samp>

 <!--소스코드 모양 지정하기-->
 자바에서 콘솔로 값을 보여주려면 다음과 같은 함수를 사용해야 합니다.<br><hr>
 <code>
  System.out.println(...);
 </code><hr>

 <!--입력된 그대로 보여주기-->
 <!--소스 코드를 html에 붙여 넣으면 들여쓰기없이 한줄로 출력되는데 이를 pre태그를 사용하여 그대로 나타낼 수 있다. 이는 시스템의 고정폰트를 사용하게 되며 p나 br , tab을 사용하지 않는것이 좋다.-->
 다음은 php소스코드 입니다.<hr>
 <pre><code>
    if($this->menu_id){
    $this->select_mentrem();
    if($this->menu_url){
     $this->set_menudir();
     $this->check_menufile($this->menu_file);
     $this->delete_menfilmf();
     $this->insert_menfilemf();
    }
 </code></pre>
 
 <!--변수 모양으로 보여주기-->
 <!--var 태그는 변수이름을 나타낼때 주로 사용된다-->
 이 프로그램 클래스의 이름은 <var>JavaApp</var>이고 처음 실행되는 메소드는 <var>main</var>입니다.<br>

 <!--용어를 정의하는 모양으로 보여주기-->
 <dfn>HTML</dfn>은 Hyper Text Makup Language란 말의 약자로, 하이퍼텍스트 문서를 만들기 위한 언어이다.<p>
 
 <!--글자 모양을 여러가지로 바꾸기-->
 This is <B>Boldface Font.</B><BR>
 This is <I>Italic Font.</I><BR>
 This is <U>Underlined Font.</U><br>
 This is <tt>Typewrite Font.</tt><br>
 This is <blink>Blinking. Blinking.</blink><br>
 <!--blink는 네스케이프에서만 지원-->
 This is <sub>subscription</sub><br>
 This is <sup>superscription</sup><br>
 <p>

 <!--텍스트를 옆으로 흐르게 만들기-->
 <!--태그내에 삽입된 텍스트를 옆으로 흐르게 만든다. 속성 : direction(left, right):방향, scrolldelay(1/100s):흐르는 속도, loop:반복횟수지정, hspace, vspace: 텍스트가 흐르는 영역의 주변 여백을 지정함, width, height:텍스트가 흐르는 영역을 지정, align(top, bottom, middle)-->
 <marquee> 텍스트가 옆으로 흐릅니다.</marquee>
 <marquee direction = "right">텍스트가 오른쪽으로 흐릅니다.</marquee>
 <marquee width=300>텍스트가 좁은 공간에서 흐릅니다.</marquee>
 <marquee bgcolor = "yellow"> 노랑색 텍스트가 흐릅니다.</marquee>
 <marquee height = 300  bgcolor = "blue" >텍스트가 흐른다.</marquee>
 <p>

 <!--특수 문자 지정하기-->
 <!--특수 문자란 키보드를 통해 입력할 수 없는 문자나 HTML 문서에서 예약어로 사용하고 있는 문자를 의미한다.이러한 문자들을 문서에서 사용하려면 먼저 특수 문자를 사용하겠다는 사실을 알려 주어야 한다.
 HTML 문서에는 ESC코드를 사용하여 특수 문자를 입력할 수 있다. 이 ESC코드는 보토 "&"기호로 시작하여 ";"기호로 끝나게 된다.

  </body>
</html>

'Programming > HTML' 카테고리의 다른 글

DOCTYPE  (0) 2013.05.13
 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Ajax (0)
Jquery (6)
PHP (3)
Javascript (36)
DOM (0)
HTML (2)
CSS (1)
Linux (5)
postgreSQL (5)
Regex (0)
기타 (7)
보안 (1)
Python (0)
Matlab (1)
OrCad (1)
LTSpice (4)
Machine learning (0)
Deep learning (0)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)