🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

100vw 관련 질문

24.05.16 21:54 작성 조회수 64

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가 화면의 전체 너비를 차지하게 됩니다.

감사합니다.

채널톡 아이콘