고양이손으로 개발

CSS :has() 선택자에 대해:has 선택자는 '부모 선택자' 또는 '조건부 선택자'라고도 불린다.기본 문법/* 기본 형태 */부모요소:has(자식요소) { /* 스타일 */}브라우저 지원 현황Chrome: 105버전 이상Safari: 15.4버전 이상Firefox: 121버전 이상 (2024년 1월 Release)Edge: 105버전 이상주요 사용 사례1. 자식 요소 존재 여부에 따른 스타일링/* p 태그를 포함한 div에만 스타일 적용 */div:has(p) { background-color: #f0f0f0; padding: 20px;}2. 폼 유효성 검사/* 필수 입력 필드가 비어있을 때 부모 요소 스타일링 */.form-group:has(input:required:invalid..

# 이슈 아코디언이나 드롭다운 메뉴 처럼 active시 인터렉션을 적용하는 경우간단하게 transiton을 사용 할 때가 많은데,height가 auto인 요소의 경우 transition이 적용되지 않는다. # 방안 스크립트 사용이 부담되어 css만으로 처리하고 싶은 경우 max-height를 활용하는 방법이 있다. .element { overflow: hidden; height: auto; max-height: 0; /* 초기 상태 */ transition: 0.2s; } .element.active { max-height: 500px; /* (예상 최대 높이) */ } transition은 시작과 끝이 명확한 속성에 대해서 작동한다. height: auto인 경우 브라우져가 값을 가늠 할 수 없기 때문..