CSS에서 display 속성의 값을 block으로 설정하면 해당 요소는 항상 새로운 줄에서 시작하며, 사용 가능한 전체 너비를 차지하게 됩니다. 이렇게 하면 요소가 화면에 블록(block) 요소 형태로 표시됩니다.
블록 요소는 앞뒤 요소와 줄바꿈으로 구분되기 때문에, 문단이나 섹션처럼 독립적인 영역을 만들 때 유용하게 활용할 수 있습니다.
예제 1: block과 inline-block 비교
다음 예제를 통해 CSS에서 display: block을 구현하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo1 {
display: block;
}
p.demo2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019.
</div>
<hr />
<div>
Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019.
</div>
</body>
</html>출력 결과
위 결과를 보면 display: block이 적용된 첫 번째 문단은 앞뒤 내용과 줄이 분리되어 새 줄에서 시작하고 전체 너비를 차지하는 반면, display: inline-block이 적용된 두 번째 문단은 텍스트 흐름 안에서 인라인처럼 배치되는 것을 확인할 수 있습니다.
예제 2: 블록 요소 활용하기
이번에는 또 다른 예제를 통해 블록 표시 방식을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo {
display: block;
}
</style>
</head>
<body>
<h1>Student Result</h1>
<div>
The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>Check the website on the same day at 8PM.
</div>
</body>
</html>출력 결과
위 예제에서도 날짜 부분을 감싼 문단이 블록 요소로 표시되어, 별도의 줄에서 전체 너비만큼 확장되어 나타나는 것을 확인할 수 있습니다. 이처럼 display: block은 특정 정보를 강조하거나 시각적으로 구분된 영역을 만들고 싶을 때 효과적으로 사용할 수 있습니다.