📌 HTML이란?
HTML(Hyper Text Markup Language)는 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.
- MDN
HTML이란 즉,
- 웹을 이루는 가장 기초적인 구성 요소
- 웹 페이지를 만들기 위해 필요한 표준 마크업 언어
인 것이다.
📌 HTML의 구성요소
HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 "요소 (Element)" 로 이루어져 있습니다.
- MDN
예를 들면, 다음과 같이 p 태그에 둘러싸인 요소가 있을 수 있는데,
<p> HTML의 구성요소 </p>이 요소는 웹 페이지에서 다음과 같이 출력된다.
HTML의 구성요소📌 구성요소 분석
위에서 얘기했던 요소에 대해 자세하게 보도록 하자.
- Tag
- Content
- Element
✔️ 1. Tag (태그)
위 예시에서는 Opening Tag (시작 태그)와 Closing Tag(종료 태그)가 있다. 각각 요소의 시작과 끝을 나타내는 역할이다. <br>, <hr> 과 같이 Closing Tag가 따로 존재하지 않는 경우도 있다.
✔️ 2. Content (내용)
태그와 태그 사이에 있는 부분으로, 위 예시에서는 텍스트이다.
✔️ 3. Element (요소)
요소는 주로 시작 태그와 종료 태그, 그리고 그 사이의 내용으로 구성된다.
✔️ 4. Attribute (속성)
요소들은 속성을 가질 수 있는데, 속성은 다음과 같이 들어간다.
<p style = "color: red;"> HTML의 구성요소1 </p>여기에서 시작 태그 안에 추가된 style = "color: red;"가 이 요소의 속성이다.실제 웹 페이지에서는 다음과 같이 보인다.
📌 Element (요소)
요소에는 크게 빈 요소, 인라인 요소, 블록 요소 이렇게 세 가지 종류가 있다.
✔️ 1. Empty Element (빈 요소)
빈 요소는 내용없이 구조적인 기능만을 가지고 있다.
ex) <br>, <hr>✔️ 2. Block Element (블록 요소)
하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소
ex) <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>
<dl>,<dt>,<dd>,<pre>,<blockquote>
(semantic tag 포함)- 다른 블록 요소 포함 가능 (h1~h6, p 제외)
- 인라인 요소 포함 가능
✔️ 3. Element (인라인 요소)
하나의 태그가 브라우저에서 실제로 코딩된 영역만 차이하여 좌우로 다른 요소가 위치할 수 있는 요소
ex) <span>, <a>, <em>, <strong>, <input>, <label>, <img>- 블록 요소 안에 포함되어 있음
- 다른 인라인 요소 포함 가능
- 블록 요소는 포함 불가능
블록 요소 vs 인라인 요소
📌 Reference
