HTML 요소가 화면에서 어떤 종류의 상자(box)로 렌더링될지 지정하려면 CSS의 display 속성을 사용합니다. 이 속성은 요소가 블록 레벨로 배치될지, 인라인으로 흐를지, 또는 플렉스·그리드 같은 특수한 레이아웃 컨테이너로 동작할지를 결정합니다.
주요 display 값
자주 사용되는 display 값은 다음과 같습니다.
- block – 요소가 한 줄 전체를 차지하는 블록 상자로 표시됩니다.
- inline – 텍스트 흐름 안에서 인라인 상자로 표시되며, 너비와 높이가 적용되지 않습니다.
- inline-block – 인라인처럼 배치되면서도 너비와 높이를 지정할 수 있습니다.
- flex – 자식 요소들을 유연하게 배치할 수 있는 플렉스 컨테이너를 만듭니다.
- grid – 행과 열 기반의 그리드 레이아웃 컨테이너를 만듭니다.
- none – 요소를 화면에서 완전히 숨깁니다.
예제: flex 컨테이너 만들기
아래 코드는 display: flex를 적용하여 플렉스 컨테이너를 구현하는 예제입니다. 컨테이너 안의 자식 요소들이 가로 방향으로 정렬되며, Q4 항목에는 align-self: center를 사용해 세로 축 기준 가운데에 배치했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 90px;
font-size: 40px;
width: 100px;
margin: 50px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div style = "align-self: center">Q4</div>
<div>Q5</div>
</div>
</body>
</html>위 코드를 실행하면 주황색 배경의 컨테이너 안에 Q1부터 Q5까지의 항목이 일정한 간격으로 배치된 것을 확인할 수 있습니다. 이처럼 display 속성 하나만으로 요소의 렌더링 방식과 레이아웃 구조를 자유롭게 제어할 수 있습니다.