인프런 커뮤니티 질문&답변
작성한 질문수
100vw 관련 질문
작성
·
161
0
모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서
100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!
답변 1
0
안녕하세요 답변 도우미입니다.
100vw를 사용하여 너비를 설정했음에도 불구하고 페이지 양쪽에 흰색 테두리가 생기는 이유는 보통 body 태그에 기본적으로 적용된 마진 때문입니다. 이 문제를 해결하기 위해 body 태그의 기본 마진을 제거해야 합니다.
다음은 이 문제를 해결하는 방법에 대한 설명입니다:
### 1. 100vw의 의미
- vw는 뷰포트 너비(Viewport Width)의 약자로, 뷰포트의 너비를 기준으로 단위를 설정합니다.
- 100vw는 뷰포트 너비의 100%를 의미합니다. 즉, 화면의 전체 너비를 차지해야 합니다.
### 2. 기본 마진 문제
- HTML의 기본 스타일시트는 body 태그에 기본 마진을 적용합니다.
- 이 기본 마진 때문에 100vw로 설정된 요소가 실제로 화면 전체를 채우지 못하고 양쪽에 여백이 생기게 됩니다.
### 3. 해결 방법
body 태그의 기본 마진을 제거하면 됩니다. CSS에서 body 태그의 마진을 0으로 설정하여 이 문제를 해결할 수 있습니다.
#### 예제
다음은 body 태그의 기본 마진을 제거하고, 100vw를 적용하여 화면 전체를 채우는 방법에 대한 예제입니다:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Width Example</title>
<style>
body {
margin: 0;
}
.full-width {
width: 100vw;
height: 100vh;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-width"></div>
</body>
</html>
```
위 예제에서는 body의 마진을 0으로 설정하여 기본 여백을 제거했습니다. 그리고 .full-width 클래스를 사용하여 div 요소의 너비를 100vw로 설정하였습니다. 이렇게 하면 div가 화면의 전체 너비를 차지하게 됩니다.
감사합니다.