Jake의 블로그

# 프론트엔드에서 UI를 구현하는 작업을 하다보면 가끔 정사각형 레이아웃이 필요한 경우가 있다. 구체적인 사이즈가 정해져 있으면 문제가 없지만, 가끔 반응형이나 기기 사이즈에 따라서 구현이 필요한 경우, 오늘의 팁을 알아두면 좋다. # 구현 방법 - 기본적으로 tailwindcss가 설정되어 있는 환경에서 아래의 플러그인을 설치하고 적용해준다 https://github.com/tailwindlabs/tailwindcss-aspect-ratio GitHub - tailwindlabs/tailwindcss-aspect-ratio Contribute to tailwindlabs/tailwindcss-aspect-ratio development by creating an account on GitHub. git..

# @tailwindcss/aspect-ratio를 활용한 비율로 정의하는 레이아웃 정하는 방법 - UI의 레이아웃을 정의하다보면, 가끔 구체적인 사이즈는 변할 수 있지만, 가로와 세로의 비율로 사이즈를 정의하고 싶은 경우가 생깁니다. 저의 경우 정사각형 블록을 정의하고 싶어서 검색을 하다 오늘 소개할 TailwindCSS 플러그인을 발견하게 되었습니다. # 사용 방법 - 언제나와 같이 설치를 진행해 줍니다. 참고로 본 포스팅에서 직접적인 TailwindCSS에 관한 내용은 생략합니다 yarn add -D @tailwindcss/aspect-ratio 그리고 아래와 같이 tailwind.config.js에 플러그인을 추가합니다. // tailwind.config.js module.exports = { t..