디자이너의 코딩노트 디자이너의 코딩노트

크리에이터링크에도 탭 전환 기능이 있는 템플릿은 있다.그런데 클라이언트 사이트를 작업하다 보면 디자인을 별도로 잡아두는 경우가 많은데, 그 디자인대로 구현하려면 템플릿을 그대로 쓰기가 어렵다.디자인대로 탭을 만들어야 하는데 크리에이터링크는 JavaScript 커스텀을 지원하지 않는다.JS 없이 탭 전환을 구현할 방법을 찾다가 radio input과 CSS ~ 선택자를 조합하는 방식을 발견했다.처음엔 CSS 작성 자체가 헷갈렸지만, 구조를 이해하고 나니 생각보다 단순했다.동작 원리 — radio input이 스위치 역할을 한다핵심 개념은 이렇다. radio input은 선택 상태(:checked)를 CSS로 감지할 수 있다. 여기에 ~ 선택자(일반 형제 선택자)를 붙이면, 체크된 input 다음에 오는 특..