Jeongchul Kim
HTML5 04 HTML5 기본 구조 및 문법의 기초 본문
HTML5 04 HTML5 기본 구조 및 문법의 기초 HTML5 엘리먼트(ELEMENT) HTML5 엘리먼트 HTML5의 엘리먼트는 HTML문서의 구성요소 중 하나로서, HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들을 의미합니다. 이와 같은 HTML5의 엘리먼트 구문의 특징으로는 다음과 같습니다. 첫째, 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝이 납니다. 예를 들어 <p>엘리먼트로 시작하였다면, 반드시 </p>엘리먼트로 끝이 나야 하는 것이죠. 두 번째는 일부 HTML 엘리먼트는 빈 콘텐츠를 가질 수 있는데, 예를 들어 <br>엘리먼트는 단지 라인 브레이크만 삽입하며, <img>엘리먼트는 이미지를 참조할 뿐 콘텐츠를 가지고 있지 않습니다. 세 번째는 빈 엘리먼트는 시작 태그로 종료된다는 점입니다. 이는 <br>이나 <img>엘리먼트는 콘텐츠가 없는, 시작 태그만 존재하는 빈 엘리 먼트이기 때문입니다. 네 번째 특징으로는 대부분의 엘리먼트는 속성을 가지며, 다섯 번째는 대부분의 엘리먼트는 중첩이 가능하다는 특징을 지닙니다. 여러분! 혹시 엘리먼트와 태그의 차이를 아시나요? 이 둘을 쉽게 구분할 수 있는 방법을 알려드리겠습니다. 먼저 엘리먼트란 HTML 문서의 개별적인 구성 요소로 HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들이라고 정의할 수 있습니다. 예를 들어 문단과 이미지의 의미를 표현하기 위해 p. img 등의 엘리먼트를 사용하는데, 이는 각각 문단을 의미하는 paragraph와 이미지를 의미하는 image에서 따온 단어들입니다. 이에 반해 태그란 부등호 기호로 둘러싸인 엘리먼트를 조합해서 부르는 이름입니다. 태그는 엘리먼트 앞과 뒤에 부등호로 감싸져 있다는 것이 특징입니다. 예를 들면 <p>, <img>를 부를 때는 각각 p태그, img태그라고 합니다. 엘리먼트의 종류에 대해 살펴보겠습니다. 엘리먼트는 크게 블록 레벨 엘리먼트와 인라인 레벨 엘리먼트로 나뉘는데, 먼저 블록 레벨 엘리먼트에 대해 설명 드리겠습니다. 블록 레벨 엘리먼트란 항상 새로운 줄로 줄바꿈하여 표시하는 요소로 너비 값은 브라우저 화면에 100% 꽉 차게 됩니다. 예를 들면 다음과 같이 인코딩한 후 실행을 하면, ‘문단1’과 ‘문단2’의 텍스트가 각각 줄바꿈되어 화면에 출력되는 결과를 확인할 수 있습니다. 블록 레벨 태그에는 <p>태그 외에도 텍스트의 크기를 나타내는 <h1>~<h6>태그, 순서가 없는 목록을 나타내는 <ul>태그, 순서가 있는 목록을 나타내는 <ol>태그 등과 같이 여러 가지 태그들이 있습니다. 인라인 레벨 엘리먼트는 블록 레벨 엘리먼트와 반대라고 생각하시면 됩니다. 인라인 레벨 엘리먼트는 이미 표시된 엘리먼트에 이어서 같은 줄 안에 표시되며, 너비 값은 요소가 가지고 있는 값 자체로 표시됩니다. 예를 들면 다음과 같은 소스 코드를 인코딩하였을 때, 실행결과는 다음과 같이 ‘강조1’’강조2’가 옆으로 이어지면서 표시되는 것을 확인할 수 있습니다. 인라인 레벨 태그의 종류로는 <em> 태그 외에도 <sub> 태그와 <span> 태그 등이 있습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>무제 문서</title> </head> <body> <p>문단1</p><p>문단2</p> <em>강조1</em><em>강조2</em> </body> </html> HTML5시대가 열리면서 엘리먼트들의 변화가 일어났습니다. 기존에 존재하던 엘리먼트들이 일부 삭제되는 반면, 새롭게 추가된 엘리먼트들이 나타나게 되었습니다. HTML5가 등장하면서 삭제된 엘리먼트로는 큰 글씨를 나타내는 <big>, 중앙 정렬을 나타내는 <center>, 파일 목록을 나타내는 <dir>, 글씨 모양을 나타내는 <font>, 타이프체를 의미하는 <tt>, 밑줄을 나타내는 <u>, 형식화 됨을 나타내는 <xmp> 등이 있으며, HTML5가 등장하면서 새로 추가된 엘리먼트에는 article, aside, audio, bdi, canvas, command 등이 있습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML5 시맨틱 태그 HTML5 시맨틱 태그 시맨틱 태그에 대해 살펴보겠습니다. 시맨틱 태그란 HTML5에서 태그 이름만 보고도 그 역할을 짐작할 수 있는 태그를 말합니다. HTML5에서 시용하는 주요 시맨틱 태그로는 <header>, <nav>, <section>, <article>, <aside>, <footer>가 있는데, 이와 같은 시맨택 태그를 사용하는 이유는 검색 엔진에서 쉽게 웹 문서 내용을 검색할 수 있고, 웹 보조 기구에서 웹문서를 정확하게 판독할 수 있으며, 어떤 장치에서나 똑같은 문서 해석이 가능하기 때문입니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <header> <h1>HTML5 시맨틱 태그 알아보기!!</h1> </header> <nav> <h2>시맨틱 태그란 무엇인가?</h2> <h3>시맨틱 태그 왜 사용해야 하는가?</h3> <h4>시맨틱 태그를 어떻게 사용할 수 있는가?</h4> </nav> <article> <section> <ol> <li>하나</li> <li>둘</li> <li>셋</li> </ol> </section> <section> <ul> <li>바나나</li> <li사과</li> <li>딸기</li> </ul> </section> <section> <table border="1"> <tr> <th>과목명</th> <th>시험점수</th> </tr> <tr> <td>영어</td> <td>90점</td> </tr> <tr> <td>수학</td> <td>89점</td> </tr> </table> </section> </article> <br> <footer> Copyright © 2014 All rights reserved.</footer> </body> </html> 여러분! 모두 다음과 같은 실행결과가 나오셨나요? 다운받으신 소스코드와 다음의 실행 결과 화면을 함께 보면서 각 영역별 구간이 어디에 위치해 있고, 어떻게 표시되는지 다시 한번 확인해 보겠습니다. 먼저 h태그 부터 살펴보겠습니다. h 태그란 제목을 나타내는 태그로, <h1>부터 <h6>의 범위를 갖습니다. 화면의 소스 영역을 보시면 <h1>, <h2>, <h3>, <h4>의 태그가 사용되고 있는데, 이 코드를 실행해보면, 다음과 같은 결과가 나타나게 됩니다. 결과값을 분석해 보면, <h1>태그가 가장 큰 텍스트를 나타내고, 숫자가 올라갈수록 텍스트의 크기가 작아지는 것을 확인할 수 있습니다. 다음으로 순서 있는 목록을 나타내는 ol태그를 살펴보겠습니다. ol태그는 ordered list의 단어를 줄여 만든 태그로 목록 앞에는 숫자 이외에도 알파벳이나 로마숫자로도 나타낼 수 있습니다. 다음과 같이 ol태그안에 하나, 둘, 셋 이라는 텍스트를 인코딩하게 되면, 하나 둘 셋 이라는 텍스트 앞에 숫자가 순서대로 붙는 것을 확인할 수 있습니다. 이처럼 ol태그의 기본값은 숫자이며, 숫자가 아닌 알파벳이나 로마숫자로 표기하기 위해서는 별도의 CSS작업이 필요합니다. 그렇다면 순서가 없는 목록을 나타내기 위해서는 어떤 태그를 사용해야 할까요? 그렇습니다. 바로 ul 태그를 사용합니다. ul태그는 ol태그와는 반대로 순서가 없는 목록을 만들 때 사용하는데, ul은 Unordered List의 약어를 의미합니다. 다음과 같이 <ul>태그를 사용하여 바나나, 사과, 딸기의 텍스트를 인코딩하면, 바나나, 사과, 딸기 목록 앞에 가운데 점의 블릿이 붙게 되는데, 목록 앞의 기호는 CSS를 사용하여 수정할 수 있습니다. 1. HTML5 엘리먼트의 정의와 특징
2. 엘리먼트와 태그
3. 엘리먼트의 종류
4. 추가/삭제된 HTML5 엘리먼트
1. 시맨틱 태그란?
2. HTML5 시맨틱 태그 실습 예제
'Web프로그래밍' 카테고리의 다른 글
| HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 (0) | 2016.04.21 |
|---|---|
| HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 (0) | 2016.04.20 |
| HTML5 - 03 HTML5와 HTML4.01의 차이 (0) | 2016.04.20 |
| HTML5 02-2 HTML5 기초 - HTML5 표준문서 (0) | 2016.04.19 |
| HTML5 02-1 HTML5 기초 HTML, XHTML (0) | 2016.04.19 |