css에서 최상위 요소가 화면을 가득 채우도록 할 때 100%나 100vw를 많이 사용한다(높이는 vh와 %를 많이 사용하고)
둘은 별 차이가 없을 것 같지만, 한 가지 큰 차이가 존재한다.
vw는 viewport를 기준으로 백분율 계산을 한 단위이다.
이 때, 스크롤 바는 고려되지 않는다.
반면, %는 부모 기준으로 가용가능한 공간을 기준으로 백분율로 값을 계산한다.
이 때, 스크롤 바는 고려된다.
이게 무슨 말인가.
예시를 들어 보자.
아래는 style 태그를 같이 넣은 html 코드다. css는 기본적인 reset css만 있다.
<!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>
// 기본 reset css
html {
margin: 0;
padding: 0;
}
body,
body * {
box-sizing: border-box;
margin: 0;
}
// --
</style>
</head>
<body>
</body>
</html>
이 때, 요구 사항으로 body에 배경 색상 tomato, width와 height는 항상 화면을 가득 채우도록 요청받는다.
그럼 아래처럼 구현 가능하다.
body {
background-color: tomato;
width: 100vw;
/* 혹은 width 100% */
height: 100vh;
}이 때는 width: 100%나 100vw나 별 상관이 없다.
문제는 스크롤이 생기는 경우이다.
요구 사항으로 body의 높이가 1000vh으로 수정되었고 이제 화면에는 스크롤이 추가되었다.
이 때 화면은 이런 식이 된다.
우측 하단을 보면 가로로 약간 오버플로우되어 스크롤이 발생한 걸 알 수 있다.
width: 100vw니까. 화면 너비만큼 body 너비가 설정되는데 오버플로우가 생긴 이유는 스크롤 때문이다.
실제 viewport 너비는 100vw - 스크롤 너비 이지만, css 코드 상에서 body는 100vw 이기 때문.
이런 경우를 피하려면 width: 100%를 주면 된다.
'CSS' 카테고리의 다른 글
| [css] height:100%를 줬는데 박스가 부모 박스보다 커지면 다음 문제를 체크하자 (0) | 2024.08.11 |
|---|---|
| [css] letter-spacing 적용 시 중앙 정렬 레이아웃 틀어짐 문제 (0) | 2024.07.24 |
| [CSS] 절대 단위와 상대 단위 정리 (0) | 2024.03.30 |
| [CSS] position:absolute의 독특한 규칙과 문제(padding-area) (0) | 2024.02.28 |
| [CSS] nav로 적당한 폰트 사이즈 디자인 (1) | 2024.02.28 |
