โจํผ์ฌ์ฒด์ ๊ทธ๋ฆผ์ ์ถ๊ฐํ๊ธฐโจ
์๋ ํ์ธ์. ์ค๋์ ํผ์ฌ์ฒด์ ๊ทธ๋ฆผ์๋ฅผ ์ถ๊ฐํด์ ์ญ๋์ ์ธ ์ด๋ฏธ์ง๋ฅผ ๋ง๋๋ ๋ฒ์ ์๋ ค๋๋ฆด๊ฒ์. ํฌํ ์ต์ด๋ ์ผ๋ฌ์คํธ๋ฅผ ์ฌ์ฉํ์ง ์์๋ HTML๊ณผ CSS๋ง์ผ๋ก ์์ ํ ๊ฑฐ๋๊น Vscode์์ ๋ฐ๋ผํด์ฃผ์ธ์.
๐ STEP 1. ํฌ๋ช
ํ ๋ฐํ์ ์ด๋ฏธ์ง๋ฅผ ์ค๋นํด์ฃผ์ธ์.
ํฌ๋ช ํ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ฐพ๋ ๋ฒ ์๋ ค๋๋ฆด๊ฒ์. ํฌํ ์ต์ผ๋ก ์ง์ ๋ฐฐ๊ฒฝ์ ์ ๊ฑฐํ๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง ์ฐ๋ฆฌ๋ ์ฐ์ต๋ง ํ ๊บผ๋๊น ๊ตฌ๊ธ์์ ๋ฐฐ๊ฒฝ ์๋ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์๋ด ์๋ค. ๊ทธ๋ฅ ๊ฒ์ํ๋ฉด ์ค์ ๋ก๋ ๋ฐฐ๊ฒฝ์ด ํฌ๋ช ํ์ง ์์ ๊ฒฝ์ฐ๊ฐ ๋ง์์.
๊ตฌ๊ธ์์ ํฌ๋ช ํ ์ด๋ฏธ์ง ๊ฒ์ํ๋ ๋ฒ
๊ตฌ๊ธ ์ด๋ฏธ์ง๊ฒ์ > ๊ฒ์์ฐฝ ์๋ [๋๊ตฌ] ํด๋ฆญ > [์์]์์ ํฌ๋ช ํด๋ฆญ
์ค์ ๋ก ๋ฐฐ๊ฒฝ์ด ํฌ๋ช ํ์ง ํ์ธํ๊ธฐ ์ํด์๋ ์ง์ ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํด๋ณด์ธ์.
์๋์ฒ๋ผ ๋ฐฐ๊ฒฝ์ ํ์ ์ค์ผ์ผ์ ๋ฐ๋ํ ๋ฌด๋ฌ๊ฐ ์๊ธฐ๋ฉด ๋ฐฐ๊ฒฝ์ด ํฌ๋ช ํ ์ด๋ฏธ์ง๋๋๋ค.
ํ์ฌ ์์ ํ๋ ํด๋ ์์ Images ํด๋๋ฅผ ์์ฑํด ์ฃผ์๊ณ , ์ํ๋ ์ ๋ชฉ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํด์ฃผ์ธ์.
๐ STEP 2. ์ฝ๋ ์์ฑ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
filter: drop-shadow(20px 20px 0 #ea987e); // ๊ทธ๋ฆผ์ ํจ๊ณผ ์ง์ ํ๋ css
}
</style>
</head>
<body>
<img src="Images/pic04.png" alt=""> // ์ด๋ฏธ์ง ๋ถ๋ฌ์ค๊ธฐ
</body>
</html>
โ๏ธ HTML
<img src="์ด๋ฏธ์ง ๊ฒฝ๋ก"><img src="Images/pic04.png">ํ๊ทธ์
src์์ฑ์ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ ๋ช ์ํด ์ค๋๋ค.
์ ๋ ์ด๋ฏธ์ง๋ฅผ ํด๋์ ์ ์ฅํด์ ๊ฐ์ ธ์ฌ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์๋๊ฒฝ๋ก๋ก ์ ์ด์ฃผ์์ต๋๋ค. ์ ๊ฐ ์์ฑํ src ๊ฒฝ๋ก๋ ํ์ฌ ์์ ๊ฒฝ๋ก ํด๋ ์์ ์๋
Imagesํด๋ ์์
pic04.pngํ์ผ์ ๊ฐ๋ฆฌํต๋๋ค. ์ฌ๊ธฐ์ /(์ฌ๋์)๋ ํด๋์ ํ ๋ฒ ๋ค์ด๊ฐ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
โ๏ธ CSS
img {
filter: drop-shadow(offset-x offset-y blur-radius color);
} img {
filter: drop-shadow(20px 20px 0 #ea987e);
}
๋ฐ๋ก css ํ์ผ์ ๋ง๋ค์ด์ค์ ๋งํฌ๋ก ์ฐ๊ฒฐํด์ค๋ ๋์ง๋ง, ์ฝ๋๊ฐ ํ ์ค๋ก ๊ฐ๋จํ๋๊น ๊ทธ๋ฅ ๋ฐ๋ก <head>์์ <style>ํ๊ทธ ์ด๊ณ ์์ ํด ์ฃผ์ธ์. drop-shadow ํจ์๋ ์น ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ์ถ๊ฐํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋งค๊ฐ๋ณ์๋ก ๊ทธ๋ฆผ์์ ์์น, ํ๋ฆผ ์ ๋, ์์ ๋ฑ์ ์ค์ ํฉ๋๋ค.
์ ๊ฐ ์์ฑํ ์ฝ๋๋ img ์์์ 20px ์ค๋ฅธ์ชฝ์ผ๋ก, 20px ์๋์ชฝ์ผ๋ก ์ฃผํฉ์์ ๊ทธ๋ฆผ์๋ฅผ ๋ง๋๋ ์ฝ๋์ ๋๋ค.
- 20px: ๊ทธ๋ฆผ์์ ์ํ ์์น => ์ฌ์ง์ ์ค๋ฅธ์ชฝ์ผ๋ก 20px ์ด๋
- 20px: ๊ทธ๋ฆผ์์ ์์ง ์์น => ์ฌ์ง์ ์๋์ชฝ์ผ๋ก 20px ์ด๋
- 0: ๊ทธ๋ฆผ์์ ํ๋ฆผ ์ ๋ => ์ฌ๊ธฐ์๋ ํ๋ฆผ ์ ๋๊ฐ ์์.
- #ea987e: ๊ทธ๋ฆผ์์ ์์(์ฌ๊ธฐ์ ์ ๋ ์กฐ๊ธ ์ฌ๋ฏธ์๊ฒ ํํํ๋ ค๊ตฌ ์ฐ์ด์์ผ๋ก ์ค์ ํด์คฌ๋๋ฐ ์ฌ๋ฌ๋ถ์ ์ํ์๋ ์์์ผ๋ก ์ง์ ํด์ฃผ์ธ์.)
์์ฉํด์ ๋ฐฐ๊ฒฝ ์์์ ๋ฏผํธ์(#a1eae5)๋ก ์์ ํด์ฃผ๊ณ , ๊ทธ๋ฆผ์๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก 500px๋งํผ ์ด๋ํด์ฃผ์์ต๋๋ค.
๊ทธ๋ฆผ์๋ ํผ์ฌ์ฒด ๋ชจ์ ๊ทธ๋๋ก ๋ง๋ค์ด์ง๊ธฐ ๋๋ฌธ์ ๋๋ฌด ๋ฉ๋ฆฌ ๋จ์ด๋จ๋ฆฌ๋ฉด ์ด์ํด๋ณด์ผ ์ ์์ด์.
๋ฌธ์์ฌํญ์ด๋ ๊ถ๊ธํ ์ ์ ๋๊ธ๋ก ๋จ๊ฒจ ์ฃผ์ธ์!
