CSS의 display 속성은 이제 두 가지 값(two-valued syntax)을 지원합니다. 이 문법을 사용하면 요소의 디스플레이 유형을 외부 값(outside)과 내부 값(inside)으로 명시적으로 지정할 수 있으며, 이를 통해 요소의 흐름 레이아웃(flow layout)을 더욱 세밀하게 제어할 수 있습니다.
display 속성의 두 가지 값이란?
기존에는 display: block, display: inline-block처럼 하나의 키워드로 박스 유형을 지정했습니다. 하지만 새로운 두 가지 값 문법에서는 다음과 같이 역할이 분리됩니다.
- 외부 값(outside): 요소가 문서 흐름에서 어떻게 배치되는지 결정합니다. (
block,inline등) - 내부 값(inside): 요소 내부의 자식 요소들이 어떤 레이아웃 방식으로 배치되는지 결정합니다. (
flow,flow-root,flex,grid,table등)
문법(Syntax)
CSS display 속성의 새로운 문법은 다음과 같습니다.
Selector {
display: /*내부 값(inside)*/ /*외부 값(outside)*/
}예제 1: inline flow-root 활용하기
다음 예제는 display: inline flow-root를 적용한 사례입니다. span 요소가 인라인 레벨로 배치되면서도, 내부에는 독립적인 블록 서식 맥락(block formatting context)을 형성하게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
box-shadow: inset 0 0 12px lightgreen;
border: 2px dotted gray;
}
span {
padding: 2%;
display: inline flow-root;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<span>Inline Block</span> <span>Span</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html>위 코드를 Firefox 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
예제 2: block flow 활용하기
다음 예제는 display: block flow를 적용한 사례입니다. span 요소가 블록 레벨로 전환되며, 내부 콘텐츠는 일반적인 흐름(normal flow)으로 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
margin: 2%;
box-shadow: inset 0 0 12px orange;
border: 2px ridge cadetblue;
}
span {
padding: 2%;
display: block flow;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<span>Block is now</span> <span>Block Flow</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html>위 코드를 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.
정리
두 가지 값 문법은 기존의 단일 키워드(inline-block, block 등)와 동일한 결과를 만들지만, 그 의미를 명확하게 분리하여 표현한다는 점에서 큰 의미가 있습니다. 예를 들어 display: inline-block은 사실상 display: inline flow-root와 같고, display: block은 display: block flow와 같습니다. 이러한 명시적 표현은 코드의 가독성을 높이고, 복잡한 레이아웃을 설계할 때 요소의 동작을 더욱 직관적으로 이해하는 데 도움을 줍니다.