반응형
1. 100%
100%는 부모 태그의 100%를 사용하겠다는 의미이다.
따라서 height 설정시에는 부모 태그의 height값이 있어야 한다.
width 설정시에는 부모 태그의 width값이 있어야 한다.
주의사항
예를 들어, 부모 태그의 높이 값이 50%이고 자식 태그의 높이 값이 100%라면 자식 태그는 부모태그가 지정한 50%를 100% 보여준다는 의미이다.
.parent{
height:50%;
}
.parent > div{
height:100% /*여기서 100%는 100vh와 다르다. (부모 태그에 종속되므로)*/
}2. 100vh
높이 설정 방식이다.
100vh는 부모태그와는 관련 없이 사용할 수 있다.
현재 보이는 뷰포트 높이의 100%를 의미한다.
.example{
height:100vh;
}3. 100vw
넓이 설정 방식이다.
이것 또한 100vh처럼 부모 태그와 관련 없이 사용할 수 있다.
현재 보이는 뷰포트 넓이의 100%를 의미한다.
.example{
width:100vw;
}