본문 바로가기

💻 DEV83

[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] 15. flex flex-col items-center 요약 1. 학습내용 : flex flex-col (+ items-center)상세 1. 학습내용 : flex flex-col (+ items-center) ◼︎flex flex-col- flex 기본은 direction을 가로로 해준다. → 기본적으로 flex flex-row 의 기능을 해주기 때문에.- flex flex-col → direction을 세로로 해준다.- flex flex-col + items-center → 수평정렬!(보통 justify-center를 쓰지만 flex-col의 경우에는 반대라고 생각하면 된다!) 2025. 6. 18.

[Tailwind CSS] 14. DarkMode (다크모드) 다크모드는 현대 운영체제에선 기본적으로 제공하는 기능이다.더욱이 Light, Dark, System 모드로 제공한다. 요약 1. 학습내용 : DarkMode (다크모드)상세 1. 학습내용 : DarkMode (다크모드) ◼︎DarkMode 예제- 기본 전략 : 운영체제 선호도 사용 (media)Tailwind는 기본적으로 운영 체제의 다크 모드 선호도에 따라 스타일을 적용합니다. 이를 위해 CSS의 prefers-color-scheme 미디어 쿼리를 사용합니다. 별도의 설정 없이 Tailwind에서 바로 사용할 수 있습니다. - 선택자 전략 : 수동으로 다크 모드 전환 (selector)// tailwind.config.jsmodule.exports = { darkMode: 'selector'.. 2025. 6. 13.

[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] 11. Responsive(2) 모바일 우선(Mobile-First) 설계 방식을 이해하고, 웹페이지를 최적화함이 목표!Tailwind CSS 는 미디어 쿼리를 사용하지 않고, 미리 정의된 breakpoint Utility를 통해 손쉽게 반응형 디자인을 구현! 요약 1. 학습내용 : Responsive 2. 학습내용 : 상세 1. 학습내용 : Responsive ◼︎ 반응형 디자인 (Responsive Design) 정의- 반응형 디자인 : 데스크탑, 태블릿, 모바일 등 다양한 기기에서 2025. 6. 11.

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

이전 1 2 3 4 ··· 10 다음

티스토리툴바