본문 바로가기

tailwind css14

[Tailwind CSS] 17. sticky top-0 & backdrop-blur 요약 1. 학습내용 : sticky top-0 2. 학습내용 : backdrop-blur상세 1. 학습내용 : sticky top-0 ◼︎ sticky top-0 정의- position: sticky : 스크롤 위치에 따라 요소가 흘러가다가 특정 임계점에 도달하면 고정(sticky)되는 css- relative와 fixed 사이의 성격 : 부모 컨테이너 영역 내에서만 고정sticky top-n : top-0 / top-4 / top-1/2 등 ◼︎ sticky top-0 용법return ( ㄱㄴㄷㄹㅁ 홈 ); - hea.. 2025. 6. 19.
[Tailwind CSS] 16. clsx 사용하기 요약 1. 학습내용 : clsx 사용하기상세 1. 학습내용 : clsx 사용하기 ◼︎ clsx 정의- clsx는 경량 className 유틸리티이다.- 조건부로 클래스 문자열을 합치거나, fasly 값(false, null, undefined, 0, "")을 자동으로 걸러주는 경량 라이브러리이다. ◼︎ clsx 특징- clsx는 제로 의존(zero-dependency), 번들 크기 약 200B(최소화시) ◼︎ clsx 설치# npmnpm install clsx ◼︎ clsx 기본 사용법import clsx from 'clsx';function Button({ isPrimary, isDisabled }: { isPrimary: boolean; isDisabled?: boolean }) { ret.. 2025. 6. 19.
[Tailwind CSS] 13. Animation (애니메이션) 요약 1. 학습내용 : Animation (애니메이션) 2. 학습내용 : Next.js의 SSR - Client components 상세 1. 학습내용 : Animation (애니메이션) ◼︎Animation 정의- 애니메이션은 요소가 시각적으로 움직이거나 변화하는 것을 말합니다.- Tailwind CSS에서는 다양한 내장 애니메이션 Utility를 제공하고, 쉽고 빠르게 적용 가능 ◼︎ Utility classanimate-spin : 요소가 계속해서 회전 (Loading Indicator에 유용)animate-bounce : 요소가 계속해서 위아래로 튀는 효과 (Scroll-Down 표시 등에 유용) animate-pulse : 요소가 부드럽게 사라지고 나타나는 효과 (Loading Ske.. 2025. 6. 13.
[Tailwind CSS] 12. Transition (트랜지션) 요약 1. 학습내용 : Transition (트랜지션)상세 1. 학습내용 : Transition ◼︎Transition 정의- Transition은 CSS에서 요소가 상태(값)을 변경할 때, 그 변화를 일정 시간 동안 부드럽게 처리하는 애니메이션 ◼︎Transition 예제- Transition은 hover와 같이 요소 상태(값)을 변경했을 때, 변화를 준다! ( transition / duration-123(ms) )// transition duration-500 의 차이!export default function Transition() { return ( {/* Transition 미적용 */} Hover me .. 2025. 6. 13.
[Tailwind CSS] 10. Responsive 모바일 우선(Mobile-First) 설계 방식을 이해하고, 웹페이지를 최적화함이 목표!Tailwind CSS 는 미디어 쿼리를 사용하지 않고, 미리 정의된 breakpoint Utility를 통해 손쉽게 반응형 디자인을 구현! 요약 1. 학습내용 : Responsive 2. 학습내용 : 상세 1. 학습내용 : Responsive ◼︎ 반응형 디자인 (Responsive Design) 정의- 반응형 디자인 : 데스크탑, 태블릿, 모바일 등 다양한 기기에서 웹사이트가 기기의 화면 크기에 맞춰 자동으로 레이아웃을 조정하는 방법- 사용자가 어떤 기기를 사용하든 최적의 UX를 제공받을 수 있도록 한다. ◼︎ BreakPoint- 정의 : 웹사이트가 화면 크기에 따라 레이아웃이나 스타일에 변경을 줘야할.. 2025. 6. 11.
[Tailwind CSS] 9. Position: fixed, sticky fixed와 sticky 속성을 활용해 시멘틱한(의미론적) 태그를 사용하여고정된 헤더와 스크롤시 우측에 함께 유지되는 상품 정보와 결제 버튼이 포함된 UI를 구성을 목표한다. 요약 1. 학습내용 : Position : fixed 2. 학습내용 : Position : sticky 상세 1. 학습내용 : Position : fixed ◼︎ Position : fixed 정의fixed는 요소를 뷰포트에 고정해, 스크롤 시에도 해당 요소가 고정된 위치에 머물게 한다. ◼︎ Position : fixed 예시 : header 를 고정해야할 때- fixed 를 사용하게 되면, 요소가 원래의 흐름에서 벗어나게 되기에 가로 너비도 달라진다. 대처1) fixed + w-full (100%) .. 2025. 6. 11.
[Tailwind CSS] 8. Flex, Grid 요약 1. 학습내용 : Flex 2. 학습내용 : Grid 상세 1. 학습내용 : Flex ◼︎ FlexBox 정의FlexBox는 수평 및 수직 정렬을 위한 CSS 레이아웃 모델 (주로 단일 행, 열에서 아이템 정렬할 때 유용)flex : Flexbox 컨테이너를 활성화한다.justify-start / justify-center / justify-end : 요소를 수평으로 정렬items-start / items-center / items-end : 요소를 수직으로 정렬gap-x-N / gap-y-N : Flexbox 요소 간의 간격 조절 ◼︎ FlexBox 예시 MyWebsite Home .. 2025. 6. 11.
[Tailwind CSS] 7. Container 요약 1. 학습내용 : Container 2. 추가내용 : globals.css 지정 상세 1. 학습내용 : Container ◼︎ Container 정의Container 클래스는 웹 레이아웃 영역에서 콘텐츠를 깔끔하게 정리하고 중앙에 배치하는 데 주로 사용된다. ◼︎ Container 예시// h (높이)를 지정해주지 않으면 UI에 표현이 되지 않는다. // 100vh (viewport) ◼︎ vh = viewport height viewport : 브라우저 height : 높이=> 브라우저의 높이! ◼︎ Container는 기본적으로 반응형이다!- Container Utility Class를 보면, Breakpoint가 존재한다.- Breakpoint란, 웹사이트가 화면 크기에 .. 2025. 6. 10.
[Tailwind CSS] 5. Color, Bg, Border, padding, margin, rounded 요약 1. 학습내용 : Background Color, Border 2. 추가내용 : p (padding), m (margin), rounded 상세 1. 학습내용 : Background Color, Border ◼︎ Background Color → prefix로 bg를 주고 색상과 진함의 정도를 주면 된다.배경이 파란색 ◼︎ Border → prefix로 border를 주고, 두께와 색상을 적어주면 된다.파란색 보더 2. 추가내용 : p (padding), m (margin), rounded ◼︎ padding →p- => padding: calc(var(--spacing) * ); ◼︎ margin → m- => margin: calc(var(--spacing) * );-m- => .. 2025. 6. 10.

티스토리툴바