📂 CSS 파일 구조 설계 – reset, base, layout, components 분리하기
📂 CSS 파일 구조 설계 – reset, base, layout, components 분리하기작은 프로젝트에서는 한 파일로도 충분하지만, 규모가 커질수록 CSS를 모듈화하고 체계적으로 분리하는 것이 매우 중요해집니다. 이 글에서는 실무에서 널리 사용하는 CSS 파일 구조 전략을 소개합니다.1️⃣ CSS 구조를 나누는 기준 **reset**: 브라우저 기본 스타일 초기화 **base**: HTML 태그 기본 스타일 정의 **layout**: 전체 레이아웃 구성 (그리드, 헤더, 푸터 등) **components**: 버튼, 카드, 모달 등 UI 단위 **utilities**: margin, padding 등 유틸리티 클래스2️⃣ 디렉토리 예시 구조/css ├── reset.css ├── b..
2025. 5. 15.
🎞️ @media, @supports, @keyframes 등 CSS at-rule 종합 정리
🎞️ @media, @supports, @keyframes 등 CSS at-rule 종합 정리CSS at-rule은 @로 시작하는 특수한 지시문으로, 조건부 스타일 처리, 기능 지원 확인, 애니메이션 정의 등 고급 스타일링에 사용됩니다. 이 글에서는 가장 많이 쓰이는 at-rule 3가지를 중심으로 설명합니다.1️⃣ @media – 반응형 조건 처리@media (max-width: 768px) { .container { flex-direction: column; }} 브라우저 화면 크기, 기기 조건에 따라 다른 스타일을 적용 min-width, max-width, orientation 등이 자주 사용됨2️⃣ @supports – 브라우저 기능 지원 여부 검사@supports (display..
2025. 5. 15.
🎞️ 호버 효과, 클릭 효과, 토글 효과 – 상태별 인터랙션 스타일링
🎞️ 호버 효과, 클릭 효과, 토글 효과 – 상태별 인터랙션 스타일링사용자가 요소에 마우스를 올리거나 클릭할 때, 시각적인 반응을 주는 것은 UX에서 매우 중요합니다. 이 글에서는 :hover, :active, :focus, :checked 등 상태 기반의 CSS 인터랙션 스타일링을 예제와 함께 정리합니다.1️⃣ :hover – 마우스를 올렸을 때.button:hover { background-color: #0056b3; transform: translateY(-2px);} 마우스를 올리면 색상 변경, 그림자 추가, 살짝 들림 등 효과 적용2️⃣ :active – 클릭 순간.button:active { transform: scale(0.98); box-shadow: inset 0 2px 4px..
2025. 5. 15.
