โจ์ฌ์ง์ ์์ ์ถ๊ฐํ๊ธฐโจ
์๋ ํ์ธ์. ์ค๋์ ์ฌ์ง์ ์ธ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ง์ ๊พธ๋ฏธ๋ ๋ฒ์ ๋ฐฐ์๋ด ์๋ค. ๋จ์ ์์, ์ค๋ฌด๋ฌ ์์, ์ ๋ชจ์ ์์ ์ถ๊ฐํ๋ ๋ฒ ์๋ ค๋๋ฆด๊ฒ์. ํฌํ ์ต์ด๋ ์ผ๋ฌ์คํธ๋ฅผ ์ฌ์ฉํ์ง ์์๋ HTML๊ณผ CSS๋ง์ผ๋ก ์์ ํ ๊ฑฐ๋๊น Vscode์์ ๋ฐ๋ผํด์ฃผ์ธ์.
๐ STEP 1. ๋จ์ ์์ ์ถ๊ฐํ๊ธฐ
<!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 {
box-shadow: 20px 20px 0 #efcfd6;
}
</style>
</head>
<body>
<img src="./Images/pic01.png" alt="">
</body>
</html>
โ๏ธ HTML
<img src="์ด๋ฏธ์ง ๊ฒฝ๋ก"><img src="./Images/pic01.png" alt="">
โ๏ธ CSS
img {
box-shadow: offset-x offset-y blur-radius color;
}img {
box-shadow: 20px 20px 0 #efcfd6;
}
๐ STEP 2. ์ค๋ฌด๋ฌ ์์ ๋ฐฐ์นํ๊ธฐ
๊ฐ์์์ ์ ํ์ ::before์ ํ์ฉํ๋ฉด ์์ฐ์ค๋ฝ๊ณ ์ฌ๋ฏธ์๋ ๋๋์ ์ฃผ๋ ๋๊ฐ์ ์ค๋ฌด๋ฌ๋ฅผ ๋์์ธํ ์ ์์ด์.
<!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>
.pic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.pic img {
position: relative;
z-index: 2;
}
.pic::before {
content: '';
position: absolute;
bottom: -15px;
right: -15px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
-45deg,
#818181 0px, #5a5250 3px,
rgba(0 0 0 / 0) 0%, rgba(0 0 0 /0) 1%
);
z-index: 1;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic02.jpg" width="800" height="500">
</div>
</body>
</html>
โ๏ธ HTML
<div class="ํด๋์ค๋ช
">
<img src="์ด๋ฏธ์ง ๊ฒฝ๋ก" width="๊ฐ๋ก ๊ธธ์ด" height="์ธ๋ก ๋์ด">
</div><div class="pic">
<img src="Images/pic02.jpg" width="800" height="500">
</div>
โ๏ธ CSS
.pic {
position: absolute; /* ์์ฌ์์์ ๊ธฐ์ค์ ์ ๋๊ฐ(๊ณ ์ ๋ ๊ฐ)์ผ๋ก ์ค์ */
}
.pic img {
position: relative;
z-index: 2; /* ์ฌ์ง์ ์ค๋ฌด๋ฌ ์์ ์์ ๋์ค๊ฒ ๋ฐฐ์น */
}
.pic::before {
content: '';
position: absolute;
bottom: -15px; /* ์๋๋ก 15px ์ด๋ */
right: -15px; /* ์ค๋ฅธ์ชฝ์ผ๋ก 15px ์ด๋ */
width: 100%; /* ๋ถ๋ชจ์์์ ํญ 100% */
height: 100%; /* ๋ถ๋ชจ์์์ ๋์ด 100% */
background-image: repeating-linear-gradient(
-45deg, /* ์ ์ -45๋ ํ์ */
#818181 0px, #5a5250 3px, /* ์ ์ ์๊น */
rgba(0 0 0 / 0) 0%, rgba(0 0 0 /0) 1% /* ์ ์ฌ์ด์ ์๋ ํฌ๋ช
ํ ์ฌ๋ฐฑ ๋ถ๋ถ ์ค์ */
);
z-index: 1; /* ์ ์์์ ์ฌ์ง ๋ค์ชฝ์ ํ์ */
}
์์ฌ์์๋ฅผ ์ฌ์ฉํ ๋๋, ๋จผ์ ์์น ์ค์ ์ ํฉ๋๋ค. ๊ณ ์ ๋ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ๋ฐฐ์นํ๊ธฐ ์ํด ๋ถ๋ชจ์์์ธ pic์ position์ absolute๋ก ์ค์ ํด์ค๋๋ค. ๊ทธ๋ฆฌ๊ณ ::before์ ์์์์๊ฐ ๋ฉ๋๋ค. ์ด before์ด ๋๊ฐ์ ์ด ๋๋ ๊ฒ์ด๊ณ ์ ๋ ์ค๋ฅธ์ชฝ ์๋๋ก 15px๋งํผ ์ด๋์์ผ์ฃผ์์ต๋๋ค. width: 100%, height: 100%๋ฅผ ์ค์ ํด์ฃผ๋ฉด ๋ถ๋ชจ์์์ ํฌ๊ธฐ(๊ฐ๋ก, ์ธ๋ก)๋ฅผ ๊ทธ๋๋ก ๋ฌผ๋ ค๋ฐ๊ฒ ๋ค๋ ๋ป์ด ๋ฉ๋๋ค. ๊ทธ๋์ ์๋ณธ ์ด๋ฏธ์ง์ ๊ฐ์ ์ฌ์ด์ฆ์ ๊ทธ๋ฆผ์๊ฐ ์๊ธฐ๊ฒ ๋๋ ๊ฒ์ ๋๋ค.
๊ฐ์์์๊ฐ ์ด๋ ค์ฐ์ ๋ถ๋ค์ ์๋ ํฌ์คํ ์ฐธ์กฐํด ์ฃผ์ธ์.
[html/css] ๊ฐ์์์ ::before, ::after ์ฝ๊ฒ ์ดํดํ๊ธฐ
โ CSS ์ฒ์ ๋ฐฐ์ฐ์๋ ๋ถ๋ค๊ป ๊ฐ์์์๋ ๋ค์ ์ด๋ ค์ด ๊ฐ๋ ์ ๋๋ค. ์ค๊ธ์๋ค ๊ณผ์ ์์ ๋ฐฐ์ฐ๋ ๊ฒ์ด ์ ๋นํ์ง๋ง, CSS์์ ์์ฃผ ์ฌ์ฉ๋๋ ํธ๋ ๋์ด๊ธฐ ๋๋ฌธ์ ๊ฐ๋จํ ๊ฐ๋ ๊ณผ ํ์ฉ๋ฒ ์ ๋๋ ์์๋์
awesomepossum.tistory.com
๐ STEP 3. ๋ํธ ์์ ๋ฐฐ์นํ๊ธฐ
๊ท์ฝ๊ณ ์๊ธฐ์๊ธฐํ ๋๋์ ์ฃผ๋ ์ ์์์ด์์.
<!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>
.pic {
position: absolute;
}
.pic img {
position: relative;
z-index: 2;
}
.pic::before {
content:'';
position: absolute;
bottom: -30px;
right: -30px;
width: 100%;
height: 100%;
background-image: radial-gradient( /* ์ ์ ์๊ณผ ํฌ๊ธฐ ์ง์ */
#ea987e 20%,
rgba(0 0 0 / 0) 21%
);
background-size: 10px 10px; /* background ํฌ๊ธฐ ์ง์ (์ ์ฌ์ด์ ์ฌ๋ฐฑ) */
background-position: right bottom; /* ์ ๋ฌด๋ฌ ์์ ์์น */
z-index: 1;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic10.png">
</div>
</body>
</html>
css ์์ฑ์์ radial-gradient ์์ฑ์ ์ค์ ํด ์ฃผ๋ฉด ์ ํจํด์ง ๋ฐ๋ณต๋์ง ์์ ๋ ์ ํ๋์ ์ฌ๋ฐฑ์ ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
์ด๋ ๊ฒ ์ค์ ํด์ค ํ ์นธ์ด ๊ณ์ ๋ฐ๋ณต๋์ด ์ ๋ฌด๋ฌ์ ํจํด์ ํ์ฑํ๊ฒ ๋ฉ๋๋ค.
๋ง์ ๋์์ด ๋์ จ์ผ๋ฉด ๋๊ธ, ์ข์์ ๋๋ฌ์ฃผ์ธ์.
๊ถ๊ธํ ์ ์ด๋ ๋ฌธ์์ฌํญ์ ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์ธ์.
