그동안 난 헛배운것이야...

width값 100vw 100%의 차이점은?
어라? 나 왜 모르지?? 어떻게 모를 수 있지???
공부한지 1년이 다 되어가는데 모른다니 부끄럽고 스스로에게 화가난다. 그러니 이참에 제대로 공부해보자!
(mdn과 여러 기술블로그를 구글링하여 공부하므로 아래에 출처를 밝힙니다!)

viewport

vw/vh: viewport width/height

viewport 뷰포트

    웹브라우저에서 viewport는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. viewport 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다. (출처: mdn)

    Viewport 단위는 viewport의 치수를 기준으로하고 있기 때문에 요소의 폭, 높이, 크기를 viewport에 맞게 설정해야하는 상황에서 매우 편리합니다.
(출처: https://taimouse.tistory.com/8)

상대길이 단위 ?
   다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. ( em, rem, lh, vw, vh등이 존재함.)
   상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. (출처: mdn)

( 절대길이 단위의 종류에는 px, cm, mm등이 존재한다. )

vw/vh

vw -> viewport 너비의 1%
vh -> viewport 높이의 1%

예를 들어보자면

<div class="container">

    container클래스의 너비가 1280px 높이가 900px라고 가정하자. container의 1vw는 1280의 1%, 1vh는 900의 1% 이므로,
    각각 1vw = 12.8px / 1vh = 9px이 된다.
(출처: https://programming119.tistory.com/93)

width: 100%

그렇다면 100vw와 100%는 다를까?

    어떤 기기가 되었든 웹페이지의 전체화면(화면을 꽉채운) 너비의 기준은 100vw가 된다.
    그렇다면 100%는 전체화면 기준이 아닐까???
    %단위의 크기는 부모요소의 영향을 받게된다.
따라서 container클래스는 부모인 body의 크기에서 몇%를 차지하냐가 되는것이다.
(출처: https://codingbroker.tistory.com/56)

정리해보자

width: 100vw;
    부모의 영향을 받지않고 뷰포트를 기준이므로 어떠한 기기에서도 전체 화면을 꽉채우는 width값을 가질 수 있다.

width: 100%;
    부모의 영향을 받기 때문에 상위 요소의 크기에 따라 크기가 결정된다.

이렇게 정리해보았는데 내가 맞게 이해한것인지 의문이 생긴다. 글로 정리해 보았으니 직접 코딩해보고 둘의 차이를 눈으로 확인해보아야겠다.

---

** 위글에 문제가 있다면 댓글로 꼭 알려주세요! 지적과 칭찬은 저의 공부에 큰 도움이 됩니다.