반응형 전체 글50 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 22 (TailwindCSS 핵심 개념, Git rebase) 목차반응형 디자인사용자 정의 스타일함수 및 디렉티브(Directives)Git rebase오늘 하루를 돌아보며 반응형 디자인미디어 쿼리반응형 유틸리티 베리언트(variants)를 사용해 반응형 컴포넌트를 구현할 수 있다. Tailwind CSS의 모든 유틸리티는 중단점(breakpoints)을 지원해서 조건에 따라 복잡한 인터페이스를 구현할 수 있다. 기본적으로 Tailwind CSS는 모바일 퍼스트 중단점을 사용하며, 중단점 접두사별 최소 너비와 미디어 쿼리는 아래와 같다.중단점 접두사최소 너비미디어 쿼리sm640px@media (width >= 40rem) { ... }md768px@media (width >= 48rem) { ... }lg1024px@media (width >= 64rem) { .... 2025. 5. 22. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 21 (TailwindCSS Vite 환경 구성 및 기초) 목차@layer 규칙TailwindCSS Vitepublic 폴더와 src 폴더의 차이Tailwind 핵심 개념(Core Concepts)상태 디자인테마 변수오늘 하루를 돌아보며 @layer 규칙@layer at-rule은 캐스케이드 레이어를 선언할 때 사용한다. 여러 캐스케이드 레이어가 있을 경우에는 우선순위를 정의할 때도 사용할 수 있다.레이어 이름을 선언한 후, 레이어의 스타일을 정의할 수 있다./* 레이어 선언 */@layer module, state;/* state 레이어 스타일링 */@layer state { .alert { background-color: brown; } p { border: medium solid limegreen; }}/* module 레이어 스.. 2025. 5. 21. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 20 (쌓임 맥락(stacking context), Subgrid, 컨테이너 쿼리, 테일윈드, git stash) 목차쌓임 맥락(stacking context)Subgrid그리드 레이아웃(line name)컨테이너 쿼리Tailwind CSS 인트로Git stash오늘 하루를 돌아보며 쌓임 맥락(stacking context)쌓임 맥락(stacking context)은 HTML 요소들이 화면 위에 어떤 순서로 겹쳐서 표시되는지를 결정하는 3차원적인 개념이다. 요소가 3차원에서 쌓이는 기준 틀이라고 볼 수 있다. z-index는 같은 쌓임 맥락 안에서 쌓이는 순서를 지정한다. 새 쌓임 맥락을 생성하는 조건은 다음과 같다.position이 relative, absolute, fixed, sticky이면서 z-index가 auto가 아닌 값translate 속성으로 이동하거나 margin 값을 음수로 가져서 요소가 서로 겹.. 2025. 5. 20. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 19 (다크 모드 & 라이트 모드, img-set() 함수, 실습) 목차다크 모드 & 라이트 모드img-set() 함수실습하며 배운 것(output, object-fit, object-position, backdrop-filter)오늘 하루를 돌아보며 다크 모드 & 라이트 모드미디어 쿼리를 사용해서 다크 모드와 라이트 모드를 지정하여 스타일을 변경할 수 있다. prefers-color-scheme 값으로 dark 또는 light를 할당하여 스타일을 지정한다.@emdia (prefers-color-scheme: dark) { background: #121212; color: #fff;} 최근에 등장한 light-dark() 함수를 사용할 수도 있다. 함수는 :root에 color-scheme: light dark;를 선언해야 사용할 수 있다.앞에는 라이트 모드 값을, .. 2025. 5. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 18 (키프레임 애니메이션, Transform, CSS 마스크, 멀티 컬럼 레이아웃) 목차CSS 키프레임 애니메이션TransformCSS 마스크멀티 컬럼 레이아웃오늘 하루를 돌아보며 CSS 키프레임 애니메이션애니메이션 효과를 줄 수 있는 2가지 방법 중 하나로, @keyframes at-rule을 선언하여 animation 관련 속성을 사용하며, 특정 시점의 키프레임을 지정할 수 있다. @keyframes 규칙@keyframes at-rule은 animation 속성에 적용할 키프레임을 생성하기 위한 규칙이다. 키프레임이란, 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현된다./* @keyframes 형식 */@keyframes 애니메이션 이름 { from { css속성: 값; } [percentage]{ css속성: 값;.. 2025. 5. 16. 이전 1 ··· 3 4 5 6 7 8 9 10 다음 반응형
