Frontend Study
[Frontend Study] Day 6 - Display 속성
이다닷
2024. 3. 19. 18:00
display 속성이란 요소 크기를 어떻게 결정 할건가를 결정하는 속성이다.
display 속성
display 속성값의 종류
- none
- block
- inline
- inline-block
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="none_div">None</div>
<div class="block_div">Block</div>
<div class="inline_div">Inline</div>
<div class="inline-block_div">Inline-block</div>
</body>
</html>
body div {
font-size: large;
margin-bottom: 50px;
}
.none_div {
display: none;
background-color: #000000;
}
.block_div {
display: block;
background-color: aqua;
}
.inline_div {
display: inline;
width: 500px;
background-color: chartreuse;
}
.inline-block_div {
display: inline-block;
width: 500px;
background-color: gold;
}
display: none;
- 화면에서 사라진다.
display: block;
- div의 기본값
- width가 자신의 컨테이너의 100%가 되게끔한다. 즉, 가로 한 줄을 다 차지한다.
display: inline;
- 컨텐츠를 딱 맞게 감싸준다.
- bolck 태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 된고, 크기 변화가 불가능하다.
display: inline-block;
- inline와 block의 특성을 합쳐놓은 속성
- 따라서 임의로 크기를 바꿀 수 있다.