Frontend Dev/CSS (3) 썸네일형 리스트형 [Tailwind CSS] Tailwind CSS로 다양한 스타일 작성하기 (3d 애니메이션, bg gradient & image url, 반응형 디자인) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. "스무디"는 위 프로젝트 이름으로, 작년 여름 부트캠프 팀 프로젝트로 6명이 함께 작업한 사이드 프로젝트였다.이번에 여러가지 이유와 목적으로 개인 사이드 프로젝트로 처음부터 다시 작업을 했다. 기존 프로젝트에서는 CSS module을 사용해서 스타일을 작성했고, 이번 프로젝트에서는 Tailwind CSS를 적용하기로 했다. 기존에 이미 작성했던 CSS 코드도 있었기 때문에, Tailwind에 익숙해지기만 하면 빠르게 적용할 수 있을 줄 알았는데, 생각보다 이런저런 고비가 많았다. 예상보다 시간 또한 오래 걸렸다. 그 중 프로젝트 초창기 마주했던 문제들의 해결 과정을 정리해보려 한다.💅 Tailwind CSS로.. [Tailwind CSS] Tailwind CSS의 지시어, @tailwind @layer @apply에 대해 이해해보자 ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다. 개인 프로젝트에서 Tailwind CSS를 처음 사용해보았고, 신세계를 맛보았다.누군가는 선호하지 않는다했던 Tailwind. 나 또한 클래스명의 나열으로 지저분해지는 코드가 싫어 사용해보기도 전에 불호를 택했었다.하지만 생각을 바꾸어 사용해보니 생각보다 편리하고 빠른(물론 시간이 필요했다..) CSS 작성에 이것이 신세계구나 싶었다. 학습의 시간은 필요하지만, 배워두면 잘 사용할 Tailwind CSS.이번 글에서는 Tailwind CSS에서 사용되는 지시어, @tailwind @layer @apply에 대해 정리해보려 한다. https://tailwindcss.com/docs/functions-and-dire.. CSS UNITS (절대 단위와 상대 단위) 👾 자주 사용되는 CSS Units • 절대 단위: px, pt 등 • 상대 단위: %, em, rem, vw, vh 등 ✓ 기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px (100%, 1em) px px은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 의미한다. CSS에서 절대 단위를 사용할 때 대부분은 px을 사용한다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터.. 이전 1 다음
