โจ์ฌ์ง์ ํ๋ ์ ์ถ๊ฐํ๊ธฐ & ์ก์ ๋ง๋ค๊ธฐโจ
์๋ ํ์ธ์. ์ค๋์ ๊ฐ์์์๋ก ์ฌ์ง์ ๋๊ฐ์ ํ๋ ์ ์ถ๊ฐํ๋ ๋ฒ, ๋ชจ์๋ฆฌ๋ฅผ ์ก์์ฒ๋ผ ๊พธ๋ฏธ๊ธฐ(+ ์์ฉ : ๋ชจ์๋ฆฌ๋ฅผ ํ ์ดํ๋ก ๋ถ์ธ ๊ฒ์ฒ๋ผ ๊พธ๋ฏธ๊ธฐ) ๋ฐฐ์๋ด์.
๐ 1. ๋๊ฐ์ ํ๋ ์ ๋ง๋ค๊ธฐ
์ฌ์ง์ ์ ์ฒด๊ฐ์ ์ค ์ ์๋ ๋๊ฐ์ ํ๋ ์ ๋์์ธ์ด์์. ์์ฌ์์ ๋๋ ๊ฐ์์์๋ผ๊ณ ๋ ๋ถ๋ฅด๋ ::after์ด์ฉํด์ ๋ง๋ค์ด๋ณผ๊ฒ์. ์ค๋น ๋์ จ๋์?
<!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::after {
content: '';
position: absolute;
top: -10px; /* 10px๋งํผ ๊ฒฝ๊ณ์ ์์ชฝ์ผ๋ก ํฉ์ฅ */
left: -10px; /* 10px๋งํผ ๊ฒฝ๊ณ์ ์ผ์ชฝ์ผ๋ก ํ์ฅ */
width: calc(100% + 20px); /* ์ผ์ชฝ ์ค๋ฅธ์ชฝ ๋๊ฐ์ ํ๋ ์ ์ ๋ฐ๊ฐ x2 */
height: calc(100% + 20px); /* ์์ชฝ ์๋์ชฝ ๋๊ฐ์ ํ๋ ์ ์ ๋ฐ๊ฐ x2 */
border-image-source: repeating-linear-gradient(
45deg, /* 45๋ ํ์ */
#ea987e 0px, #ea987a 2px, /* ์ ๊ตต๊ธฐ์ ์๊น */
rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 7px /* ์ ์ฌ์ด ์ฌ๋ฐฑ ๋ถ๋ถ */
);
border-image-slice: 20; /* ๋ค ๋ณ์ ์ฌ์ฉ ๋ฒ์ */
border-width: 20px; /* ํ
๋๋ฆฌ ํญ */
border-image-repeat: round; /* ํ์ผ ํํ๋ก ๋ฐ๋ณต */
border-style: solid; /* ์ค์ ์ผ๋ก ํํ */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic05.png" alt="">
</div>
</body>
</html>
โ๏ธ ์์๋ฅผ ๋๋ฌ์ผ ํ ๋๋ฆฌ์ ์ด๋ฏธ์ง๋ฅผ ์ง์ ํ๋ border-image
border-image-source: repeating-linear-gradient(
45deg, /* 45๋ ํ์ , ๋๊ฐ์ ์ ๊ธฐ์ธ์ด์ง ๊ฐ๋ */
#ea987e 0px, #ea987a 2px, /* ์ ๊ตต๊ธฐ์ ์๊น ์ง์ */
rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 7px /* ์ ์ฌ์ด ์ฌ๋ฐฑ ๋ถ๋ถ */
);
border-image-slice: 20; /* ๋ค ๋ณ์ ์ฌ์ฉ ๋ฒ์ */
border-width: 20px; /* ํ
๋๋ฆฌ ํญ */
border-image-repeat: round; /* ํ์ผ ํํ๋ก ๋ฐ๋ณต */
border-style: solid; /* ์ค์ ์ผ๋ก ํํ */
box-sizing: border-box;
border-image : ์ด๋ฏธ์ง ํ ๋๋ฆฌ ๋ฐ๋ผ ์ค๋ฌด๋ฌ ๋ฐฐ๊ฒฝ ๋ฃ์ ๋ ์ฐ๋ ํ๋กํผํฐ
repeating-linear-gradient : ๋๊ฐ์
border : ๋๊ฐ์ ํ๋ ์ ์ค์ฌ
border-width: 20px;
๋๊ฐ์ ํ๋ ์์ ํญ์ด 20px
๐ 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>
.pic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.pic::before,
.pic::after {
content:'';
position: absolute;
transform: rotate(-35deg);
width: 90px;
height: 30px;
background-color: #fff;
}
.pic::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.pic::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic07.png" alt="">
</div>
</body>
</html>
์์ฌ์์ ::before๊ณผ ::after์ ์ด์ฉํด์ ๋ค๋ชจ๋ฐ์ค 2๊ฐ๋ฅผ ๋ง๋ค์ด์ค๋๋ค. ์ ๋ ํฌ๊ธฐ๋ฅผ ์ฌ์ง์ ๋ง์ถฐ์ 90px * 30px๋ก ์ค์ ํด์ฃผ์์ด์. ์ฌ๋ฌ๋ถ๋ live server ๋์ ๋์ผ์๊ตฌ ์น ๋ธ๋ผ์ฐ์ ์ ์์๊ฐ์ด ์ด๋ป๊ฒ ํํ๋๋์ง ํ์ธํ์๋ฉด์ ์์ ํด์ฃผ์ธ์.
๊ทธ๋ฆฌ๊ณ transform: rotate(-35deg)๋ก ๋ฐ์ค ๋ ๊ฐ๋ฅผ ์๊ณ๋ฐ๋๋ฐฉํฅ์ผ๋ก 35๋๋งํผ ํ์ ํด ์ค์๋ค.
๊ทธ๋ฆฌ๊ณ ์ด ๊ฐ์์์ ๋ ๊ฐ์ ๋ฐฐ๊ฒฝ์๊ณผ ๊ฐ์ ํฐ์์ ์ง์ ํด์ค๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ์ ๊ทธ๋ ค์ฃผ๋ฉด ์๋์ ๊ฐ์ ์ํ๊ฐ ๋๊ฒ ์ฃ ?
์์ฉํด์ ์ ์ฝ๋์์ border-top ์์ฑ๊ณผ border-bottom ์์ฑ์ ์ญ์ ํ๊ณ , ์์ฌ์์์ background-color์ ์์ ์ ํ์ฃผ๋ฉด ์ฌ์ง์ ํ ์ดํ๋ฅผ ๋ถ์ธ ๊ฒ์ฒ๋ผ ์ฐ์ถํ ์๋ ์์ต๋๋ค.
<!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::before,
.pic::after {
content:'';
position: absolute;
transform: rotate(-35deg);
width: 90px;
height: 30px;
background-color: #ea987e;
}
.pic::before {
top: -10px;
left: -25px;
}
.pic::after {
bottom: -10px;
right: -25px;
}
</style>
</head>
<body>
<div class="pic">
<img src="Images/pic07.png" alt="">
</div>
</body>
</html>
๋๋ฌด ์ฝ์ฃ ?
๋ค์ ์๊ฐ์๋ ์ฌ์ง ํ ๋๋ฆฌ๋ฅผ ์ํ๋ ๋ชจ์์ผ๋ก ์๋ฅด๋ ๋ฐฉ๋ฒ๊ณผ ํ๋ฆผ, ํ์์กฐ, ์ธํผ์ ํํฐ ์ฌ์ฉ๋ฒ์ ๋ฐฐ์๋ด์. ๊ถ๊ธํ ์ ์ ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์ธ์.
'Coding > html&css' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Logo Design] ์ฌ์ง์ ๋ก๊ณ ๋ฃ๊ธฐ, ๊ธ์จ๋ฅผ ์ฌ์ง์ผ๋ก ์ฑ์ฐ๊ธฐ (0) | 2024.04.07 |
|---|---|
| [Image Design] ์ฌ์ง์ ํํฐ ์ ์ฉํ๊ธฐ(๋๊ฐ์ , ํ๋ฆผ, ํ์์กฐ, ์ธํผ์) (1) | 2024.04.07 |
| [html/css] ๊ฐ์์์ ::before, ::after ์ฝ๊ฒ ์ดํดํ๊ธฐ (1) | 2024.04.07 |
| [Image Design] ์ฌ์ง์ ์์ ์ถ๊ฐํ๊ธฐ (1) | 2024.04.07 |
| [Image Design] ํผ์ฌ์ฒด์ ๊ทธ๋ฆผ์ ๋ฐฐ์นํ๊ธฐ (0) | 2024.04.07 |
