CSS에서 display속성은 HTML요소가 웹 페이지에서 레이아웃이나 렌더링 측면에서 동작하는 방식을 제어하는 데 사용된다.
HTML요소에 사용되는 박스 모델을 지정한다.
inline : 엘리먼트가 inline 엘리먼트처럼 동작하도록 만든다.
새줄을 강제로 작성하지 않으며 필요한 만큼만 너비를 차지한다.
인라인 엘리먼트의 예시로는<span>
,<a>
가 있다.
width, height와 같은 크기 속성이 적용되지 않는다.block : 엘리먼트가 block 엘리먼트처럼 동작하도록 만든다.
새줄에서 시작하여 사용가능한 전체 너비를 차지한다.
블록 엘리먼트의 예시로는<div>
,<p>
가 있다.
기본적으로 너비를 가득 채우기 때문에 width 속성이나 margin, paddinge등의 박스 모델 속성을 사용하여 조절할 수 있다.inline-block : 'inline'과 'block'의 특성을 결합한다.
엘리먼트는 인라인 요소처럼 흐르지만 내부컨텐츠에 대해 너비, 높이, 여백(margin), 패딩을 블록 엘리먼트처럼 설정할 수 있다.
다른 인라인 엘리먼트는 여전히 존중되며 명시적으로 설정하지 않는 한 새 줄에서 시작되지 않는다.
레이아웃을 구성하는데 유용하며, 가로로 배치되는 엘리먼트 그룹을 만들 때 많이 사용된다.
'개발공부 > 궁금증아카이브' 카테고리의 다른 글
[CSS]word-break (0) | 2024.02.02 |
---|---|
At-rules 에 대해서(aka. CSS에서 @로 시작하는 규칙) (0) | 2024.02.02 |
MIME 타입(IANA 미디어타입)이란? (1) | 2024.01.30 |