[ZIMZIM] tailwindCss w-full vs w-screen

tailwindc css docs(https://tailwindcss.com/docs/width)

 

tailwindCss 에서는 w-full과 w-screen으로 화면을 가득 채울수 있다는 것은 동일한데 무엇이 다른지에 대해 조사해 보았다.

 

w-full(width:100%)

요소의 부모 요소의 너비를 100%로 설정함. 즉, 해당요소가 속한 컨테이너의 너비에 맞춰 요소의 너비가 조정된다.

주로 내부 컨텐츠가 부모 요소의 너비에 맞추어져야 할 때 사용한다.

 

w-screen(width: 100vw)

요소의 너비를 뷰포트(viewport, 웹페이지를 보고 있는 사용자의 브라우저 창 크기를 의미함)의 너비에 맞추어 100%로 설정한다.

요소가 화면 전체 너비에 맞춰져야 할 때 사용한다.

 

 

레이아웃을 잡을 때 가장 최상위에는 w-screen을 사용하여 전체 viewport를 잡은 뒤, 하위 영역에서는 w-full을 사용하는 것이 좋다.

 

import React from 'react';

const Landing = () => {
  return (
    <div className="w-screen h-screen bg-gradient-to-br from-[#B3C1F9] to-[#6A7293] px-[70px] py-[54px]">
      <div className="font-bold tracking-wider text-[36px] flex flex-row items-center gap-2">
        <img
          src="src/assets/icon/icon.svg"
          alt="icon"
          style={{ width: 40, height: 40 }}
        />

        <span className="align-center">ZIMZIM</span>
      </div>

      <div className="flex flex-row h-full gap-10">
        <div className="flex flex-row items-end relative h-full">
          {/* 동그라미 2개 */}
          <span className="bg-[#9FACDD] w-[426px] h-[426px] rounded-full"></span>
          <span className="absolute bg-[#9FACDD] w-[146px] h-[146px] rounded-full translate-x-[210%]"></span>
        </div>
        <div>login ui</div>
      </div>
    </div>
  );
};

export default Landing;