CSS에서 display 속성에 block 값을 지정하면 해당 요소는 부모 요소가 제공하는 사용 가능한 전체 너비를 차지하며, 항상 새로운 줄에서 시작합니다. 즉, 줄바꿈이 강제로 일어납니다. display: block이 적용된 요소는 <div>나 <p> 요소처럼 렌더링되며, 이러한 요소를 블록 레벨(block-level) 요소라고 부릅니다.
문법(Syntax)
CSS display block의 기본 문법은 다음과 같습니다.
Selector {
display: block;
}
예제 1: 버튼 클릭 시 블록 요소 동적 추가
아래 예제는 텍스트를 입력한 뒤 'Check' 버튼을 클릭하면 display: block 스타일이 적용된 <em> 요소 두 개가 동적으로 생성되어 화면에 추가되는 코드입니다. 원래 인라인 요소인 <em>에 display: block을 적용하면 어떻게 달라지는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Block</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
em{
background-color: #C303C3;
color: #fff;
display:block;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Block</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
for(i=0; i<2; i++){
var italicObject = document.createElement("EM");
var italicText = document.createTextNode(textSelect.value);
italicObject.appendChild(italicText);
divDisplay.appendChild(italicObject);
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.
'Check' 버튼을 클릭하기 전
'Check' 버튼을 클릭한 후 — 생성된 각 <em> 요소가 한 줄 전체를 차지하며 세로로 배치되는 것을 볼 수 있습니다. 이것이 바로 display: block이 만들어내는 블록 레벨 동작입니다.
예제 2: 다양한 display 값 비교
다음 예제는 flex, none, inline-block, grid 등 여러 display 값을 함께 사용하여 렌더링 방식의 차이를 비교한 것입니다. block과 다른 값들이 어떻게 다르게 동작하는지 이해하는 데 큰 도움이 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#flex {
display: flex;
}
#none {
display: none;
}
.inline-block {
display: inline-block;
background-color: mintcream;
}
.grid {
display: grid;
background-color: cornflowerblue;
}
div {
margin: 30px;
padding: 5px;
height: 10px;
line-height: 5px;
text-align: center;
background-color: lightblue;
border: 2px solid black;
}
div > div {
background-color: lightpink;
border: 2px solid green;
}
div > div > div {
background-color: sandybrown;
border: 2px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">heyyy</span>
<div><span id="none">heyyy</span>
<div>
<span class="inline-block">heyyy</span>
<span class="inline-block">heyyy</span>
<div>
<span class="grid">heyyy demo</span>
<span class="grid">heyyy demo</span>
</div>
</div>
</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.
display: block 핵심 정리
- 요소의 너비가 부모 컨테이너의 가용 전체 너비만큼 확장됩니다.
- 항상 새 줄에서 시작하므로 앞뒤 요소와 줄바꿈으로 구분됩니다.
- width, height, margin, padding 등 박스 모델 속성을 자유롭게 적용할 수 있습니다.
- <div>, <p>, <h1>~<h6>, <ul>, <section> 등이 대표적인 기본 블록 레벨 요소입니다.