동적 웹 사이트 구축 : 이미지 설명 스위칭 및 테마 스위칭 기능 구현

이 자습서는 HTML, CSS 및 JavaScript를 사용하여 동적 컨텐츠 디스플레이 및 주제 전환 기능을 구현하는 방법을 안내합니다. 우리는 이미지에 토글 설명 정보를 추가하는 방법과 버튼으로 웹 사이트의 전반적인 시각적 테마를 전환하는 방법을 배우고 일반적인 CSS 배경 색 설정을 해결하기위한 실질적인 제안을 제공하여보다 대화식 및 사용자 경험이 풍부한 웹 페이지를 만들 수 있습니다.

1. 그림 설명의 동적 스위칭을 실현하십시오

웹 페이지에 사진을 표시하고 주문에 표시된 설명 정보를 제공하는 것은 사용자 경험을 향상시키는 효과적인 방법입니다. 이 섹션에서는 HTML 구조, CSS 스타일 및 JavaScript 로직을 통해이 기능을 구현하는 방법을 설명합니다.

1.1 HTML 구조

각 사진 및 해당 설명 및 제어 버튼은 간단한 관리 및 작동을 위해 별도의 컨테이너에 캡슐화해야합니다.

 <div class="God-card">
    <img src="path/to/image_of_god.png" alt="이집트 신 이름">
    <p class="Description Hidden">
        이것은 그의 의무, 신화 등과 같은 이집트 신에 대한 자세한 설명입니다.
    </p>
    <button class="Toggle-description-btn"> 설명/숨기기 </button>
</div>


<div class="God-card">
    <img src="path/to/other_image.png" alt="다른 신 이름">
    <p class="Description Hidden">
        이것이 다른 하나님이 묘사하는 것입니다.
    </p>
    <button class="Toggle-description-btn"> 설명/숨기기 </button>
</div>

• God-Card 클래스는 전체 구성 요소를 감싸는 데 사용되므로 레이아웃과 스타일 정의에 편리합니다.
• IMG 태그는 신의 사진을 표시하는 데 사용됩니다.
• 설명 클래스는 단락을 설명하는 데 사용되며 숨겨진 클래스를 통해 초기 상태에 숨겨져 있습니다.
• 토글 설명 BTN 클래스는 설명을 표시/숨기는 버튼을 트리거하는 데 사용됩니다.

1.2 CSS 스타일

숨겨진 클래스의 디스플레이 상태를 제어하려면 CSS 규칙이 필요합니다.

 .hidden {
    디스플레이 : 없음; /* 요소 숨기기*/
}

/* 기본 스타일 미화 카드를 추가 할 수 있습니다*/
.god-card {
    국경 : 1px Solid #CCC;
    패딩 : 15px;
    여백 : 10px;
    텍스트 정렬 : 센터;
    최대 세포 : 300px;
    디스플레이 : 인라인 블록; /* 카드를 나란히 나타나게*/
    수직 정상 : 상단;
}

.god-card img {
    최대 전역 : 100%;
    높이 : 자동;
    마진 바닥 : 10px;
}

.god-card 버튼 {
    패딩 : 8px 15px;
    배경색 : #007bff;
    색상 : 흰색;
    국경 : 없음;
    Border-Radius : 5px;
    커서 : 포인터;
    마진-탑 : 10px;
}

.god-card 버튼 : 호버 {
    배경색 : #0056B3;
}

1.3 JavaScript Logic

JavaScript는 버튼 클릭 이벤트를 듣고 클릭을 기반으로 설명의 가시성을 전환해야합니다.

 document.addeventListener ( 'domContentLoaded', () => {
    // 'Toggle-description-btn'클래스 const togglebuttons = document.querySelectorall ( '. Toggle-Description-BTN')을 사용하여 모든 버튼을 가져옵니다.

    togglebuttons.foreach (button => {
        button.addeventListener ( 'click', () => {
            // 현재 버튼의 부모 요소 가져옵니다 (예 : GOD 카드)
            const parentcard = button.closest ( '. God-card');
            // 부모 요소에서 'description'클래스가있는 단락을 찾으십시오. const description = parentcard.querySelector ( '. description');

            // 'hidden'클래스를 전환하여 설명을 전환하여 '디스플레이/숨기 if (description) {
                description.classlist.toggle ( 'hidden');
            }
        });
    });
});

