HTML 기본 구조 & 문법 안내 포스트입니다.
HTML을 시작하면서 기본적으로 알아야 하는 내용에 대해 다뤄보려고 합니다.
index.html 파일
html을 공부한다면 처음 접하게 되는 파일명은 ‘index’입니다.
별다른 의미는 없습니다.
중요한 부분은 ‘.html’로 끝나는 파일이 html파일이라는 것입니다.
위 구조가 html 파일의 기본 구조입니다.
(meta 부분은 필수항목은 아니긴 합니다.)
이 파일을 구성하는 형태들에 대해 간단하게 아래에 정리를 해보겠습니다.
HTML 구성 요소, 태그 (Tag)
‘<>’ 처럼 꺽쇠 형태로 되어 있는 부분을 우리는 ‘태그(TAG)’라고 부릅니다.
Tag는 대부분 같은 이름으로 2번 반복이 되는데, 시작점(Start Point)와 끝점(End Point)를 의미합니다.
<tag> </tag>
<!-- 시작점(Start Point)과 끝점(End Point) -->위 코드를 보면, 시작점과 끝점의 차이는 ‘/’의 유무로 구분됩니다.
<tag>
<tag/>위와 같이 시작점과 끝점으로 구성되지 않는 태그들도 존재합니다.
‘/’가 있는 태그도 있고 ‘/’가 없는 태그도 존재하는데, 편한대로 사용하면 되겠습니다.
<html lang="en">맨 위의 기본 구성을 소개한 코드 중 한 줄을 가져왔습니다.
속성(Attribute)이라는 개념을 소개해드리고자 합니다.
‘html’은 위에서 계속 얘기했던 tag의 이름입니다.
‘lang’은 태그의 속성을 의미하며, 이 HTML 페이지에서 사용하는 언어 속성을 의미합니다.
‘en‘은 속성에 대한 값(Value)이며, 현재 예시에서는 영어를 사용하겠다고 정의를 했네요.
지금까지 설명해드린 것만 이해하셔도 태그에 대한 기본적인 이해는 끝난 것으로 보시면 됩니다.
그럼 이제부터는 HTML 구조에 대해 간단하게 설명을 드리겠습니다.
HTML 구조
HTML 문서는 태그들의 집합으로 이루어졌다고 보시면 되겠습니다.
태그는 일반적으로 ‘시작점’과 ‘끝점’으로 이루어져 있는데, 그 사이에 다른 태그를 삽입할 수도 있습니다.
그런 구조를 ‘Dom’ 구조라고 합니다.
Dom Tree 구조
Dom Tree 구조는 영어 의미 그대로 ‘돔’을 뜻합니다.
돔 구장을 떠올려보시면 편합니다.
볼록하게 튀어나온 형태를 뜻하는데, 태그 안에 태그를 넣고 들여쓰기로 구조화된 표현을 하면 돔(Dom)을 옆으로 눕힌 형태처럼 보인다고 하여 붙은 이름입니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>다시 맨 위의 코드에서 일부를 발췌해왔습니다.
너무 간단한 구조라 예시가 안맞아보일 수 있지만, 이걸로 이해를 부탁드립니다.
‘head’ 태그는 ‘meta’태그와 ‘title’태그의 부모(Parent) 태그로 볼 수 있습니다.
반대로 보시면, ‘meta’태그와 ‘title’태그는 ‘head’태그의 자식(Child) 태그로 볼 수 있습니다.
이런 가계도(?) 또는 조직도(?)가 많이 이뤄지게 되면 돔 형태를 이루게 될 것이라는건 유추해보실 수 있을거라 믿겠습니다..!
지금까지 HTML 기본 구조 & 문법 안내 포스트였습니다.
이번 포스트는 구조와 문법에 대해서만 다뤄봤고 다음 포스트에서 각 구조에서 어떤 역할들을 하는지 공유하도록 하겠습니다.
다른글 보기 : html 관련 글, Web 관련 글, HTML 위키백과