[TailwindCSS] Aspect Ratio로 사이즈 정의하기(Feat. 정사각형)

# @tailwindcss/aspect-ratio를 활용한 비율로 정의하는 레이아웃 정하는 방법

- UI의 레이아웃을 정의하다보면, 가끔 구체적인 사이즈는 변할 수 있지만, 가로와 세로의 비율로 사이즈를 정의하고 싶은 경우가 생깁니다. 저의 경우 정사각형 블록을 정의하고 싶어서 검색을 하다 오늘 소개할 TailwindCSS 플러그인을 발견하게 되었습니다.

# 사용 방법

- 언제나와 같이 설치를 진행해 줍니다. 참고로 본 포스팅에서 직접적인 TailwindCSS에 관한 내용은 생략합니다

 

 

yarn add -D @tailwindcss/aspect-ratio

그리고 아래와 같이 tailwind.config.js에 플러그인을 추가합니다.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

- 플러그인의 사용 방법은 간단합니다. "aspect-w-[가로 비율] aspect-h-[세로 비율]"을 class에 추가해주시면 끝입니다. 아래의 예시와 같이 1:1 정사각형 컴포넌트나 또는 16:9 비디오 컴포넌트를  정의해야 할 경우 유용하게 사용 하실 수 있습니다.

<div class="aspect-w-1 aspect-h-1">
 <p>정사각형</>
</div>


<div class="aspect-w-16 aspect-h-9">
 <p>16:9</p>
</div>

---