![[HTML/CSS] 5. CSS : Display](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-07T07%3A20%3A31.129Z-65e4a119-f1b5-4f0a-b767-1b7308551831&w=3840&q=75)
Contents
Display : 외관 설정Display : 외관 설정
- 사용자에게 어떻게 표시할 지를 정하는 속성
- inline
- block
- inline-block
Block, Inline의 성질
- Block의 경우
- 너비(width)는 화면 전체
- 높이(height)는 내부의 텍스트 글꼴 크기에 따라 달라짐
- 높이는 직접 크기 설정 가능
- Inline의 경우
- 너비, 높이가 모두 내부의 텍스트 글꼴 크기에 따라 달라짐
- 크기 직접 설정 불가
Inline-Block
- 크기 변경이 자유롭지 못한 Inline, Block의 단점을 보완하기 위한 속성
- 너비, 높이를 모두 직접 설정 가능
- 기본 값은 Inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
.b1 {
display: block;
height: 200px;
}
.b2 {
display: inline;
height: 200px;
}
.b3 {
display: inline-block;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="b1">1</div>
<hr>
<div class="b2">2</div>
<hr>
<div class="b3">3</div>
</body>
</html>
Share article