요구사항HTML 구조: 태그에 초기 테마를 나타내는 클래스 (예: light-theme)를 부여합니다.을 만들고 버튼 텍스트는 "Dark 모드로 전환"이라고 넣습니다.페이지 내용 확인을 위해 간단한 과 텍스트를 추가합니다.CSS 스타일:.light-theme 클래스: body에 적용될 때, 배경색을 white, 글자색을 #333으로 설정합니다..dark-theme 클래스: body에 적용될 때, 배경색을 #333, 글자색을 white로 설정합니다.(선택) body에 transition을 추가하여 테마 전환이 부드럽게 일어나도록 합니다.JavaScript 기능 (가장 중요):변수 선언: theme-toggle 버튼 요소를 JavaScript 변수에 저장합니다.이벤트 리스너: 버튼에 클릭 이벤트 리스너를 ..

요구사항HTML 구조:를 최상위 컨테이너로 사용합니다.컨테이너 안에 다음 네 개의 주요 영역을 만듭니다.

요구사항HTML 구조:를 전체 레이아웃의 최상위 컨테이너로 사용합니다.컨테이너 안에 다음 세 개의 주요 영역을 만듭니다:

요구사항HTML 구조: 바로 아래에 여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기 ">여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기

요구사항CSS 변수 설정 (Root Variables):문서의 최상위 요소 (:root)에 다음 이름과 값으로 CSS 변수를 선언합니다.--main-color: #6a5acd (밝은 보라색 계열)--border-radius: 4px--spacing: 8px--font-size: 16pxHTML 구조: 안에 태그와 태그를 만듭니다.label 텍스트는 "사용자 이름"으로, input에는 placeholder="이름을 입력하세요"를 넣습니다.CSS - 입력 그룹 스타일:.input-group은 변수를 사용하여 하단 여백을 설정합니다. (변수 --spacing의 2배)CSS - 입력 필드 스타일 (input): 태그에 다음 스타일을 변수를 사용하여 적용합니다.너비: 100%패딩: 변수 --spacing을 사..