티스토리 뷰
HTML 웹문서의 기본구조
HTML이란 HyperText Markup Language의 약자입니다. 우리 말로 번역하면 어떻게 되는지는 모르겠지만 HTML문서라 함은 일반적으로 인터넷상에서 보여지는 웹페이지를 의미합니다. 파일 확장자는 *.html 또는 *.htm 등으로 저장되는데 가장 간단한 형태의 웹 언어라고 합니다.
HTML 문서를 구성하는 것은 수많은 형태의 태그라고 할 수 있습니다. 태그(Tag)의 사전적 의미를 보면 이름표, 꼬리표 등으로 이해할 수 있습니다. 의류매장의 옷에 달려있는 가격표도 택 이라고 흔히 이야기하는데 같은 단어입니다.
HTML 문서에서 이 태그를 이용해서 문서의 특정 내용에 대해 어떤 속성을 가지도록 꼬리표를 붙인다고 이해하시면 됩니다. 의류매장의 옷에 달린 택을 보고 이것은 얼마짜리 저것은 얼마짜리, 또는 이것은 L 사이즈 저것은 M 사이즈 등으로 이해하듯이 말입니다.
태그는 기본적으로 꺽쇠라고 하는 "<"와 ">"로 되어 있습니다. 여는 태그와 닫는 태그가 한쌍을 이루고 있습니다(여는 태그 단독으로 사용되는 태그도 일부 있습니다). 닫는 태그는 슬래쉬(/)를 포함합니다. 예를 들어 단락을 나타내는 P 태그는 <p> 단락 내용 </p> 이런 형태로 사용됩니다. 여는 태그와 닫는 태그 사이에 있는 내용은 해당 태그의 속성을 적용받게 됩니다.
* HTML 문서의 기본 구조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title> HTML 기본구조 </title> </head> <body> <p> 본문의 내용 </p> <p> 테스트 웹페이지 </p> </body> </html> | cs |
위에서 말씀드린 것과 같이 HTML 문서는 기본적으로 여는 태그와 닫는 태그로 이루어집니다. HTML문서가 갖추어야 할 기본적인 내용은 위와 같이 HTML이라는 태그의 쌍이 존재해야 하고 그 안에 Head와 Body 태그의 쌍이 있어야 합니다.
Head 태그 안에는 문서의 제목을 나타내는 Title 태그와 각종 정보를 표시할 수 있는 Meta 태그 등이 들어갈 수 있습니다. Head 태그는 없어도 되지만 가급적이면 포함하는 것이 웹표준 부분에 있어서도 좋습니다.
Body 태그는 웹페이지의 본문 내용이라고 할 수 있습니다. Body 태그 안에는 단락을 의미하는 P 태그, 이미지를 삽입하는 IMG 태그, 링크를 표현하는 A 태그 등등... 우리가 알고 있는 대부분의 태그들이 들어갈 수 있습니다.
여기에 각 태그별로 속성을 추가하게 되면 좀 더 다양한 형태의 웹페이지를 구현할 수 있게 됩니다. 디자인 측면에서 다양한 속성을 줄 수도 있고 특정 기능을 위해 속성을 부여할 수도 있습니다.
'HTML' 카테고리의 다른 글
| [HTML] 문단 관련 태그 - BLOCKQUOTE 태그, HR 태그, PRE 태그 (0) | 2018.10.10 |
|---|---|
| [HTML] 헤드라인 태그 - Hn 태그, H1 태그, H2 태그 (0) | 2018.10.09 |
| [HTML] 문자관련 태그 - B태그, I태그, U태그 (0) | 2018.10.07 |
| [HTML] 문단, 단락 태그 - P 태그, BR 태그 (0) | 2018.10.05 |
| [HTML] Head 태그 안에 Title 태그, Meta 태그 (0) | 2018.10.03 |
- Total
- Today
- Yesterday