lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroGalleryChapter2Title

webIntroGalleryChapter1Title

webIntroGalleryChapter3Title

# 테마 변경 버튼 설정

이번 수업에서는 라이트/다크 테마 변경(Toggle) 버튼을 분석하겠습니다.

 

## data-theme 속성 소개

`data-*` 속성은 HTML5에서 도입된 사용자 정의 데이터 속성입니다. 이를 사용하여 HTML 요소에 추가 정보를 저장할 수 있습니다.

이 예제에서 `data-theme` 속성은 웹페이지의 전체 테마를 관리하는 데 사용됩니다.

이 속성은 CSS 선택자 및 JavaScript에서 해당 테마 상태를 가져오거나 수정하는 데 사용됩니다.

 

## Dark와 Light 버튼의 HTML 구조

HTML에서 테마를 변경할 수 있는 버튼을 정의합니다. 각 버튼은 `<a>` 태그로 만들어졌으며, 각각의 id(`dark`와 `light`)로 특정 테마에 대한 동작을 구분합니다.

```html
<ul class="menu">
 <a id="dark" class="btn"> Dark </a>
 <a id="light" class="btn">
 Light
 </a>
</ul>
```

 

## 아이콘 및 텍스트 배치 방법

각 테마 버튼은 아이콘(``)과 텍스트(`Dark` 또는 `Light`)로 구성됩니다.

아이콘은 Ionicons라는 외부 리소스를 가져왔으며, 해당 아이콘의 클래스 이름을 통해 아이콘을 표시합니다.

아이콘과 텍스트는 같은 줄에 나열되므로 사용자는 테마의 상태를 쉽게 구별할 수 있습니다.