728x90
๋ฐ์ํ
์ด๋ฏธ์ง ์ ํ 1
์ด๋ฏธ์ง ์ ํ ๋ ์ด์์ ์ฌ์ดํธ์ ๋๋ค. html๊ณผ css๋ก ์์ ํ์์ต๋๋ค.
๋ ์ด์์ ์ค์
figma๋ก ๊ทธ๋ฆฌ๋์ ์ฌ์ดํธ์ ๋ ์ด์์์ ์ก์ต๋๋ค.
HTML
html ์์ค์ ๋๋ค.
<body>
<section id="imageType01" class="image__wrap nexon section">
<h2>๋ค์ด์ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ</h2>
<p>๋น์ ๋ง์ ๋ฉ์ง ๊ธฐ๋ก์ฅ, ๊ฐ์ฑ์๋ ๋ค์ด์ด๋ฆฌ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์!</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">๋น์ ์ ๊ธฐ์ต๋ค</h3>
<p class="image__desc">๊ธฐ์ต์ผ๋ก ๋จ๊ธฐ๋ ๊ฒ๋ ์ข์ ๋ฐฉ๋ฒ์ด์ง๋ง ๊ธฐ๋ก์ผ๋ก ๋จ๊ธฐ์ง ์์ ๊ธฐ์ต์ ๊ธ๋ฐฉ ํ๋ฐ๋๋ ๋ฒ์ด์ฃ . ๋น์ ์ ๊ธฐ์ต๊ณผ ๊ฐ์ ์ ์ด๋๊ฐ์ ๋ฐ์ ํ์ธ์. ํ๋ ๋น์ ์ ์ถ์ต์ ์ฝ๊ณ ๊ธฐ๋ปํ ๋น์ ์ ์ผ๊ตด์ ์์ํ์ธ์!</p>
<a class="image__btn" href="/" title="์์ธํ ๋ณด๊ธฐ">์์ธํ ๋ณด๊ธฐ</a>
</article>
<article class="image img2">
<h3 class="image__title">๋น์ ์ ์ถ์ต์</h3>
<p class="image__desc">๋น์ ์ ๊ฐ์ ์ ์๊ฐ์ ์ผ๋ก ํํํ๊ณ ์ถ์ง ์์ผ์ ๊ฐ์? ์คํฐ์ปค๋ฅผ ๋ถ์ด์ธ์. ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ์ธ์. ๋น์ ์ ์ถ์ต์ ์ฅ์ํ์ธ์. ์ ์ ํ ์ฅ์์ ๊ฐ์ ์ ์ค๊ฐ๋๊ฒ
ํํํด์ค๋๋ค. ๋ง์์ ๋๋ ์คํฐ์ปค๋ ๊ทธ๋ฆผ์ผ๋ก ์์๊ฒ ์ฅ์ํด๋ณด์ธ์</p>
<a class="image__btn yellow" href="/" title="์์ธํ ๋ณด๊ธฐ">์์ธํ ๋ณด๊ธฐ</a>
</article>
</div>
</section>
</body>
CSS
css ์์ค์ ๋๋ค. figma๋ก ์ค์ ํด๋์ ๋ ์ด์์์ด๋ zaplin์ ๋ณด๋ฉฐ ์ ์ ํ๊ฒ css๋ฅผ ์ค์ ํด์ค๋๋ค.
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* imageType */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
}
.image.img1 {
background: url(img/image_bg01_01.jpg) no-repeat center;
}
.image.img2 {
background: url(img/image_bg01_02.jpg) no-repeat center;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.image__desc {
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
font-size: 16px;
color: #fff;
background-color: #B45A30;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #B59140;
}
728x90
๋ฐ์ํ
'Site ์ ์' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 02. ์ด๋ฏธ์ง ์ ํ - 3 (4) | 2022.08.21 |
|---|---|
| 02. ์ด๋ฏธ์ง ์ ํ - 2 (3) | 2022.08.18 |
| 03. ์นด๋ ์ ํ - 3 (11) | 2022.08.11 |
| 02. ์นด๋ ์ ํ-2 (7) | 2022.08.10 |
| 01. ์นด๋ ์ ํ-1 (3) | 2022.08.09 |
๋๊ธ