Tailwind | w-screen과 w-full 비교

tailwind에는 너비를 조절하는 클래스 중 w-screen과 w-full이 있는데, 둘 다 너비를 조절하는 클래스지만 미묘한 차이가 있다.

 

w-screen(width: 100vw)

w-screen은 브라우저 화면 전체 너비, 즉 눈앞에 당장 보이는 화면의 너비를 100vw(viewport width)로 설정한다.

• vw(viewport width)란?
  • 현재 브라우저 화면의 너비를 기준으로 한 상대적인 크기
  • 1vw = 현재 브라우저 화면 너비의 1%
  • 예를 들어, 화면 너비가 1200px이면
    • 100vw = 1200px
    • 50vw = 600px
    • 10vw = 120px

 

 

w-full(width: 100%)

w-full은 부모 요소의 너비에 꽉 채우는 방식으로, 즉 해당 요소가 포함된 부모 컨테이너가 특정한 너비를 가지고 있을 때 그 너비를 꽉 채우는 것이다.

 

 

 

한 마디로, 누구를 기준으로 하냐에 따라 다르다는 것이다.

• w-screen은 화면을 기준으로 꽉 채우는 것.
• w-full은 부모를 기준으로 꽉 채우는 것.

 

 

width - Sizing