• domContentLoaded는 스크립트를 실행하기 전에 DOM이 완전히로드되도록합니다.
• QuerySelectorall은 모든 일치하는 버튼을 가져옵니다.
• Foreach는 각 버튼을 반복하고 클릭 이벤트 리스너를 추가합니다.
• button.closest ( '. God-card')는 가장 가까운 .god-card 부모 요소를 위쪽으로 보입니다.
• parentcard.querySelector ( '. description')는 부모 요소 내부의 설명 단락을 찾습니다.
• description.classlist.toggle ( 'hidden')은 핵심이며 요소의 숨겨진 클래스를 추가하거나 제거하여 디스플레이/숨기기 효과를 달성합니다.

2. 웹 사이트 테마의 동적 전환을 실현하십시오

웹 사이트 테마 전환 기능을 통해 사용자는 개인 취향에 따라 다양한 시각적 스타일을 선택하여 사용자 경험을 크게 향상시킬 수 있습니다.

요소에서 CSS 클래스를 전환하여이를 구현합니다.

2.1 HTML 구조

페이지에 버튼을 추가하여 테마를 전환하십시오.

  스위치 주제 

2.2 CSS 스타일

광기 및 다크 테마와 같은 다른 테마 클래스를 정의하고 신체 요소에 적용하십시오.

 / * 기본 테마 (라이트 테마) */
몸 {
    Font-Family : Arial, Sans-Serif;
    배경색 : #f4f4f4;
    색상 : #333;
    전환 : 배경색 0.3s 편의, 색상 0.3s 편의; /* 부드러운 전환*/
}

/* 다크 테마*/
Body.dark-Theme {
    배경색 : #222;
    색상 : #eee;
}

/* 다른 요소는 어두운 테마를 위해 스타일을 유지할 수 있습니다*/
Body.dark-Theme .god-card {
    배경색 : #333;
    국경 색상 : #555;
    색상 : #eee;
}

body.dark- 테마 .god-card 버튼 {
    배경색 : #0056B3;
}

body.dark-teMe .god-card 버튼 : 호버 {
    배경색 : #003d7a;
}

• 기본적으로 바디 요소는 가벼운 테마 스타일을 갖습니다.
• 바디 요소가 다크 테마 클래스와 함께 추가되면 어두운 테마의 스타일이 기본 스타일을 무시합니다.
• 전환 속성은 주제 전환을 부드럽게 할 수 있습니다.

2.3 JavaScript Logic

JavaScript는 주제 토글 버튼의 ​​클릭 이벤트를 듣고

