--- title: <filter-function> slug: Web/CSS/filter-function tags: - CSS - CSS Data Type - Filter Effects - Reference translation_of: Web/CSS/filter-function --- <div>{{cssref}}</div> <p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong><filter-function></strong></code> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다.</span> {{cssxref("filter")}}와 {{cssxref("backdrop-filter")}} 속성에서 사용합니다.</p> <h2 id="구문">구문</h2> <p><code><filter-function></code> 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.</p> <dl> <dt>{{cssxref("filter-function/blur", "blur()")}}</dt> <dd>이미지를 흐리게 만듭니다.</dd> <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt> <dd>이미지의 밝기를 조절합니다.</dd> <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt> <dd>이미지의 대비를 조절합니다.</dd> <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt> <dd>이미지의 뒤에 그림자를 적용합니다.</dd> <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt> <dd>이미지를 흑백으로 변환합니다.</dd> <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt> <dd>이미지의 전체 색조를 조절합니다.</dd> <dt>{{cssxref("filter-function/invert", "invert()")}}</dt> <dd>이미지의 색을 반전합니다.</dd> <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt> <dd>이미지의 투명도를 조절합니다.</dd> <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt> <dd>이미지의 채도를 조절합니다.</dd> <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt> <dd>이미지에 세피아 톤을 적용합니다.</dd> </dl> <h2 id="예제">예제</h2> <h3 id="필터_함수_비교">필터 함수 비교</h3> <p>이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.</p> <h4 id="HTML">HTML</h4> <pre class="brush: html notranslate"><div></div> <ul> <li> <label for="filter-select">필터 함수 선택:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>Current value: <code></code></p> </li> </ul></pre> <h4 id="CSS">CSS</h4> <pre class="brush: css notranslate">div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; }</pre> <h4 id="JavaScript">JavaScript</h4> <pre class="brush: js notranslate">const selectElem = document.querySelector('select'); const divElem = document.querySelector('div'); const slider = document.querySelector('input'); const output = document.querySelector('output'); const curValue = document.querySelector('p code'); selectElem.addEventListener('change', () => { setSlider(selectElem.value); setDiv(selectElem.value); }); slider.addEventListener('input', () => { setDiv(selectElem.value); }); function setSlider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setAttribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; slider.setAttribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setAttribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setAttribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setAttribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setAttribute('data-unit', 'deg'); } } function setDiv(filter) { if(filter === 'drop-shadow') { divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; } else { divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; } updateOutput(); updateCurValue(); } function updateOutput() { output.textContent = slider.value; } function updateCurValue() { curValue.textContent = `필터: ${divElem.style.filter}`; } setSlider(selectElem.value); setDiv(selectElem.value);</pre> <h4 id="결과">결과</h4> <p>{{EmbedLiveSample('필터_함수_비교', '100%', 500)}}</p> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comments</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}</td> <td>{{ Spec2('Filters 1.0') }}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="같이_보기">같이 보기</h2> <ul> <li>자료형을 사용하는 속성: {{cssxref("filter")}}, {{cssxref("backdrop-filter")}}</li> </ul>