CSS로만 구현한 기능적인 탭 만들기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 프론트엔드 개발자, 웹 디자이너
- 중급 이상 CSS 이해도 필요
핵심 요약
와요소를 활용한 비자바스크립트 탭 로직 구현- CSS
:has()선택자로 활성 탭 상태 스타일링 .tab-content요소에display: none/display: block조건 적용
섹션별 세부 요약
1. 기본 HTML 구조
.tabs-nav컨테이너에.tab-item요소 배치- 각 탭 컨텐츠에
.tab-content클래스 적용 - 예시:
```html
```
2. CSS 스타일링 및 기본 설정
font-family,padding,gap,border-radius등 기본 스타일 적용.tab-item에cursor: pointer및user-select: none적용.tab-content에border,padding,border-radius스타일링
3. 활성 탭 상태 구현
.tab-item input요소를display: none으로 숨김:has(input:checked)선택자로 활성 탭에 배경색 변경
```css
.tab-item:has(input:checked) {
background: #6b54f0;
}
```
4. 탭 컨텐츠 표시/숨기기 로직
.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content선택자로 컨텐츠 표시- 각 탭에 대응하는
id와for속성 매칭
```css
.tabs-wrapper:has(#tab-a-toggle:checked) #tab-a-content {
display: block;
}
```
결론
- CSS만으로 탭 기능 구현 가능 → 라이브러리 사용 없이 가볍게 구현 가능
:has()선택자와input요소 활용 → JS 없이 상태 관리 가능- HTML 구조의 정확한
id/for매칭 필수 → 로직 오류 방지