โจ์ฌ์ง์ ๋ค์ํ ํํฐ ์ ์ฉํ๊ธฐโจ
์๋ ํ์ธ์. ์ค๋์ vscode๋ก html/css ๋ง์ ์ด์ฉํด์ ์ฌ์ง์ ํํฐ๋ฅผ ์ ์ฉํ๋ ๋ฒ์ ๋ฐฐ์๋ด์. ๋๊ฐ์ , ํ๋ฆผ, ํ์์กฐ, ์ธํผ์ ๋ค ๊ฐ์ง๋ก ์ฐ์ถํด๋ณด๋ ๋ค์ํ ์ฌ์ง ๊พธ๋ฏธ๊ธฐ!! ์ง๊ธ๋ถํฐ ์์ํด ๋ณผ๊น์
๐ 1. ๋๊ฐ์ ์ ํ์ฉํ ๋น๊ธ๋ฌด๋ฌ ํํฐ
์ฌ์ง์ ๋๊ฐ์ ํํฐ๋ฅผ ์ ์ฉํด์ฃผ๋ฉด, ์๋ ๋ก๊ทธ ๋๋์ ์ฐ์ถ ํ ์ ์์ต๋๋ค. ๋ ์นดํผ๋ผ์ดํ ํ ๋ ๋ฌธ๊ตฌ๋ฅผ ๋ฐฐ์นํ๊ธฐ ์ํ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉํ๊ธฐ๋ ์ข์์. ๊ฐ์์์์ธ ::before๋ก ๋๊ฐ์ ์ ๋ง๋ค๊ณ , ์ฌ์ง ์์ ํฌ๊ฐ ๋์์ธ์ ๋๋ค.
โ๏ธ HTML ์ฝ๋
<div class="pic">
<img src="Images/pic03.png" alt="">
</div>โ๏ธ CSS ์ฝ๋
<style>
.pic {
position: absolute;
}
.pic img {
display: block; /* ์ด๋ฏธ์ง์ ์๋ ๋ถํ์ํ ์ฌ๋ฐฑ ์ฒ๋ฆฌ */
}
.pic::before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
-45deg, /* ์ 45๋ ํ์ */
rgba(130, 51, 27, 0.6) 0px, rgba(201 72 31 / .6) 1px, /* ๋ฐํฌ๋ช
์ ์์ฑ*/
rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50% /* ์ ์ฌ์ด์ ํฌ๋ช
ํ ์ฌ๋ฐฑ ๋ถ๋ถ ์ค์ */
);
background-size: 7px 7px;
}
</style>
๐ 2. ๋ํธ ํํฐ
์ ๋ฌด๋ฌ ํํฐ๋ก ํ์ง์ด ๋ฎ์ ์ฌ์ง์๋ ์ฌ๋ฏธ์๋ ํจ๊ณผ๋ฅผ ์ค ์ ์์ด์.
โ๏ธ HTML ์ฝ๋
<div class="pic">
<img src="Images/pic13-3.jpg" alt="">
</div>โ๏ธ CSS ์ฝ๋
<style>
.pic {
position: absolute;
}
.pic img {
display: block;
}
.pic::before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image:
radial-gradient(rgba(197, 137, 119, 0.6) 30%, rgba(209, 168, 168, 0) 31%);
background-size: 4px 6px;
background-position: 0px 0px 3px 3px;
}
</style>
๐ 3. ํ๋ฐฑ์ฌ์ง ๋ง๋ค๊ธฐ(grayscale)
grayscale ํ๋กํผํฐ๋ก ์ฌ์ง์ ํ์์กฐ๋ก ๋ง๋ค์ด ๋ถ์๊ธฐ ์๊ฒ ์ฐ์ถํด์ค ์ ์์ด์.
โ๏ธ HTML ์ฝ๋
<body>
<img src="Images/pic11.png" alt="">
</body>โ๏ธ CSS ์ฝ๋
<style>
img {
filter: grayscale(100%);
}
</style>
๐ 4. ์ฌ์ง์ ๊ฐ์์กฐ๋ก ๋ง๋ค๊ธฐ(sepia)
sepia ํํฐ๋ฅผ ์ฐ๋ฉด ์ฌ์ง์ ๊ฐ์์กฐ๋ก ๋ง๋ค ์ ์์ด์. ๋น ๋ฐ๋ ์ฌ์ง์ฒ๋ผ ๋ฌด๋์๋ ์ฐ์ถ์ด ๊ฐ๋ฅํฉ๋๋ค. () ์๊ดํธ ์์ ๊ฐ์ ๋ณ๊ฒฝํ๋ฉด ๊ฐ์์กฐ์ ์ ๋๋ฅผ ๋ณ๊ฒฝ ํ ์๋ ์์ด์.
โ๏ธ HTML ์ฝ๋
<body>
<img src="Images/pic11.png" alt="">
</body>โ๏ธ CSS ์ฝ๋
<style>
img {
filter: sepia(70%);
}
</style>
๐ 5. ์ฌ์ง์ ๋ธ๋ฌ ์ฒ๋ฆฌํ๊ธฐ(blur)
์ฌ์ง์ ํ๋ฆฟํ๊ฒ ๋ง๋๋ ์ฝ๋์ ๋๋ค. blur()์ ์๊ดํธ ์์ ๊ฐ์ ๋์ฌ์ฃผ๋ฉด ์ฌ์ง์ด ๋ ํ๋ฆฟํ๊ฒ ๋ณํด์.
โ๏ธ HTML ์ฝ๋
<body>
<img src="Images/pic11.png" alt="">
</body>โ๏ธ CSS ์ฝ๋
<style>
img {
filter: blur(1px);
}
</style>
์ด๋ ์ จ๋์? ๋ง์ ๋์์ด ๋์ จ๋์? ๊ถ๊ธํ์ ์ ์ ๋๊ธ์ ๋จ๊ฒจ์ฃผ์๊ณ ์ข์์ ๋๋ฌ์ฃผ์ธ์.
