Block 레벨 요소, Inline 레벨 요소

HTML & CSS

오류확인자 2024. 8. 3. 22:38

1. Block 레벨 요소

한개의 독립된 덩어리로 자신의 콘텐츠 길이에 상관없이 화면의 가로 폭 전체를 차지하는 요소들을 말한다.

화면의 가로 폭 전체를 차지하기 때문에 block level 요소들은 세로로 배치된다.

1-1. 대표적인 block level 요소

<article>, <header>, <section>, <div>, ....

유형	단일 작성 문법	멀티 작성 문법	설명
블록 요소	display: block	display: block flow	기본적인 블록 요소
플렉스 컨테이너	display: flex	display: block flex	블록 박스로 배치되며, 내부적으로 플렉스 레이아웃을 사용하여 자식 요소들을 배치
그리드 컨테이너	display: grid	display: block grid	블록 박스로 배치되며, 내부적으로 그리드 레이아웃을 사용하여 자식 요소들을 배치
리스트 아이템	display: list-item	display: block list-item	블록 박스로 배치되며, 리스트 아이템으로 동작
테이블 컨테이너	display: table	display: block table	블록 박스로 배치되며, 테이블 레이아웃을 사용하여 자식 요소들을 배치

block level 요소는 가로 폭 전체를 차지하기 때문에 <div> <article> <section>의 배경색이 화면 가로폭 전체를 차지하고 세로로 정렬된다.

1-2. 특징

<p>
  <div>div</div>
</p>

컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말한다. 일반적으로 인라인 요소들은 인라인 요소만 중첩이 가능하고,

정렬을 할때 text-align의 영향을 받는다.

2-1. 대표적인 inline level 요소

<span>, <strong>, <a>, <input>, <button>, ...

유형	단일 작성 문법	멀티 작성 문법	설명
순수 인라인 요소	display: inline	display: inline flow	인라인 레벨 박스를 생성하고 다른 인라인 요소들과 같은 줄에 배치됨
BFC 형성 블록 컨테이너	display: inline-block	display: inline flow-root	인라인 레벨 박스로 배치되지만, 내부적으로 블록 포맷팅 컨텍스트를 형성하여 블록 레벨 요소처럼 동작
플렉스 컨테이너	display: inline-flex	display: inline flex	인라인 레벨 박스로 배치되며, 내부적으로 플렉스 컨테이너로 동작
그리드 컨테이너	display: inline-grid	display: inline grid	인라인 레벨 박스로 배치되며, 내부적으로 그리드 컨테이너

inline level 요소는 콘텐츠 자신의 크기 만큼 영역을 가지기 때문에 <span>, <a>, <button>의 배경색이 콘텐츠 자신의 크기 만큼 변경되고 기본적으로 가로 정렬이 확인 가능하다.

inline level에서 text-align: center를 할 경우 inline level 요소 내부 컨텐츠 들이 중앙 정렬되는 것은 아니다.

1-2. 특징

항상 block level 요소 안에 포함이 되어 있고, inline 요소가 다른 inline 요소를 포함하는 것이 가능하다.(inline level 요소가 block level 요소를 포함하는 것은 불가능)
콘텐츠의 크기 만큼 영역을 가지기 때문에 width, height를 지정해 크기 조절이 불가능하다. (margin (좌우만), padding 속성을 사용 가능하며, line-height 속성을 통해 줄의 높낮이 조절이 가능하다.)

inline level block의 특성(콘텐츠의 크기만큼 영역을 차지해서 가로로 배치) 과 block level 요소의 특성(width, height 를 지정해 크기 조절)을 합친 요소로 display: inline-block을 통해 지정이 가능하다.

3-1. 대표적인 inline-block 요소