728x90
๋ฐ์ํ
๋ฐฐ๋ ์ ํ
์น์ฌ์ดํธ ๋ฐฐ๋ ์ ํ์ ๋๋ค.
HTML
html ์์ค์ ๋๋ค.
<body>
<section id="bannerType" class="banner__wrap nexon">
<h2> class="blind">๋ฐฐ๋ ์์ญ</h2>
<div class="banner__inner">
<h3> class="title">์ ๋ชฉ ์์ญ</h3>
<p class="desc">
๋ด์ฉ๋ด์ฉ๋ด์ฉ์ด๋๋๋ค.๋ด์ฉ์ด์ผ๊ธธ๊ฒ์จ
<a> href="#" title="์ ํ์ด์ง ์ด๋ฆผ">๊ทธ๊ฑฐ์ด์ผํ๋๊ฑด๋ฐ</a>
</p>
<span> class="small">๋ฐฐ๋ ์ ํ01</span>
</div>
</section>
</body>
CSS
css ์์ค์ ๋๋ค.
/* banner */
.banner__inner {
background-image: url(../bannerType/img/banner_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
padding: 120px 0;
color: #fff;
}
.banner__inner .title {
font-size: 50px;
line-height: 1;
font-weight: 300;
margin-bottom: 40px;
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 300;
margin-bottom: 70px;
}
.banner__inner .desc a {
color: #fff;
display: block;
}
.banner__inner .desc a:hover {
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
text-decoration: underline;
}
/* ๋ธ๋ผ์ธ๋ ํจ๊ณผ */
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
728x90
๋ฐ์ํ
'Site ์ ์' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์ฌ์ดํธ ์ ์ - ์์ฑ๋ณธ / ๋ฐ์ํ (2) | 2022.09.19 |
|---|---|
| 08. ํธํฐ ์ ํ 1 (2) | 2022.09.06 |
| 06. ์ฌ๋ผ์ด๋ ์ ํ 1 (2) | 2022.09.06 |
| 05. ์ด๋ฏธ์ง/ํ ์คํธ ์ ํ 1 (3) | 2022.09.01 |
| 04. ํค๋ ์ ํ 1 (1) | 2022.09.01 |
๋๊ธ