그럼에도 불구하고

👨‍💻

[Visual Studio Code] 요소 밝기 및 채도 조절하기 본문

HTML, CSS/Function implementation

[Visual Studio Code] 요소 밝기 및 채도 조절하기

zenghyun 2023. 2. 14. 21:11

요소의 밝기와 채도를 조절해 보자

 

 

[ 요소 밝기 조절하기 ]

 

● 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때

● 포커스 상태 효과를 주고 싶을 때

 

밝기 조절은 CSS의 filter 속성에 brightness() 메서드를 사용하여, brightness(100%)가 기본 상태다. 인수가 100% 보다 크면 밝아지고 작으면 어두워진다 CSS Transitions와 Web Animations API의 샘플을 확인해 보자

 

※ CSS Transitions를 사용한 샘플

 

HTML

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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="./style.css">
</head>
<body>
    <div class="container">
        <img src="/coding/practice/do_It/03/images/activity.jpg" alt="">
        <label for="check">click
        <input type="checkbox" name="check">
    </label>
    </div>
    <script src="./app.js"></script>
</body>
</html>
cs

 

CSS

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    width: 100%;
    height: 100%;
}
.container {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
    filter: brightness(100%);
    transition: all 0.5s;
}
.show {
    filter: brightness(300%);
}
cs

 

JavaScript

 

1
2
3
4
5
6
7
8
9
10
11
12
13
const element = document.querySelector('img');
const checkbox = document.querySelector('input');
 
checkbox.addEventListener('change', () => {
    if(element.classList.contains('show') === true) {
        element.classList.remove('show');
    } else {
        element.classList.add('show');
    }
 
})
 
 
cs

 

클릭 전 

 

 

 

 

클릭 후

 

 

 

※ Web Animations API를 이용한 샘플 

 

참고 :) 

 

https://despiteallthat.tistory.com/157

 

[JavaScript] Web Animation API란?

Web Animation API에 대해 알아보자 HTML 삽입 미리보기할 수 없는 소스 [ Web Animation API ] Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같

despiteallthat.tistory.com

 

HTML

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <title>샘플</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" href="./style.css"/>
  <!-- Web Animations API 미지원 브라우저 대응 Polyfill -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js" defer></script>
  
</head>
<body>
 
  <div class="container">
    <img src="/coding/practice/do_It/03/images/activity.jpg" alt="" class="rect">
    <label for="check">click
    <input type="checkbox" name="check" id="checkbox">
</label>
</div>
<script src="./app.js"></script>
</body>
</html>
 
cs

 

 

CSS

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
  width: 100%;
  height: 100%;
}
.container {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img {
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
}
cs

 

 

JavaScript

 

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
document.querySelector('#checkbox').addEventListener('change', (event) => {
  const element = document.querySelector('.rect');
  if (event.target.checked === true) {
    element.animate(
      {
        filter: [
          'brightness(100%)', // 시작 값
          'brightness(300%)', // 종료 값
        ]
      },
      {
        duration: 500, // 밀리초 지정
        fill: 'forwards', // 종료 시 속성을 지님
        easing: 'ease' // 가속도 종류
      }
    );
  } else {
    element.animate(
      {
        filter: [
          'brightness(300%)', // 시작 값
          'brightness(100%)', // 종료 값
        ]
      },
      {
        duration: 500, // 밀리초 지정
        fill: 'forwards', // 종료 시 속성을 지님
        easing: 'ease' // 가속도 종류
      }
    );
  }
});
 
cs

 

CSS Transitions를 사용한 샘플과 결과는 같다. 

 

 

 

 

[ 요소 채도 조절하기 ]

 

● 요소에 모노크롬 효과를 주고 싶을 때

 

채도의 조절은 CSS의 filter 속성에 grayscale() 메서드를 사용한다. 기본 상태는 grayscale(0%)이며, 인수의 값이 100%이면 모노크롬 효과를 낸다. CSS Transitions와 Web Animations API 두 가지의 샘플을 확인해 보자. 

 

※ CSS Transitions를 사용한 샘플

요소 밝기 조절하기에서의 HTML, JavaScript과 동일해서 생략

 

CSS

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    width: 100%;
    height: 100%;
}
.container {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
    filter: grayscale(0%);
    transition: all 0.5s;
}
.show {
    filter: grayscale(100%);
}
cs

 

 

클릭 전 

 

 

 

클릭 후 

 

 

 

※ Web Animations API를 이용한 샘플 

 

요소 밝기 조절하기에서의 HTML, CSS과 동일해서 생략

 

JavaScript

 

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
document.querySelector('#checkbox').addEventListener('change', (event) => {
  const element = document.querySelector('.rect');
  if (event.target.checked === true) {
    element.animate(
      {
        filter: [
          'grayscale(0%)', // 시작 값
          'grayscale(100%)' // 종료 값
        ]
      },
      {
        duration: 500, // 밀리초 지정
        fill: 'forwards', // 종료 시 속성을 지님
        easing: 'ease' // 가속도 종류
      }
    );
  } else {
    element.animate(
      {
        filter: [
          'grayscale(100%)', // 시작 값
          'grayscale(0%)' // 종료 값
        ]
      },
      {
        duration: 500, // 밀리초 지정
        fill: 'forwards', // 종료 시 속성을 지님
        easing: 'ease' // 가속도 종류
      }
    );
  }
});
 
cs

 

CSS Transitions를 사용한 샘플과 결과는 같다. 

저작자표시 비영리

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] Accordion 만들기  (0) 2023.02.10
[Visual Studio Code] input type="file"  (0) 2023.01.05
[Visual Studio Code] table 만들기  (0) 2022.12.10
[Visual Studio Code] 여러가지 shadow 이용해보기  (0) 2022.11.13
[Visual Studio Code] 가로 / 세로 메뉴바 만들기  (1) 2022.11.13
'HTML, CSS/Function implementation' Related Articles more
Comments