오늘은 웹 개발을 하기 위해서는 필연적으로 마주칠 수 밖에 없는 HTML에 대해서 얕게 많은 것을 진행했다.
1. HTML 기본
기본적으로 <html>, <head>, <body> 3가지 태그가 존재한다.
<html>
<!-- <head> 태그는 메타데이터 정보가 있음 -->
<head>
</head>
<!-- <body> 태그는 화면에 출력되는 부분, 컨텐츠 정보를 담고 있음 -->
<body>
</body>
</html>이 기본적인 구조를 토대로 여러 가지 태그를 통해서 화면을 구현한다고 볼 수 있다.
태그들은 기본적인 부분만 알고 있으면 까먹더라도 검색을 통해서 알 수 있어서 굳이 적지는 않으려고 한다.
2. HTML 구성요소
HTML을 구성요소는 태그, 요소, 속성이라는 키워드라고 불리는 3가지가 존재한다.
1) Tag (태그)
HTML 구성요소 중 첫 번째인 '태그'라는 친구인데, 태그는 간단하게는 <시작></끝> 이런식으로 부등호 기호를 사용한다.
시작할 때는 그냥 <> 이렇게만 사용하며, 태그를 끝맺음할 때는 </> 처럼 슬래시를 적어줘야한다.
<!--
[태그의 예시]
- <h1>이 시작하는 태그이다. 보다시피 시작할 때는 꺽쇠만 사용한다.
-->
<h1>
<!-- 종료 태그인 </h1>를 보면 시작태그에 슬래시(/)만 추가된 것을 볼 수 있다. -->
</h1>
또 중요한 부분이 있는데, 태그 안에서도 다양한 것을 정의할 수 있다. 이것을 속성이라고 부르는데, 밑에 3) 속성 부분에서 자세하게 다루려고 한다.
2) 요소 (Element)
요소에는 크게 3가지가 존재한다. 각각의 특성이 다르니 살펴보도록 하자.
① Empty Element
해석하면 빈 요소라고 하며, 대표적으로 <br>, <hr> 태그가 있다.
특징은 닫는 태그 없이 단독으로 사용되는 점이다.
② Block Element
해석하면 블록 요소라고 하며, 대표적으로 <div> 태그가 있다.
가장 큰 특징은 부모 요소의 전체 너비를 사용한다는 점이다.
전체 너비를 사용하기 때문에, 당연하게도 개행(줄바꿈)이 일어난다.
③ Inline Element
해석하면 인라인 요소라고 하며, 대표적으로 <span> 태그가 있다.
가장 큰 특징은 태그 안에 들어오는 값 만큼의 너비를 차지한다는 점이다.
예를 들어 <span> 태그 안에 이미지를 삽입하면 이미지의 크기만큼 너비를 차지한다.
3) 속성 (Attribute)
아까 태그 부분에서 잠깐 언급됐던 속성이다. attribute라고 자주 불리니 영어로 알아두는 것이 좋다.아래의 예시를 보면서 설명하려 한다.
<input type="button" value="">예시에는 type과 value라는 속성이 존재한다. type 속성은 <input> 태그에서 어떤 타입인지 결정해주는 역할을 한다.
value 속성은 <input> 태그가 어떤 값을 출력할지 정해주는 역할을 한다.
이렇게 속성은 태그의 보조적인, 태그 자체만으로는 부족한 보조 역할을 해주는 것이라고 보면 된다.
3. Semantic HTML
Semantic은 사전 의미로는 '의미의' 이라는 뜻이다. 의미의 HTML 이라는 말은 언뜻 들어서는 바로 이해가 되지 않는다.
'화면 구성을 어떻게 의미있게 할까?' 라고 생각하면 편하다.
말로는 바로 이해가 되지 않을 텐데, 아래 그림을 보면 어느 정도 바로 이해가 갈 것이다.
화면 구성을 할 때, Semantic 하지 않은 구성은 왼쪽 그림 처럼 <div> 태그만 이용해서 진행한다. 이런 경우에는 각각의 <div> 태그가 어디에 위치하는지, 무슨 의미인지 알기가 어렵다. (이 <div> 태그는 컨텐츠인지, 머릿말인지, 꼬릿말인지 등) 더 나아가 유지보수하는 입장에서도 난처하다.
Semantic한 구성은 오른쪽 그림처럼 어떤 구성으로 이루어졌는지 어림짐작할 수 있고, <div> 태그로 소위 도배된 것이 아니라 태그마다 의미가 있으므로 어디에 위치하는지, 어떤 의미가 있는지 바로 알 수 있다. → 가독성이 좋다!
이상으로 간단하게 HTML에 대해서 정리해보았다. 태그에 대한 내용은 거의 없고 이론적인(?)부분만 있을 수도 있다고 생각한다. HTML을 공부할 때 태그/태그 종류를 외우는 경우를 봤는데 시간이 너무 아깝다고 생각한다.
HTML이 어떻게 이루어져있고, 왜 이런 개념들이 나왔는지 공부하다 보면 금방 이해할 것이라고 생각한다.
태그는 어떻게 사용하는지 대충만 알고 있어도 문서화가 잘 되어있어서 검색만 잘하면 사용하는데 문제가 없다. (필자도 그렇게 사용하고 있다.)
[Reference]
1) [Semantic HTML] (https://www.semrush.com/blog/semantic-html5-guide/)
[Image]
1) [Semantic HTML] (https://www.semrush.com/blog/semantic-html5-guide/)