Colin's Blog
[HTML5] 문서 형식 정의 tag

문서 형식 정의 tag

문서 형식 정의(DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달합니다.
문서의 최상위에 위치해야 하며 대소문자를 구별하지 않습니다.

HTML5 : <!DOCTYPE html>
        <!DOCTYPE HTML>
        <!doctype html>
        <!Doctype Html>

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

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

HTML Basic Tag

<!DOCTYPE html>
<html lang="ko">                                    //  html은 글로벌 어트리뷰트를 지원합니다. lang은 언어를 뜻하며, 값으로는 ISO 코드가 들어갑니다.

  <head>                                            /*  head는 메타데이터를 포함하기 위한 요소이며 웹페이지에 하나만 존재합니다.
                                                        메타데이터는 HTML문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않습니다.
                                                        head에 메타데이터 이외에 화면에 표시되는 일체의 요소를 포함시킬 수 없습니다. */  

    <meta charset="utf-8">                         /*   meta는 description, keywords, author, 기타 메타데이터 정의에 사용됩니다.
                                                        메타 데이터는 브라우저, 검색엔진 등에 의해 사용됩니다.
                                                        charset은 브라우저가 사용할 문자셋을 정의합니다.
                                                        meta에 대해서 밑에 따로 정리 해놨습니다.*/

    <title>웹페이지 제목</title>                        //  title은 문서의 제목을 정의합니다. 정의된 제목은 브라우저 탭에 표시됩니다.

    <link rel="stylesheet" href="css/style.css"/>   //  link에는 외부 리소스와의 연계 정보를 정의합니다. 주로 HTML과 외부 CSS 파일을 연계에 사용됩니다.

    <script>                                        /*  script에는 client-side JavaScript를 정의합니다.
                                                        <script src="js/event.js">처럼 외부 JS 파일을 로드할 수 있습니다. */
        document.addEventListener('click', function(){
            alert('클릭하셨네요');
        })
    </script>
    <style>                                         //  style은 HTML 문서를 위한 style 정보를 정의합니다.
        body { background-color : powderblue; }
    </style>  
  </head>  
  <body>                                            /*  body는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재합니다.
                                                        메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소(콘텐츠)가 body 요소 내에 기술됩니다. */
    <div class="myFavoriteFood">
        <ul>
          <li>초밥</li>
          <li>냉면</li>
          <li>고기</li>  
        </ul>
    </div>
  </body>  
</html>


meta 관련 추가 정리

SEO(검색 엔젠 최적화)를 위해 검색엔진이 사용할 keywords를 정의합니다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

웹페이지의 설명을 정의합니다.
<meta name="description" content="Web Tutorials on HTML and CSS">

웹페이지의 저자를 명기합니다.
<meta name="author" contents="moong2">

웹페이지를 30초마다 Refresh합니다.
<meta http-equiv="refresh" content="30">


HTML Tag

제목관련 Tag

텍스트관련 Tag

본문관련 Tag

절대경로 : 현재 작업 디렉토리와 관계없이 특정 파일의 절대적인 위치를 가리킵니다.
루트 디렉터리를 기준으로 파일의 위치를 나타냅니다.

- http://www.naver.com
- /Users/leekuenhwan/Application/image.jpg
- C:\users\leekeuenhwan\document\image.jpg
- /index.html


상대경로 : 현재 작업 디렉토리를 기준으로 특정 파일의 위치를 가리킵니다.

- ./index.html
- ../imaga/bg.jpg
- ../../js/app.js
- index.html
- css/mystyle.css

리스트관련 Tag

<ol start="2">
    <li>coffee</li>
    <li>lemonade</li>
    <li>juice</li>
    <li>tea</li>
</ol>


결과

2. coffee
3. lemonade
4. juice
5. tea


<ol reversed>
    <li>coffee</li>
    <li>lemonade</li>
    <li>juice</li>
    <li>tea</li>
</ol>  


결과

4. coffee
3. lemonade
2. juice
1. tea



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>중첩목록</title>
  </head>
  <body>
    <ul class="menu">
      <li>staek</li>
      <li>pasta</li>
      <li>salad
        <ol>
          <li>salmon salad</li>
          <li>avocado salad</li>  
        </ol>
      </li>
    </ul>  
  </body>
</html>

결과


테이블관련 Tag





미디어관련 Tag






비디오관련 Tag



웹브라우저별 지원하는 동영상 파일 형식

Browser Mp4 WebM Ogv
Internet Explorer Yes No No
Chrome Yes Yes Yes
Firefox Yes(21~) Yes Yes
Safari Yes No No
Opera Yes(25~) Yes Yes

audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있는데,
source 태그를 사용하여 형식 차이 문제를 해결할 수 있습니다
type 어트리뷰트는 생략 가능합니다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <video controls>
      <source src="moong2.mp4" type="video/mp4">
      <source src="moong2.webm" type="video/webm">
  </body>
</html>



form 태그

input 태그



select 태그



textarea 태그

<textarea name="연습장" row="50" col="30" style="width:400px; height:100px;">낙서장입니다.</textarea>



button 태그

<button type="button" onclick="alert('호기심이 많으시군요!');">이 버튼을 누르신 당신은?</button>



fieldset / legend 태그

<fieldset>
<legend>로그인</legend>
<input type="text" placeholder="id를 입력해주세요" id='id'>
<input type="text" placeholder="password를 입력해주세요" id='pw'>
<input type="submit" value="제출">
</fieldset>



2. Today I Found Out

이번주에 배운 내용중 HTML에 대해서 복습을 쭉 해봤는데,
'지금까지 내가 HTML의 기능을 20%만 알고 사용했구나'라는 생각이 들었습니다.
알면 알수록 웹 문서의 기능만이 아닌 어플리케이션으로써도 좋은 기능이
많다는 것을 알게 되면서 평소에 궁금했던 부분들이 상당수 풀렸습니다.
아직도 추가적으로 공부해야할 부분이 남았지만 기대가 많이 되는 것 같습니다.
앞으로 더 공부할 CSS와 JavaScript도 제가 모르던 기능을 만나게 될 거라는
생각을 하다보니 설렘이 가득한 것 같습니다.
기술들을 공부하고 습득한다는 것만큼 행복한 게 없는 것 같습니다.
앞으로도 열심히 공부하고 깨닫도록 노력하겠습니다.

3. refer

http://poiemaweb.com/

https://webisfree.com/?category=html

http://www.w3im.com/ko/html/default.html

http://webberstudy.com/html-css/

© 2018 Colin. All rights reserved.