무거운 JS는 그만! CSS :has()로 구현하는 모던 웹 디자인 완벽 가이드

무거운 자바스크립트 없이 직관적인 동적 웹 UI를 완성하고 싶으신가요? 초보자도 복사해서 바로 쓸 수 있는 CSS :has() 부모 선택자 완벽 가이드와 실무 예제를 소개합니다. JS 없는 하이엔드 퍼블리싱을 시작해 보세요!

자바스크립트 없는 하이엔드 UI. 출처: Dalin Ou / Getty Images

 

🚀 복잡한 JS 연산의 한계와 CSS :has()가 가져온 혁신

지금까지 웹 디자인을 하면서 "자식 요소의 상태에 따라 부모 요소의 디자인을 바꾸고 싶다"는 생각, 한 번쯤 해보셨을 겁니다.

예를 들어 체크박스를 클릭했을 때 전체 카드 배경색이 바뀌게 하려면, 과거에는 무조건 자바스크립트(JS)를 사용해 이벤트를 감지하고 클래스를 추가해야만 했습니다. 전문 개발자가 아닌 일반 블로그 운영자나 초급 퍼블리셔에게 JS 코드를 건드리는 것은 언제나 부담스러운 진입장벽이었죠.

하지만 이제 복잡하고 무거운 스크립트 없이 오직 순수 CSS만으로 이 모든 것이 가능해졌습니다. 바로 CSS :has() 선택자 덕분입니다. 이 선택자는 웹 디자인의 판도를 바꾸며 '자바스크립트 없는 하이엔드 퍼블리싱'의 핵심으로 떠오르고 있습니다.

오늘은 코딩 지식이 깊지 않아도 바로 블로그나 웹사이트에 적용할 수 있는 :has() 선택자의 마법 같은 활용법을 아주 쉽게 알려드리겠습니다.

---

💡개발 지식 없이도 직관적으로 이해하는 부모 요소 제어 원리

CSS :has() 선택자는 아주 단순하게 말해 "특정 조건을 가진 자식을 품고 있는 부모를 찾아라!"라는 명령과 같습니다. 기존의 CSS는 항상 위에서 아래로(부모에서 자식으로)만 스타일을 적용할 수 있었습니다. 하지만 :has()는 CSS 역사상 최초로 아래에서 위로(자식에서 부모로) 거슬러 올라가 스타일을 바꿀 수 있게 해주는 혁신적인 '부모 선택자'입니다.

원리는 정말 직관적입니다. 코드를 말로 풀어서 설명해 볼게요.

기존 방식 (JS 필요)	CSS :has() 방식 (JS 불필요)
"버튼이 클릭되면 JS로 부모 <div>를 찾아 active 클래스를 넣어라."	"만약 <div>가 눌린 버튼을 가지고(:has) 있다면, <div> 색을 바꿔라."

이처럼 자바스크립트로 복잡하게 DOM을 탐색하고 이벤트를 걸어줄 필요 없이, 조건만 충족되면 CSS가 알아서 부모 요소의 렌더링을 제어합니다. 코드의 길이가 획기적으로 줄어들고, 브라우저가 스크립트를 해석할 필요가 없어 웹페이지 로딩 속도도 훨씬 가벼워집니다.

 

반응형

 

✂️ 복붙해서 바로 쓰는 실무 CSS :has() 적용 예제 모음

이론은 여기까지! 이제 여러분의 티스토리 스킨이나 개인 프로젝트에 그대로 복사해서 붙여넣기만 하면 작동하는 실용적인 코드 템플릿 두 가지를 소개합니다.

예제 1. 순수 CSS 하이라이트 효과 (갤러리/목록형 스킨에 추천)

특정 이미지 썸네일에 마우스를 올렸을 때, 나머지 썸네일들은 어두워지면서 시선을 집중시키는 효과입니다. JS 없이 단 3줄로 구현됩니다.

/* 부모 갤러리 컨테이너에 마우스가 올라가면, */
.gallery-container:has(.item:hover) .item:not(:hover) {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

 

예제 2. 자바스크립트 없는 폼(Form) 상태 변경

사용자가 체크박스를 선택했을 때 전체 박스의 테두리 색상과 배경색이 변하는 동적 UI입니다.

/* 체크된 체크박스를 가지고 있는 카드 UI 스타일링 */
.card-box:has(input[type="checkbox"]:checked) {
  border: 2px solid #4A90E2;
  background-color: #F0F8FF;
}

 

이 밖에도 서브그리드(Subgrid)나 뷰 트랜지션(View Transitions) 같은 최신 CSS API들과 함께 사용한다면, 스크립트 떡칠 없이도 놀라울 만큼 부드럽고 세련된 하이엔드 UI를 구축할 수 있습니다.

 

728x90

 

✅ 브라우저 호환성 체크 및 퍼블리싱 효율 향상 팁

"너무 좋은데, 혹시 구형 브라우저에서는 다 깨지는 거 아닐까?" 걱정하실 수 있습니다. 다행히 현재 :has() 선택자는 크롬, 사파리, 엣지, 파이어폭스 등 거의 모든 모던 브라우저에서 완벽하게 지원하고 있습니다 (지원율 90% 이상).

퍼블리싱 작업을 할 때 무조건 자바스크립트 라이브러리부터 찾던 습관을 버리고, :has() 선택자를 적극적으로 도입해 보세요. 유지보수는 훨씬 쉬워지고 직관적인 마크업 관리가 가능해집니다. 앞으로 이어질 '자바스크립트 없는 하이엔드 퍼블리싱 시리즈'에서도 무거운 코드를 덜어내고 순수 CSS만으로 구현하는 다양한 꿀팁들을 전해드릴 예정이니 많은 기대 부탁드립니다!

---

오늘 알려드린 CSS :has() 선택자 활용법, 어떠셨나요? 복잡한 스크립트를 배우지 않아도 이렇게 근사한 동적 웹사이트를 만들 수 있다는 사실이 정말 매력적이지 않나요? 여러분의 블로그나 웹사이트에 오늘 당장 복사해서 적용해 보시고, 더 가볍고 빠른 하이엔드 퍼블리싱을 경험해 보세요!