HTML 기본 개념 정리

이 글은 HTML 기본 개념을 정리하기 위한 글입니다.

1. HTML 정의

사전적 정의

• HTML(Hyper TextMarkup Language) : 웹 페이지를 구성하는 마크업 언어
• 마크업 언어 : 프로그래밍 언어가 아니고 구조를 표현하는 언어
• HTML 구조 : TreeStructure로 부모노드와 자식노드 형태로 구성
• Tag : html의 기본구성요소

---

2. Block 태그 and Inline 태그

많이 사용되는 태그들 모임

수많은 사이트를 분석하여 많이 사용되는 태그 32개를 정리하였다.

• html, head, body, title, meta, script, link, style
• div, p, ul, li, h1, h2, h3, form, nav, footer, header,
• a, img, span, input, button, strong, i
• br, iframe

Block 태그

특징

부모요소의 전체 공간을 차지하여 블록을 만든다.

태그들

• div
• p
• ul, li
• h1 ~ h6
• form
• header, nav, footer,

Inline 태그

특징

요소를 구성하는 태그에 할당된 공간만 차지

태그들

• a
• img
• span
• input
• button
• strong

---

3. Sementic markup

Sementic markup 이란?

주어진 목적을 위해 태그(요소)를 사용

중요한 이유

• 검색엔지 최적화(SEO) : 사람과 기계가 모두 이해하기 쉽게한다.
• 접근성 : 스크린 리더기로 읽었을때 이해하기 쉽도록 한다.
• 유지보수 : 모두가 기능을 빠르게 이해할 수 있어 유지보수 시간이 절약된다.

---

4. Emmet

1. 자동완성 : tab키 / div(tab키)
2. 텍스트 : {} / div{헬로}
3. 자식(하위)요소 : > / div>div
4. 형제 요소 : + / div>p+a
5. 올라가기 : ^ / div>p^div
6. 반복하기 : * / ul>li*4
7. 그룹화 : () / ul>(li>a)*4
8. 클래스 : . / div.class-name
9. 아이디 : # / div#id
10. 속성: [attr] / img[alt="이미지 설명"]
11. 넘버링 : $ / div.item$*6