한 줄 팁 | Tailwindcss | 반응형 정사각형 만드는 방법

# 프론트엔드에서 UI를 구현하는 작업을 하다보면 가끔 정사각형 레이아웃이 필요한 경우가 있다. 구체적인 사이즈가 정해져 있으면 문제가 없지만, 가끔 반응형이나 기기 사이즈에 따라서 구현이 필요한 경우, 오늘의 팁을 알아두면 좋다.

# 구현 방법

- 기본적으로 tailwindcss가 설정되어 있는 환경에서 아래의 플러그인을 설치하고 적용해준다

https://github.com/tailwindlabs/tailwindcss-aspect-ratio

GitHub - tailwindlabs/tailwindcss-aspect-ratio

- 설치 방법

라이브러리를 설치해준다

npm install -D @tailwindcss/aspect-ratio

그리고 tailwindcss.config.js를 아래와 같이 변경해준다.

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

주의할 점은 tailwindcss 3.0부터 aspectRatio가 기본 플러그인에도 동일한 이름이 있어서 충돌이 생기므로, corePlugins에 사용안함으로 설정해준다. 

- 사용방법

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

사용방법은 아주 간단하다. 위와 같이 원하는 가로 및 세로 비율을 aspect-w-가로비 asepect-h-세로비로 넣으면 끝이다. 가로와 세로에 들어갈 수 있는 비율은 아래의 표를 참고하면 된다. 정사각형은 1, 1을 넣어서 만들 수 있다.

 

 

---