본문 바로가기
✨ Front-end/자바스크립트(JS)

[JavaScript] if문으로 HTML 배경 Dark, White모드 만들기

by 환풍 2023. 2. 19.
728x90
반응형

이번에는 자바스크립트를 이용해서 모드 변경을 해보았다.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
  <script src="result.js"> </script>
  
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
  <div class="bgDark">
    <span class="badge">페이지 색 변환 기능 [눌러보셈]🔄</span>
  </div> 
 
  <hr>
  <div class="background"></div>
 
  <script>
    var count =0;
 
    $('.badge').on('click', function(){
      count +=1
      if(count %2 == 1)
      {
        $('.badge').html('Light🔄')
        $('body').css('background-color','white');
        $('.badge').css({'background-color':'black', color:'white'})
        
      }
      else{
        $('.badge').html('dark🔄')
        $('body').css('background-color','black');
        $('.badge').css('background-color','white').css('color','black')
      }
      
    })
    
    </script>
    
</body>
</html>
 
 
cs

 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
  background-color: pink; 
}
.bgDark{
  
  height: 30px;
  text-align: center;
}
.badge{
 font-style: italic;
 font-size: large;
 font-weight: bold;
 border-radius: 10px;
 
}
cs

 

<script> 태그 안에 자바스크립트 언어를 사용하였다.

count 변수를 하나 생성해준 후,

jQuery를 이용하여 if문을 사용했다.

 

if문 첫 줄에는 단순히 badge클래스 속에 있는 html을 Light🔄 로 변경하는 간단한 문법이다.

if문 두번째 줄에는 단순히 css를 변경하는 것이고,

 

if문 세번째 줄이 여러개를 변경하는 것이다. if 문과 else문을 사용했던 방식에도 차이가 난다.

if문은 { }을 사용해 여러개를 변경했고, else문은 css를 추가한 뒤 새로운 css를 또 추가하였다.

 

See the Pen Untitled by park (@johong) on CodePen.

728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글

[JavaScript] 상품 리스트 만들어보기  (0) 2023.02.20
[JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀)  (0) 2023.02.19
[JavaScript] 타이머 예제 setInterval, clearInterval, timeOut  (1) 2023.02.19
[JavaScript] classList와 jQuery 사용 방법  (0) 2023.02.19
[JavaScript] getElementById와 addEventListener(이벤트리스너)  (0) 2023.02.12

관련글

댓글

티스토리툴바