100vw 관련 질문
333
1 câu hỏi đã được viết
모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서
100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!
Câu trả lời 2
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가 화면의 전체 너비를 차지하게 됩니다.
감사합니다.
교육기간을 연장할 수 있는지 문의드립니다.
0
36
1
메일 확인부탁드립니다
0
56
1
CodeSandbox Vanilla 질문있습니다
0
59
1
part1을 수강하지 않아도 지장이 없다 하셨는데
0
106
1
강의에 관해 문의 드립니다.
0
90
1
메일확인 부탁드립니다.
0
90
1
14강 - 72,73번 강의 영상이 동일한거 같습니다.
0
105
1
Symbol 관련 테스트 코드 실행 결과 문의
0
139
1
호환성 관련 태그
0
119
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
136
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
144
1
div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요
0
86
1
강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠
0
117
1
메일 확인 부탁드립니다.
0
146
1
메일 확인 부탁드립니다
0
150
1
특별한 형태의 javascript배열에서
0
135
1
메일 확인부탁드립니다!
0
160
1
codesandbox 업데이트..
0
143
1
pdf 파일에 있는 링크주소로 들어가지지가 않습니다.
0
266
2
강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~
0
151
1
removeEventlistener 를 왜 해주어야 하는지
0
227
1
VS CODE html:5 <tab>기능이 안됩니다
0
345
1
[모던웹페이지 만들기9](1:40)class-desc 카드부분관련
0
244
2
backtotop 버튼을 연속으로 여러번 사용할때 스크롤이 끝까지 안올라갈 때가 생깁니다.
0
341
1