텍스트 교체하기: 5가지 방법 (Swapping Out Text, Five Different Ways)
Source
Evernote/Technote scraps/Swapping Out Text, Five Different Ways CSS-Tricks.md
Summary
웹 애플리케이션에서 버튼 클릭 시 텍스트를 전환하는(예: ‘Show’ <-> ‘Hide’) 5가지 구현 방식을 비교 분석한 문서입니다. jQuery를 이용한 data 속성 활용법, 바닐라 자바스크립트 구현, CSS 클래스 토글 방식, 그리고 CSS-only(체크박스 해킹) 방식까지 다룹니다. 저자는 CSS 방식이 접근성 문제와 레이아웃 불안정성(글자 크기 차이 등)으로 인해 비추천하며, 자바스크립트를 통한 텍스트 교체나 상태 클래스 관리를 더 실용적인 방법으로 제시합니다.
Key Points
- jQuery 방식:
data-text-swap과data-text-original속성을 사용하여 클릭 시 텍스트를 조건부로 교체합니다. 마크업에 원문을 명시하면 JS 로직을 간소화할 수 있습니다. - 바닐라 JS 방식: jQuery 없이
getAttribute와innerHTML을 사용하여 동일한 로직을 구현합니다. - CSS + JS 클래스 토글: JS는 상태 클래스(예:
.on)만 변경하고, CSS:after가상 요소로 텍스트를 덮어씁니다. 하지만 가상 요소의 절대 위치 지정으로 인한 레이아웃 문제와 접근성 이슈가 있습니다. - CSS-only 방식: 체크박스 해킹(Checkbox Hack)을 사용하여 라벨 클릭 시 체크 상태에 따라 CSS 가상 요소로 텍스트를 교체합니다. 상태 관리가 복잡해지고 유지보수가 어려울 수 있습니다.
- 결론: CSS를 통한 텍스트 교체는 글자 크기 차이로 인한 오버플로우 문제와 접근성 문제로 인해 권장되지 않습니다. 자바스크립트를 사용한 텍스트 교체나 상태 관리가 더 안정적입니다.