반응형
height: 100vh VS height: 100%
CSS를 보다보면 height을 100vh으로 설정하기도 하고 100%로 설정하기도 한다.
|
1
2
3
|
height: 100vh;
height: 100%
|
cs |
이 둘의 차이는 무엇일까?
height: 100vh
viewport 높이의 100%
height: 100%
parent element 높이의 100%
height: 100%로 정하면 parent 값에 의존하므로, parent 값에도 height이 설정되어 있어야 한다.
반면, height: 100vh로 정하면 parent 값에 의존하지 않으므로, 어디에서든 사용할 수 있다.
반응형
'HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] grid-template: repeat 사용 (0) | 2021.08.08 |
|---|---|
| [CSS] position 속성 사용법 (0) | 2021.08.08 |
| [CSS] overflow 사용방법 (0) | 2021.08.08 |
| [CSS] align-items, justify-content (flex) (0) | 2021.08.08 |
| [CSS] *{ padding: 0; margin: 0; } 의 의미 (0) | 2021.08.08 |