[HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리)

 

이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니다!

 

---

 

1. Block 태그? Inline 태그?

 

1) Block 태그

 

Block 태그는 box를 치는 태그들이라고 생각하면 편하다. 전체적인 틀을 짠다던지 구조를 만들 때 사용하는 태그들은 Block 태그들이다. 특징은 아래와 같다.

 

1. 항상 새로운 줄에 태그가 생성
2. 좌우 너비가 100%라서 한 줄을 독차지
3. 오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다.

 

 

2) Inline 태그

 

Inline 태그는 위에 block 태그와는 다르게 내용을 적는 태그라 생각하면 된다. 블록 태그로 짜여진 틀 안에 내용을 적을 때 사용하는 태그들이다. 특징은 아래와 같다

 

1. 좌우 공간을 필요한 만큼만 차지한다.
2. 이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
3. 다른 태그와 같은 줄에 배치될 수 있다.

---

2. 태그 분류 및 정리

Block형	Inline형
<header>, <section>, <footer>, <article>, <nav>, <div>, <form>, <ul>, <ol>, <p>, <h1>, <h2>, <h3>, ...	<a>, <span>, <button>, <input>, <img>, <video>, <audio>, <script>, <textarea>, <strong>, ...

 

 

---

 

3. Block 태그 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

 

 

4. Inline 태그 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

 

---

이상 인라인 태그와 블록 태그를 알아보고 분류해보았습니다!