HTML 기초 공부(2) - 요소의 종류

HTML 요소는 크게 빈 요소(empty element)와 블록 요소(block element), 인라인 요소(inline element)로 나눌 수 있다.

 

1. 빈 요소(empty element)
2. 블록 요소(block element)
3. 인라인 요소(inline element)

---

1. 1. 빈 요소 (Empty Element)

빈 요소는 말그대로 비어있어 내용을 포함하지 않는 요소이다.

내용을 포함하지 않는, 그 자체로 온전히 존재하는 요소이기 때문에

시작 태그만 있고 종료 태그를 따로 사용하지 않는다.

 

예를 들어 "나는 나비"같이 내용이 있다면 해당 내용이 어디서 부터 시작해서 어디서 끝나는지를 확정하기 위해서 '끝'을 나타내는 종료 태그를 반드시 포함해야한다. "나는"에서 끝날 수도 있고 "나비"에서 끝날 수도 있기 때문이다.

 

하지만  빈 요소는 별도로 내용이 없기 때문에 끝을 표시할 필요가 없는 것이다.

 

아래 예시를 보면 이해가 쉬울 것이다.

 

대표적인 예시는 다음과 같다.

• <br>: 줄 바꿈
• <hr>: 수평선
• <img>: 이미지
• <input>: 입력 필드
• <link>: 외부 리소스 연결
• <meta>: 메타데이터

빈 요소는 이렇게 시작적인 효과를 주거나, 외부 리소스를 연결하는 목적으로 사용한다.

 

이처럼 내용을 꾸며주는 방식이 아닌 줄바꿈, 이미지 삽입 같이 페이지 자체를 꾸미는 요소로 사용되기 때문에 별도로 내용을 포함하지 않게된다.

---

2. 2. 블록 요소 (Block Element)

블록 요소는 일반적으로 웹페이지의 내용을 구성하는 요소라고 볼 수 있다.

블록이라는 말처럼 웹페이지가 있다면 하나의 가로 줄 한 칸, 즉 공간을 차지한다.

때문에 HTML 코드 상에서 1개의 블록요소1 옆에 블록 요소 2를 작성한다고 해서 옆에 해당 내용이 생기는 것이 아니라 다음 한칸을 차지하게 된다.

 

코드 상에서 <h2>블록 요소1</h2><h2>블록 요소2</h2> 라고 작성한다면 블록요소1 뒤에 작성한 블록 요소 2는 한칸 밀려서 아래와 같이 다음 줄에 나타나게 된다.

 

이러한 블록 요소의 특징은 다음과 같다.

• 화면의 전체 가로 폭을 차지한다.
• 새로운 줄에서 시작하고, 다른 요소들을 위아래로 배치한다.
• 다른 블록 요소나 인라인 요소를 포함할 수 있다.

위의 특징을 좀 더 세부적으로 설명하자면 다음과 같다.

• 새로운 줄에서 시작한다 : 블록 자체가 1칸을 차지하기 때문에 블록 요소끼리는 한줄에 동시에 존재할 수 없고 때문에 새로운 블록 요소가 추가되면 다음 줄에서 시작되게 되는 것이다.
• 가로 폭 전체를 차지한다 : 내용의 길이와 상관없이 가로줄 1칸을 그대로 차지한다.
• 높이(height)와 너비(width)를 설정할 수 있다 : 블록 요소는 '1칸'을 차지하는데 그 1칸의 높이와 너비를 지정할 수 있다.
• 마진(margin)과 패딩(padding)을 설정할 수 있다 : 마진과 패딩은 후에 설명하겠지만 여백을 의미한다. 외부 여백, 내부 여백을 의미한다.

대표적인 예시는 다음과 같다.

• <div>: 분할
• <p>: 단락
• <h1> ~ <h6>: 제목
• <ul>, <ol>, <li>: 목록
• <form>: 폼
• <header>, <footer>, <nav>, <section>, <article>: 시맨틱 요소

---

3. 3. 인라인 요소(inline element)

그렇다면 요소는 이렇게 무조건 1칸을 차지하는가? 그건 아니다. 한칸을 차지하는 블록 요소와 다르게 인라인 요소는 새로운 줄을 차지하지 않고 기존의 줄에서 옆으로 배치되는 요소이다. 자신의 크기 만큼만 가로 공간을 차지하기 때문에 인라인 요소는 다른 요소의 옆에 배치될 수 있다.

이러한 인라인 요소의 특징은 다음과 같다.

• 줄 바꿈 없음 : 인라인 요소는 새로운 줄에서 시작하지 않고, 콘텐츠의 흐름에 따라 옆으로 배치된다.
• 콘텐츠 크기만큼 공간 차지: 인라인 요소는 자신이 포함하는 콘텐츠의 크기만큼만 가로 공간을 차지한다.
• 높이와 너비 설정 불가: 기본적으로 인라인 요소는 높이(height)와 너비(width)를 설정할 수 없다.
• 마진과 패딩: 인라인 요소의 상하 마진(margin)과 패딩(padding)은 적용되지 않지만 좌우 마진과 패딩은 정상적으로 적용된다.
• 텍스트와 함께 사용: 인라인 요소는 주로 텍스트와 함께 사용되어 텍스트의 특정 부분을 꾸미거나 기능을 추가하는 데 사용된다.

대표적인 예시는 다음과 같다.

• <a>: 하이퍼링크
• <span>: 인라인 컨테이너
• <img>: 이미지
• <strong>: 텍스트 강조
• <em>: 텍스트 강조 (기울임)
• <input>: 입력 필드
• <select>: 드롭다운 목록
• <textarea>: 여러 줄 입력 필드
• <button>: 버튼