요소의 클래스를 수정해야합니다.

 document.addeventListener ( 'domContentLoaded', () => {
    const themetogglebutton = document.getElementById ( 'Theme-Toggle-Btn');
    const body = document.body;

    // LocalStorage에서 사용자가 선택한 주제를로드하려고 노력하십시오 Const SavedTheme = localStorage.getItem ( 'WebsiteTheme');
    if (savedtheme) {
        body.classlist.add (savedtheme);
    } 또 다른 {
        // 테마가 저장되지 않은 경우 기본적으로 라이트 테마를 사용하십시오 (또는 원하는 테마)
        body.classlist.add ( 'light-theme'); // 기본 테마를 명시 적으로 설정}

    if (themetogglebutton) {
        ometogglebutton.addeventListener ( 'click', () => {
            if (body.classlist.contains ( 'dark-tem')) {
                body.classlist.remove ( 'Dark-Theme');
                body.classlist.add ( 'light-theme');
                localStorage.setItem ( 'websiteTheme', 'light-theme');
            } 또 다른 {
                body.classlist.remove ( 'light-theme'); // 이전 테마 클래스를 제거합니다 .ClassList.add ( 'Dark-Theme');
                localStorage.setItem ( 'websiteTheme', 'Dark-The-Theme');
            }
        });
    }
});

• 스크립트는 페이지가 지난번에 선택한 주제를 기억하기 위해 페이지가로드 될 때 LocalStorage를 확인합니다.
• LocalStorage.setitem ()은 현재 주제 선택을 저장하는 데 사용됩니다.
• 버튼을 클릭하면 본문 요소의 테마 클래스가 클래스리스트를 통해 전환됩니다. remove () 및 classlist.add ()

3. CSS 배경 색상을 설정하는 문제를 해결하십시오

배경색을 설정할 때 사용자는 문제가 발생할 수 있으며 CSS가 설정 되더라도 배경색이 적용되지 않을 수 있습니다. 이것은 일반적으로 몇 가지 일반적인 원인으로 인해 발생합니다.

3.1 일반적인 원인 및 문제 해결 방법

1. CSS 선택기 우선 순위 :

   • 질문 : 보다 구체적인 CSS 선택기는 비특이적 선택기를 무시합니다. 예를 들어, 인라인 스타일 (
   • 솔루션 : CSS 파일이 올바르게 참조되도록 파일 경로를 수정하십시오.

2. 요소는 다른 요소 또는 크기 문제로 다루어집니다 .

   • 문제 : 배경색을 자식 요소로 설정하고 부모 요소에 명시 적 높이 또는 너비가 없으면 자식 요소가 부모 요소를 퍼뜨리지 않아 부모 요소의 배경색이 표시되지 않을 수 있습니다. 또는 전체 화면으로 덮인 다른 요소에 의해 하나의 요소가 가려질 수 있습니다.
   • 문제 해결 : 개발자 도구의 요소의 상자 모델을 확인하여 폭과 높이가 기대치를 충족하는지 확인하십시오. Min-Height : 100VH; 또는 높이 : 100%; 부모 요소의 경우.
   • 솔루션 : 대상 요소가 배경을 표시하기에 충분한 크기가 있고 다른 요소에 의해 완전히 가려지지 않도록하십시오.

3. 철자 오류 또는 문법 오류 :

   • 질문 : 배경색은 철자가 백그라운드 콜러 또는 세미콜론, 괄호 등이 없습니다.
   • 문제 해결 : CSS 코드를주의 깊게 확인하여 속성 이름과 값이 올바르게 철자를 맞추고 구문이 올바른지 확인하십시오. 개발자 도구는 일반적으로 구문 오류를 강조합니다.
   • 해결책 : 철자 및 문법 오류를 수정하십시오.

4. 브라우저 캐시 :

   • 문제 : 브라우저에 기존 CSS 파일이 캐시 될 수 있으며 코드를 수정하더라도 페이지는 여전히 이전 스타일을 표시합니다.
   • 문제 해결 : 페이지 (Ctrl F5 또는 CMD Shift R)를 하이리 치거나 브라우저 캐시를 지우십시오. 개발자 도구의 "네트워크"패널에서 "캐시 비활성화"옵션을 확인하십시오.
   • 솔루션 : 캐시를 지우거나 디버깅을 위해 캐시를 비활성화하십시오.

3.2 디버깅 제안

• 브라우저 개발자 도구 (F12) 사용 : 이것은 가장 강력한 디버깅 도구입니다.
  • 요소 패널 : 스타일 또는 컴퓨팅 스타일 패널에서 적용된 모든 CSS 규칙을 볼 수있는 대상 요소를 선택하고 어떤 규칙을 덮어 써야하는지.
  • 네트워크 패널 : CSS 파일이 성공적으로로드되었는지 확인하십시오.
  • 콘솔 패널 : 스타일에 영향을 미치는 JavaScript 오류가 있는지 확인하십시오.
• 단계별로 코드를 단순화하십시오 . 문제가 복잡한 경우 CSS의 일부를 댓글을 달거나 문제 요소 만 포함 된 최소 HTML 파일을 작성하고 문제를 점차 문제로 해결할 수 있습니다.

요약

이 튜토리얼을 통해 HTML을 사용하여 의미 구조, CSS를 구축하여 아름다운 스타일 및 JavaScript를 구축하여 동적 상호 작용을 구현하는 방법을 배웠습니다. 우리는 이미지 설명의 전환 및 웹 사이트 테마의 동적 스위칭을 다루며, 이는 사용자 경험을 향상시키기 위해 현대적인 웹 디자인에서 일반적으로 사용됩니다. 동시에, 우리는 또한 CSS 배경색이 효과적이고 효과적인 디버깅 방법을 사용하지 않는 일반적인 이유에 대해 논의했습니다. 이러한 기술을 마스터하면 더 매력적이고 대화식이며 웹 사이트를 쉽게 유지할 수 있습니다.

위 내용은 동적 웹 사이트 구축 : 이미지 설명 스위칭 및 테마 스위칭 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!