็ก์
Functions์ filter์์ฑ๊ณผ ํจ์ ๋ณธ๋ฌธ
๐ข 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>
'<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 |