100vw 관련 질문

안녕하세요 답변 도우미입니다.

100vw를 사용하여 너비를 설정했음에도 불구하고 페이지 양쪽에 흰색 테두리가 생기는 이유는 보통 body 태그에 기본적으로 적용된 마진 때문입니다. 이 문제를 해결하기 위해 body 태그의 기본 마진을 제거해야 합니다.

다음은 이 문제를 해결하는 방법에 대한 설명입니다:

### 1. 100vw의 의미

- vw는 뷰포트 너비(Viewport Width)의 약자로, 뷰포트의 너비를 기준으로 단위를 설정합니다.

- 100vw는 뷰포트 너비의 100%를 의미합니다. 즉, 화면의 전체 너비를 차지해야 합니다.

### 2. 기본 마진 문제

- HTML의 기본 스타일시트는 body 태그에 기본 마진을 적용합니다.

- 이 기본 마진 때문에 100vw로 설정된 요소가 실제로 화면 전체를 채우지 못하고 양쪽에 여백이 생기게 됩니다.

### 3. 해결 방법

body 태그의 기본 마진을 제거하면 됩니다. CSS에서 body 태그의 마진을 0으로 설정하여 이 문제를 해결할 수 있습니다.

#### 예제

다음은 body 태그의 기본 마진을 제거하고, 100vw를 적용하여 화면 전체를 채우는 방법에 대한 예제입니다:

```html

<!DOCTYPE html>

<head>

<title>Full Width Example</title>

<style>

body {

margin: 0;

}

.full-width {

width: 100vw;

height: 100vh;

background-color: lightblue;

}

</style>

</head>

<body>

</body>

</html>

```

위 예제에서는 body의 마진을 0으로 설정하여 기본 여백을 제거했습니다. 그리고 .full-width 클래스를 사용하여 div 요소의 너비를 100vw로 설정하였습니다. 이렇게 하면 div가 화면의 전체 너비를 차지하게 됩니다.

감사합니다.

Cộng đồng Hỏi & Đáp của Inflearn