HTML 이란?
마크업 언어로 작성된 웹 브라우저 상에 표현될 content의 구조, 짜임을 정의한 문서를 말한다.
HTML 구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- comment -->
<!-- implementaion -->
</body>
</html>
HTML 문서들을 기본적으로 위와 같은 형태를 가진다.
설 명
📌 <!DOCTYPE html>
코드의 처음 <!DOCTYPE html> 으로 현재 작성하는 문서(doc)가 HTML 타입 임을 선언해 알린다.
📌 <head>
사용자에게 보여지는 UI 요소가 아닌 현재 HTML 문서에 대한 meta 정보 를 표기한다.
인코딩 utf-8, 적용할 style sheets, 적용할 scripts 와 탭에 표시되는 title 등을 정할 수 있다.
📌 <body>
사용자에게 보여지는 UI에 관련된 것을 표현하는 곳이다.
💎 용어 정리
메타 정보 외에는 보통 열린 tag, content, 닫힌 태그
의 구성으로 원하는 정보를 표현한다.
- 열린 tag
웹문서에 배치 영역을 구분하는 역할을 하거나 뒤에 나오는 Content가 링크 와 같은 어떤 기능을 부여하는 역할을 하는 것을 의미한다.
<a>처럼<tagName>형태로 태그 이름을 <> 안에 표기하면 된다.
📣 속성 (attribute)기존 정의된 tag 에 detail 한 설정이 가능토록 해주는 것을 의미한다.
- tag 의 스타일을 변경 (font 사이즈, 컬러, image 폭, 높이)
- 특정 id 를 부여해 독립적으로 처리 가능하게 분리
- 공통 속성 부여를 위해 class 단위 처리 등
- Content
웹문서에 표현하고 싶은 text 정보를 의미한다.
열린 tag에 의해 tag 정의로 style 이 변경되거나 문서상 배치 영역 구분(sectioning)이 될 수 있다.
- 닫힌 tag
상응되는 열린 tag가 적용되는 곳의 마지막을 의미한다.
<!-- 상응되는 tag 만난 경우 -->
<div class="my-header"> My Content </div>
<!-- 옳지 못한 tag가 입력된 경우 -->
<div class="my-header"> My Content </a> 주요 Tag
tag 는 2가지 기준으로 분류가 가능하다.
- Box 와 Item
Box 태그
CSS없이 사용자에게 보이지 않으면서 다른 특별한 기능없이
Tag 로 둘러싸인 Content 가 웹페이지의 어느 곳에 위치하는지
영역 구분 역할 수행
Item 태그
사용자에게 보이면서 링크나 플레이어 같은 태그별 기능을 수행
- Block 과 Inline
Block Level
부모 Tag를 기준으로 가로 한 줄을 전부 차지 하는 Tag
Inline Level
부모 Tag를 기준으로 다음에 올 Tag가 부모 Tag의 가로 길이를 넘지 않는다면 가로 한 줄을 공유 하는 Tag
Semantic Tag 란?
Tag 의 이름만으로 그 Tag 의 역할, 대략적인 위치 등의 의미를 전달하는 Tag를 뜻한다.
왜 Semantic Tag 를 사용해야 할까?
non-semantic tag 인 <div>와 <span>으로만 이루어진 HTML 파일이 있다고 생각해보자.
그 HTML 파일을 수정하기 위해 열었을 때, <header>나 <nav>처럼 웹페이지 상의 위치와 기능을 알려주는 tag가 없기 때문에 직접 하나하나 각 코드가 의미하는 바를 확인 해봐야 하는 문제가 생긴다.
물론, class를 통해 같은 의미와 기능을 하는 tag 들을 표현할 수 있지만 매번 새로운 페이지를 작성할 때마다 반복되는 의미와 기능 표현하기 위해 class를 정의하며 불필요한 시간이 소모된다. 따라서, 다시 한 번 재차 구현할 필요없이 semantic tag를 사용해 가독성과 생산성을 둘 다 잡으면 된다.
Semantic tag 로 표현하는 웹페이지 Layout
유용한 사이트 모음
- MDN 의 html element reference
Tag 와 Attribute 정리된 곳으로 자신이 필요로 하는 기능을 만족하는 Tag 또는 Attribute가 있는지 확인하고 지원 가능 브라우저 종류와 버전을 확인할 수 있다.
- Validator
정상적으로 입력되지 않은 html 문서인지 확인할 수 있다.
참고
- 드림코딩 엘리 Youtube 중 HTML 관련 영상
