반응형

반응형CSS 2

CSS 최신 선택자 ✅ :has() 활용법과 실무 예제

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

HTML, CSS 2025.11.03

CSS 단위 ✅ px, em, rem, %, vh, vw 언제 어떻게 써야 할까?

CSS에서 크기 단위를 어떻게 쓰느냐에 따라 반응형 디자인, 접근성, 유지보수성이 크게 달라집니다.이번 포스팅에서는 가장 많이 쓰이는 단위들을 비교하고, 실무에서의 활용 팁을 알려드립니다.🧩 1. 절대 단위 vs 상대 단위절대 단위: px (픽셀 기준 → 고정 크기)상대 단위: em, rem, %, vh, vw (상황에 따라 달라짐)📌 2. px (픽셀) .box { font-size: 16px; }고정 크기 (화면 크기와 무관)장점: 직관적, 예측 가능단점: 반응형/접근성에서 불리📌 3. em (부모 요소 기준) .parent { font-size: 16px; }.child { font-size: 2em; } /* 부모의 16px × 2 = 32px */부모 요소의 font-size 기준단점: 중..

카테고리 없음 2025.10.26
반응형