테마 변경 버튼 설정
이번 수업에서는 라이트/다크 테마 변경(Toggle) 버튼을 분석하겠습니다.
data-theme 속성 소개
data-* 속성은 HTML5에서 도입된 사용자 정의 데이터 속성입니다. 이를 사용하여 HTML 요소에 추가 정보를 저장할 수 있습니다.
이 예제에서 data-theme 속성은 웹페이지의 전체 테마를 관리하는 데 사용됩니다.
이 속성은 CSS 선택자 및 JavaScript에서 해당 테마 상태를 가져오거나 수정하는 데 사용됩니다.
Dark와 Light 버튼의 HTML 구조
HTML에서 테마를 변경할 수 있는 버튼을 정의합니다. 각 버튼은 <a> 태그로 만들어졌으며, 각각의 id(dark와 light)로 특정 테마에 대한 동작을 구분합니다.
<ul class="menu">
<a id="dark" class="btn"> <i class="icon icon-left ion-md-moon"></i> Dark </a>
<a id="light" class="btn">
<i class="icon icon-left ion-md-sunny"></i> Light
</a>
</ul>
아이콘 및 텍스트 배치 방법
각 테마 버튼은 아이콘(<i>)과 텍스트(Dark 또는 Light)로 구성됩니다.
아이콘은 Ionicons라는 외부 리소스를 가져왔으며, 해당 아이콘의 클래스 이름을 통해 아이콘을 표시합니다.
아이콘과 텍스트는 같은 줄에 나열되므로 사용자는 테마의 상태를 쉽게 구별할 수 있습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!