|
HTML 기본 구조 알아 보기 |
|
환경: Eclipse Mars |
웹 브라우저를 만드는 HTML 문서의 기본 구조는 크게 4가지로 나눌 수 있습니다. HTML 을 배우는데 가장 기초적인 내용이며, 앞으로 각 항목에 해당하는 태그들을 다룰 것입니다. 오늘은 가장 기초적인 HTML 문서 기본 구조에 대해 알아 보겠습니다.
▼ 샘플 소스에 나와 있는 것처럼 HTML 기본 구조는 4가지로 이루어져 있습니다. <!DOCTYPE html>, <html>, <head>, <body> 이며 각 요소들을 간략하게 설명하도록 하겠습니다.
|
¤ <!DOCTYPE html> |
▼ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
DOCTYPE 은 HTML 문서 형식에 관한 버전 정보를 알려 주는 코드이며 페이지 제일 상단에 위치합니다. 이것은 브라우저가 올바르게 화면을 표시하기 위해 필요한 항목입니다. 만약 선언하지 않는 다면 브라우저의 호환모드로 웹 페이지를 해석하게 됩니다. 호환모드가 되면 HTML 태그가 정확하게 표현이 안될 수 있습니다. DOCTYPE 내부 값들에 대해 알아 보겠습니다.
- HTML : HTML 문서임을 알려줍니다.
- PUBLIC : 외부로 공개한 문서와 내부용이 있는데 외부 공개용 문서임을 알립니다.
- "-//W3C//DTD HTML 4.01 Transitional//EN" : 비공식기관인 W3C 기관에 의해 HTML 4.01 을 Transitional 방식으로 출력한다는 말입니다.
- http://www.w3.org/TR/html4/loose.dtd : 링크 주소의 dtd 문서를 참고하라는 말입니다.
|
¤ <html></html> |
▼ 문서의 시작과 끝에 해당하는 태그입니다. 작성한 내용은 모두 <html> 을 시작으로 하고 마지막에 </html> 로 끝나야 합니다. 그런데 DOCTYPE 은 <html> 위에 위치하게 되죠.
|
¤ <head></head> |
▼ head 는 웹 브라우저에 표시되는 영역이 아니며 여러 설정들을 모아 두는 곳입니다. head 에는 <title>, <style>, <meta> 태그가 들어가게 됩니다. <title>은 문서의 제목을 보여 주게 됩니다. <style> 은 자바스크립트나 스타일 시트를 표시합니다. <meta> 는 문자 인코딩이나 컨텐츠 타입 등을 표시합니다. 한글일 경우 EUC-KR 로 표기하죠.
|
¤ <body></body> |
▼ <body> 안에 웹 브라우저에 표현할 모든 태그들이 들어가는 곳입니다. <body> 안에 있어야 웹 브라우저에 출력이 가능합니다. 앞으로 나올 대부분의 태그는 <body> 안에 포함되어 있겠죠.
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
|---|---|
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
| HTML 특수문자 출력, 공백을 적용할 수 있는 코드 (0) | 2018.03.02 |
| HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법 (0) | 2015.09.25 |
