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..

# NativeWind 라이브러리를 이용해서 TailwindCSS를 쉽게 적용하는 방법 소개 - 최근 개발하고 있는 모든 웹 프로젝트에서 스타일링에는 TailwindCSS를 사용하고 있습니다. 그런데 얼마전 React Native로 개발할 일이 생겼습니다. 문제는 이미 Tailwind에 중독된(?) 몸이었기 때문에, 어떻게든 Tailwind를 사용하고 싶었습니다. 다행히도 RN에서 Tailwind를 사용할 수 있게 도와주는 라이브러리를 찾아냈습니다. tailwind-rn, nativewind 정도가 눈에 들어왔고, 검토 결과 nativewind를 사용하기로 하였습니다. 본 포스팅에서는 nativewind의 설치 및 적용 방법을 설명하면서, 왜 nativewind를 사용하게 되었는지도 말쓰드리려고 합니다...

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

# HyperUI - 무료 오픈소스 Tailwind CSS 컴포넌트 활용 방법 - Tailwind CSS는 가장 핫한 CSS 프레임워크 중 하나입니다. 하지만, 다른 UI 프레임워크들과는 다르게 직접적으로 컴포넌트를 제공하지 않기 때문에, 실제로 활용을 하려면 Headless UI와 같은 보조 라이브러리나 컴포넌트, 예시들이 필요한 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 HyperUI를 소개하려고 합니다 # HyperUI 사이트 https://www.hyperui.dev/ Free Open Source Tailwind CSS Components | HyperUI Free Tailwind CSS components that can be used in your next project..

# TailwindCSS에서 글자 배경에 Gradient를 적용하는 방법 - text-transparent로 투명하게 만든 텍스트를 gradient가 적용된 배경으로 마스킹하는 간단한 구조입니다. TAB DISPLAY - 적용 결과입니다 - 어떤 조합으로 Gradient를 정해야 할 지 모르겠거나 직접 TailwindCSS 문법으로 Gradient를 작성하기 번거로울 경우, 아래의 사이트를 이용하시면, 바로 원하는 Gradient의 TailwindCSS 코드를 복사해서 적용할 수 있으니, 이용해 보시면 좋을 것 같습니다. Gradients for Tailwind CSS | Hypercolor A curated collection of beautiful Tailwind CSS gradients using ..

# Tailwindcss를 효율적으로 쓸 수 있게 도와주는 daisyUI 소개 - 지금은 적극적으로 Tailwindcss를 사용하지만, 처음 Tailwindcss를 알게되고, 몇 번 사용을 시도하다가 그만두었던 이유 중 하나가 className에 너무 많은 코드를 넣어야 한다는 점이었다. 익숙해지고 나서는 이 부분이 기존의 다른 스타일 정의 방법에 비해서 체감 상 불편하다고 느끼지는 않게 되었지만, 여전히 효율적인 부분에 대한 아쉬움이 있었다. 그리고 구체적인 스펙이 정의되어 있지 않은 토이 프로젝트나, 디자이너 없이 개발을 하는 경우, 어느정도 기본적인 스타일링을 제공해 주는 UI 프레임워크들이 그리워지고는 하였다. 마침 이번에도 그러한 아쉬움이 들어 검색을 하던 중에 오늘 소개할 daisyUI를 발견..