개발나라 스용공주

[실습] 웹페이지 - 다크모드 전환 기능 웹페이지 만들기 (실습과정 상세 소개) 본문

WEB/포트폴리오

[실습] 웹페이지 - 다크모드 전환 기능 웹페이지 만들기 (실습과정 상세 소개)

스용공주 2024. 10. 2. 17:37
728x90
728x90

[ 최종 완성 - 실행 영상 ]

 

 

 

[ 1차 개발 - 기능 구현 ]

버튼 생성 ⇨ 버튼 한개에 light모드와 dark모드가 모두 가능하도록 만듬 (id값을 부여해 해당 value를 찾고 value의 값에 따라 현재 실행된 모드가 light인지 dark인지 판별 후 해당 모드에 맞는 코드 실행) ⇨ 코드 맨 뒤에 value를 변경해주는 코드를 통해 light모드와 dark모드가 반복하여 실행되도록 만듬

* 다크모드 (Dark Mode) : 배경색 검정색 / 본문 글자색 흰색 / 링크 연보라색

* 라이트모드 (Light Mode) : 배경색 흰색 / 본문 글자색 검정색 / 링크 보라색

* 다크모드와 라이트모드의 기능은 함수화하여 만들어짐.

 

[ 메인 1 ]

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script>
        function darkButton(self) {
        var list = document.querySelectorAll('a');
        var i = 0;
        if(document.querySelector('#light_dark').value === 'dark') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
            while(i < list.length) {
                list[i].style.color = '#8470FF';
                i += 1;
            }
        document.querySelector('#light_dark').value = 'light';
        }
        else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
            while(i < list.length) {
                list[i].style.color = '#663399';
                i += 1;
            }
        document.querySelector('#light_dark').value = 'dark';
        } 
        };
    </script>
</head>
<body>
    <input id = "light_dark" type = "button" value = "dark" onclick="
    darkButton(this); ">
    <h1>Youtuber</h1>
    <div id = "div">
        <ol>
            <li><a href="index.html">Youtube</a></li>
            <li><a href="2.html">Contents</a></li>
        </ol>
    <div id = "con">
        <h2>Introducing My Youtube</h2>
        <img src="image_01.jpg" width="50%">
        <p>This is <b>my YOUTUBE CHANNEL <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" target="_blank" title="Thapha Youtube link"><u>'THAPHA'</u></a></b>!<br>
        Your subscription will give me some energy!</p>
    </div>
    </div>
</body>
</html>

 

[ 메인 2 ]

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script>
        function darkButton(self) {
        var list = document.querySelectorAll('a');
        var i = 0;
        if(document.querySelector('#light_dark').value === 'Dark') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
            while(i < list.length) {
                list[i].style.color = '#8470FF';
                i += 1;
            }
        document.querySelector('#light_dark').value = 'Light';
        }
        else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
            while(i < list.length) {
                list[i].style.color = '#663399';
                i += 1;
            }
        document.querySelector('#light_dark').value = 'Dark';
        } 
        };
    </script>
</head>
<body>
    <input id = "light_dark" type = "button" value = "Dark" onClick = "
    darkButton(this);">
    <h1>Youtuber</h1>
    <div id = "div">
    <ol>
        <li><a href="index.html" class="green">Youtube</a></li>
        <li><a href="2.html" class="green" id="red">Contents</a></li>
    </ol>
    <div id = "con">
    <h2>Introducing My Youtube Contents</h2>
    <P>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/1pBoUsMzqZE?si=Loif9sowegTarQ6S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </P>
    <p>Vietnam Danang Vlog -> <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" title="Danang Vlog">Link</a></p>
</div>
</div>
</body>
</html>

 

 

[ 2차 구현 - 코드 정리 ]

중복되는 코드는 하나의 변수에 묶어줌 ⇨ 자기 자신을 지칭하는 코드의 부분은 this를 통해 현재 코드의 위치를 지칭하는 것으로 간략하게 코드를 정리함

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script>
        function darkButton(self) {
        var target = document.querySelector('body');
        var list = document.querySelectorAll('a');
        var i = 0;
        if(this.value === 'Dark') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
            while(i < list.length) {
                list[i].style.color = '#8470FF';
                i += 1;
            }
        document.this.value = 'Light';
        }
        else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
            while(i < list.length) {
                list[i].style.color = '#663399';
                i += 1;
            }
        document.this.value = 'Dark';
        } 
        };
    </script>
</head>
<body>
    <input id = "light_dark" type = "button" value = "Dark" onclick="
    darkButton(this); ">
    <h1>Youtuber</h1>
    <div id = "div">
        <ol>
            <li><a href="index.html">Youtube</a></li>
            <li><a href="2.html">Contents</a></li>
        </ol>
    <div id = "con">
        <h2>Introducing My Youtube</h2>
        <img src="image_01.jpg" width="50%">
        <p>This is <b>my YOUTUBE CHANNEL <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" target="_blank" title="Thapha Youtube link"><u>'THAPHA'</u></a></b>!<br>
        Your subscription will give me some energy!</p>
    </div>
    </div>
</body>
</html>
<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script>
        function darkButton(self) {
        var target = document.querySelector('body');
        var list = document.querySelectorAll('a');
        var i = 0;
        if(this.value === 'Dark') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
            while(i < list.length) {
                list[i].style.color = '#8470FF';
                i += 1;
            }
        document.this.value = 'Light';
        }
        else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
            while(i < list.length) {
                list[i].style.color = '#663399';
                i += 1;
            }
        document.this.value = 'Dark';
        } 
        };
    </script>
</head>
<body>
    <input id = "light_dark" type = "button" value = "Dark" onClick = "
    darkButton(this);">
    <h1>Youtuber</h1>
    <div id = "div">
    <ol>
        <li><a href="index.html" class="green">Youtube</a></li>
        <li><a href="2.html" class="green" id="red">Contents</a></li>
    </ol>
    <div id = "con">
    <h2>Introducing My Youtube Contents</h2>
    <P>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/1pBoUsMzqZE?si=Loif9sowegTarQ6S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </P>
    <p>Vietnam Danang Vlog -> <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" title="Danang Vlog">Link</a></p>
</div>
</div>
</body>
</html>

 

 

728x90
728x90

'WEB > 포트폴리오' 카테고리의 다른 글

[실습] hover시 상품 상세 설명  (1) 2024.11.16
[실습] 슬라이드 애니메이션이 적용된 탭메뉴 만들기  (0) 2024.11.08
[실습] 웹페이지 탭메뉴 콘텐츠 만들기  (6) 2024.11.08
[실습] 웹페이지 - To Do list 어플리케이션 (실습과정 상세 소개)  (6) 2024.10.09
'WEB/포트폴리오' Related Articles more
Comments