TIL :: block vs inline vs inline-block의 차이점에 대해 1분안에 말하시오.

HTML에서 구조를 짜면 어떤 태그는 일렬로 있고, 어떤 태그는 내용에 한 글자만 있다고 다음 줄로 넘어가있는 걸 볼 수 있다. 조금 배우고나면 차이에 대해서는 알지만 정확한 설명이 아직 단번에 나오지 않아 정리해보았다.

 

block	화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O
inline	화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X
inline-block	inline의 수평 분할 특성 + block의 크기 지정 가능

 

1. Block-level elements

블록요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소들을 의미한다.

언제나 새로운 라인에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.

블록요소는 블록요소와 인라인요소를 모두 포함할 수 있다.

 

• block 요소

<article>, <header>, <nav>, <section>, <div> <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>...

 

2. Inline-level elements

인라인 요소는 컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말한다. 새로운 줄을 만들지 않으며 필요한 너비만 차지한다. 일반적으로 인라인 요소들은 인라인 요소만 중첩이 가능하고 인라인 요소의 정렬은 텍스트 정렬의 영향을 받습니다.

 

• inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite> ...

 

3. inline-block

block과의 차이점

- 요소 뒤에 줄 바꿈을 추가하지 않으므로 요소가 inline요소처럼 다른 요소 옆에 있을 수 있다.

 

inline과의 차이점

- 위쪽 및 아래쪽 여백/패딩이 존재하며 요소의 너비와 높이를 설정할 수 있다 

---

 

블럭요소 인라인 요소 차이점

 

콘텐츠 모델

블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있다.

 

기본 서식

기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.