20230328 [CSS] display 속성

display 속성

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가진다.
1. 블록(block)
2. 인라인(inline)

블록(block)

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소입니다.

인라인(inline)

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img>요소는 대표적인 인라인(inline) 요소입니다.

display 속성의 기본 설정값의 변경

HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있다.
하지만 display 속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있다.
또한, 반대로 display 속성값이 인라인인 요소의 속성값을 블록으로 바꿀 수도 있다.