Functions의 filter속성과 함수

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

無제

Functions의 filter속성과 함수 본문

<style>

Functions의 filter속성과 함수

yo-u-loo 2026. 3. 27. 09:55

🟢 filter 속성

요소에 그래픽 효과(시각적 효과)를 적용하는 함수.

◼ 문법

.functions {
  filter: blur(5px);
}

filter: function(value);

◼ 함수 종류

🔹 blur(): 흐림 정도.

🔹 brightness(): 밝기 정도. (0%, 0: 검은색 / 100%, 1: 변화없음 / 200%, 2: 밝기 2배 증가)

🔹 contrast(): 대비 정도. (0%: 회색 / 100%: 변화없음 / 200%: 대비 2배 증가)

🔹 drop-shadow(): 그림자 정도. (가로 오프셋, 세로 오프셋, 흐림 정도, 번짐 정도, 그림자 색)

🔹 grayscale(): 회색조 강도. (0%: 컬러 / 100%: 흑백)

🔹 invert(): 반전 정도.

🔹 sepia(): 세피아 강도. (갈색톤의 빈티지, 고풍스러운 효과)

🔹 opacity(): 불투명도.

🔹 hue-rotate(): 각도. (deg)

🔹 saturate(): 채도.

❔ box-shadow vs drop-shadow 차이 ❔

구분	특징
box-shadow	박스 기준
drop-shadow	이미지 모양 기준

🔨 축약형 속성 (Shorthand)

필터 함수를 한 줄로 정의하는 속성.

.functions {
  filter: blur(5px) brightness(120%) contrast(110%);
}

특징: 실제 이미지를 수정하지 않고 렌더링 결과만 변경한다.
순서 중요: 왼쪽에서 오른쪽 순서로 적용됨.

⚙️ 실전 예제 코드 ⚙️

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다양한 filter 함수</title>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }
  .gallery img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
  .title {
    text-align: center;
    font-weight: bold;
    margin-bottom:20px;
  }
  .image-container {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    background: #f9f9f9;
  }

  /* Do it! filter 함수 사용해서 스타일 지정하기 */
  .blur { filter: blur(5px); }             /* 흐리게  */
  .brightness { filter: brightness(2); }   /* 밝기 2배로 */
  .contrast { filter: contrast(200%); }    /* 대비 2배로 */
  .drop-shadow { filter: drop-shadow(16px 16px 10px black); }  /* 그림자 추가 */
  .grayscale { filter: grayscale(100%); }  /* 회색조 */
  .invert { filter: invert(100%); }        /* 전체 색상 반전 */
  .sepia { filter: sepia(100%) }           /* 세피아 톤으로 변경 */
  .opacity { filter: opacity(50%); }       /* 반투명하게 */  
  .hue-rotate { filter: hue-rotate(90deg); }   /* 모든 hue 값을 90도 이동 */
  .saturate { filter: saturate(200%); }    /* 채도 2배로 */
</style>
</head>
<body>

<div class="origin">
  <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" style="border-radius: 50%;">
</div>
<div class="gallery">
  <div class="image-container">
    <div class="title">filter:blur(5px)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="blur">
  </div>
  <div class="image-container">
    <div class="title">filter:brightness(2)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="brightness">
  </div>
  <div class="image-container">
    <div class="title">filter:contrast(200%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="contrast">
  </div>
  <div class="image-container">
    <div class="title">filter:drop-shadow(16px 16px 10px black)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="drop-shadow">
  </div>
  <div class="image-container">
    <div class="title">filter:grayscale(100%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="grayscale">
  </div>
  <div class="image-container">
    <div class="title">filter:invert(100%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="invert">
  </div>
  <div class="image-container">
    <div class="title">filter:sepia(100%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="sepia">
  </div>
  <div class="image-container">
    <div class="title">filter:opacity(50%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="opacity">
  </div>
  <div class="image-container">
    <div class="title">filter:hue-rotate(90deg)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="hue-rotate">
  </div>
  <div class="image-container">
    <div class="title">filter:saturate(200%)</div>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D" class="saturate">
  </div>

  
</div>

</body>
</html>

filter:blur(5px)

filter:brightness(2)

filter:contrast(200%)

filter:drop-shadow(16px 16px 10px black)

filter:grayscale(100%)

filter:invert(100%)

filter:sepia(100%)

filter:opacity(50%)

filter:hue-rotate(90deg)

filter:saturate(200%)

'<style>' 카테고리의 다른 글

CSS의 Animation과 @keyframes (0)	2026.03.27
transition 속성 (1)	2026.03.27
transform 속성과 functions (함수) (0)	2026.03.26
Pseudo-elements (의사 요소) (0)	2026.03.26
Pseudo-class (의사 클래스) (0)	2026.03.26

'<style>' Related Articles

無제

Functions의 filter속성과 함수 본문

Functions의 filter속성과 함수

🟢 filter 속성

'<style>' 카테고리의 다른 글

티스토리툴바