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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
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>
|
