#05 CSS 영역 크기 속성
2022. 1. 19. 01:40ㆍCSS
영역 크기 단위
- px : 가장 많이 사용하는 단위로 지정한 픽셀만큼 크기를 지정한다.
- em : 부모 요소 크기의 배수를 나타낸다.
- rem : 루트 요소(html) 크기의 배수를 나타낸다.
- n% : 부모 요소 크기의 퍼센트를 나타낸다.
(em, rem, % 단위는 반응형 웹사이트에서 주로 사용한다)
width
- 해당 요소의 너비를 지정하는 속성
- auto : 요소가 채울 수 있는 영역을 100% 채운다.
height
- 해당 요소의 높이를 지정하는 속성
- auto : 콘텐츠나 자식 요소의 높이에 따라 변경된다
<div class="red">
red
<div class="pink">pink</div>
</div>.red {
width: 300px;
height: 300px;
background-color: red;
}
.pink {
width: 500px;
height: 200px;
background-color: pink;
}
부모 요소보다 자식 요소의 크기가 더 클 경우 레이아웃이 무너진다
min-width
- 요소의 최소 너비를 지정하는 속성
min-height
- 요소의 최소 높이를 지정하는 속성
max-width
- 요소의 최대 너비를 지정하는 속성
max-height
- 요소의 최대 높이를 지정하는 속성
<body>
<div class="px">px</div>
<div class="percentage">percentage</div>
<div class="min">min</div>
<div class="max">max</div>
</body>/* 고정값으로 크기가 변경되지 않는다 */
.px {
width: 800px;
height: 200px;
background-color: pink;
}
/* 비율값으로 브라우저 넓이에 따라 크기가 변경된다 */
.percentage {
width: 50%;
height: 200px;
background-color: light;
}
/* 브라우저가 800px 이상이면 크기가 늘어나고, 800px 이하로 줄이면 크기가 변경되지 않는다 */
.min {
min-width: 800px;
height: 200px;
background-color: lightgreen;
}
/* 브라우저가 800px 이상이면 크기가 변경되지 않고, 800px 이하면 크기가 변경된다 */
.max {
max-width: 800px;
height: 200px;
background-color: lightblue;
}
반응형
'CSS' 카테고리의 다른 글
| #07 CSS 박스 모델 (0) | 2022.01.20 |
|---|---|
| #06 CSS 가시 속성 (0) | 2022.01.19 |
| #04 CSS text 속성 (0) | 2022.01.18 |
| #03 CSS font 속성 (0) | 2022.01.17 |
| #02 CSS 선택자와 우선순위 (0) | 2022.01.16 |