Css

display: none ↔ display: grid 전환은 discrete 속성이라 transition 이 안 걸렸다. transition-behavior: allow-discrete 로 닫힐 때의 페이드아웃을, @starting-style 로 열릴 때의 시작 상태를 지정하면 양방향 모두 transition 된다. 두 줄이면 끝난다.

flexbox 는 직계 자식에만 적용되기 때문에, 그룹핑용 wrapper div 를 추가하는 순간 레이아웃이 깨지고 wrapper 안에 같은 flexbox 코드를 또 써야 했다. display: contents 한 줄이면 wrapper 를 레이아웃 흐름에서 지워서 자식들이 원래 flex 컨테이너의 아이템처럼 배치된다. 대신 wrapper 의 시각적 스타일이 전부 사라지는 함정을 알아야 한다.

Kevin Powell YouTube 채널의 동영상 스크립트 발췌본은 CSS의 :has() 의사 클래스 선택기에 대한 심층적인 탐구를 제공합니다. 이 동영상은 :has()가 단순히 부모 선택기가 아니라 관계형 선택기로서 훨씬 더 다양한 기능을 수행할 수 있음을 보여줍니다. 제시된 예시를 통해 :has() 선택기를 사용하여 특정 자식을 가진 부모 요소를 선택하거나, 지정된 요소를 포함하는 요소 바로 뒤에 오는 요소를 선택하고, 이전 요소를 기준으로 요소를 선택하는 방법 등 다양한 활용법을 시연합니다. 또한 has 선택기를 중첩할 수 없다는 한계와 브라우저 지원 현황에 대해서도 언급하며, 다수의 형제를 가진 요소나 특정 유형의 요소를 선택하는 등 보다 복잡한 시나리오에서의 활용법을 소개합니다. 궁극적으로 이 동영상은 :has() 선택기가 다양한 CSS 레이아웃 및 스타일링 문제에 대한 강력하고 유연한 솔루션임을 강조합니다.