HTML의 기본 구조
안녕하세요. 지난번에 HTML에 대한 기초 이해에 대해서 설명드렸는데요.
이해하기 쉬우셨는지요? 최대한 쉽게 설명해보려고 노력하고 있습니다.^^
하지만 역시 이해하기 가장 쉬운 것은 사례를 보는 것인데요. 그래서 제 티스토리를 사례로 기본 구조를
설명해 보도록 하겠습니다.
[HTML의 기본 구조]
위의 사진은 제 티스토리를 구성하는 HTML의 기본 구조인데요. 여기서부터 살펴보겠습니다.
제가 지금 html을 2파트, 상단과 하단으로 나누어 놓았죠?
왜 이런식으로 나뉘어 놓았는지에 대해서 지금부터 설명해 드리겠습니다. ^^
[상단 부분 태그 구성]
#1. DOCTYPE
윗부분은 해당 웹 사이트가 어떤 버전의 언어로 설계되어 있는지 설명하는 부분입니다.
최근에는 간소화하는 분위기라 간단하게 하단 사례처럼 한줄로 갈음하는 경우가 많으나
<!DOCTYPE html>
만약 설명이 필요한 경우 위의 사진처럼 웹 사이트 설계에 대한 정보가 담겨 있습니다. 사실상 우리가
처음부터 설계하는 것이 아니라면 건드리지 않아도 되는 부분으로 기초 정보라고 생각하시면 됩니다.
#2. <html>
HTML 코드로 작성된 문서라고 표시해 주는 태그입니다. 아 그리고 모든 태그는 시작이 있으면 끝이 있어야
합니다. 그래서 모든 태그는
<html>, </html>
위의 사례처럼 시작과 끝을 표시해 줍니다.
태그 안에 /을 넣어주는 것으로 간단하게 해당 태그의 사용이 끝이 났음을 알려줍니다.
[하단 부분 태그 구성]
#1. <head>
HTML 문서의 머리글에 해당하는 태그입니다. 보통 작성하는 문서의 제목이나 정보 등을
담고 있습니다. 대부분의 태그는 이 태그를 시작으로 이루어졌다고 보시면 됩니다.
#2. <body>
HTML 문서의 본문입니다. 단어인 바디처럼 핵심적인 내용을 담고 있는 것이지요.
이 바디 안에 다른 태그를 넣어서 웹 사이트를 구성하는 텍스트와 이미지, 오디오 등의 내용을
담고 있습니다.
#3. <div>
HTML의 영역을 구분해주는 태그입니다. Division이란 단어 아시죠? 축구 좋아하시는 분은 익히 들어보셨을
단어일 텐데요. 1부 리그, 2부 리그 나눌 때 Division 1, Division 2로 표시하잖아요? 그거랑 비슷한
것이라고 생각하시면 됩니다.
div를 사용하는 이유는 웹사이트는 헤더, 메인 콘텐츠, 사이드바, 푸터 크게 4가지 파트로 나뉘어 있습니다.
이 구분을 하기 위해서 사용하는 태그입니다. 모양은 조금 달라도 모든 사이트가 잘 살펴보시면 해당 구조를 지키고
있음을 알 수 있습니다.^^
#4. <h1>
헤드라인을 나타내는 태그입니다. 사용하고자 하는 문서의 타이틀을 나타낼 때 활용합니다.
h1~h6까지 나뉘어 있으며 중요도는 h1이 가장 헤드 타이틀이고 뒤로 갈수록 중요도가
떨어지는(?) 타이틀로 표시됩니다. 그에 따라서 사이즈가 작아지긴 하는데 원래 사이즈를 줄여주는
용도로 쓰는 태그는 아닙니다. 그냥 대제목, 소제목 정도로 이해하면 됩니다.
자, 기본적인 구조에 대해서 한번 살펴보았는데요. 여기에 나오진 않았지만 <img>와 <p> 역시 많이
사용되는 태그입니다. p는 단락을 의미하고 img는 말 그래도 특정 주소에서 이미지를 불러오는
역할을 합니다. 이외에도 많이 있지만 해당 태그들은 직접 실습하면서 익히는 게 가장 빠른
습득 방법입니다.^^
'IT,PC 정보 모음 > HTML_CSS' 카테고리의 다른 글
| HTML과 SEO(search engine optimization)와의 관계 (2) | 2020.10.12 |
|---|---|
| HTML과 CSS와의 관계 (0) | 2020.10.12 |
| HTML에 대한 이해(기초 정보) (2) | 2020.10.12 |
이 글을 공유합시다
