<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๊ฐ์ ์ฉ ๊ฟ์ฌ๊ณผ</title>
</head>
</html>
<style>
*{
margin: 0;
padding: 0;
}
main{
width: 700px;
border: 1px solid black;
margin: auto; /* width ๊ฐ์ด ์์ ๋๋ง ๋ง์ง auto ์ ์ฉ๋จ !! */
}
h2{
color: white;
background-color: black;
}
h3{
color: red;
margin: 20px ;
}
span{
display: block;
}
.blue{
display: inline;
color: blue;
}
#s2 div{
text-align: center;
font-weight: bold;
margin: 20px 0;
}
#s2 span{
margin-bottom: 30px;
}
.seconds{
border-bottom: 1px solid black;
}
#s1{
position: relative; /* ์์์ position ๊ธฐ์ค์ด ๋๋๋ก */
height: 300px;
margin-bottom: 20px;
background-image: url("https://news.kbs.co.kr/data/news/2021/10/18/20211018_iYfwL8.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
#s1 > div{
position: absolute; /* ๋ถ๋ชจ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์น ์ก์๋ผ */
padding: 10px 20px;
width: 100%; /* ๋ถ๋ชจ ๊ฐ๋ก ๊ฐ์ด๋ ๋๊ฐ์ด ๋ง์ถฐ๋ผ */
bottom: 0; /* ๋ด ๋ถ๋ชจ์ ์ต ํ๋จ์ ๋ถ์ฌ๋ผ */
background-color: rgba(0,0,0,0.8);
}
#s1 h1{
color: white;
margin-bottom: 10px;
}
#s1 span{
margin: 5px 0;
}
#s1 p{
color: orange;
}
</style>
<body>
<main>
<section id="s1">
<div>
<h1>๊ฐ์ ์ฉ ๊ฟ์ฌ๊ณผ</h1>
<p>
<span>ํ ์ง์ด ์๊ณ ์ฝ๊ฐ์ ๋ชป์๊ฒผ์ง๋ง ๋ง๊ณผ ์์์ ๊ทธ๋๋ก์
๋๋ค</span>
<span>์ง ์ข์ ์ฌ๊ณผ๋ฅผ ์ ๋ ดํ๊ฒ ์ฆ๊ฒจ๋ณด์ธ์</span>
</p>
</div>
</section>
<section id="s2">
<h2>ํ์ธํ์ธ์</h2>
<div>
<h3>์ฃผ๋ฌธ ๋ฐ ๋ฐฐ์ก</h3>
<p>
<span><span class="blue">์คํ 2์ ์ด์ </span> ์ฃผ๋ฌธ๊ฑด์ ๋น์ผ ๋ฐ์กํฉ๋๋ค</span>
<span>2์ ์ดํ ์ฃผ๋ฌธ๊ฑด์ ๋ค์๋ ๋ฐ์กํฉ๋๋ค(์ฃผ๋ง์ ์ธ)</span>
</p>
</div>
<div class="seconds">
<h3>๊ตํ ๋ฐ ํ๋ถ</h3>
<p>
<span>๋ถ๋ง์กฑ์ <span class="blue">100% ํ๋ถ</span>ํด ๋๋ฆฝ๋๋ค</span>
<span>๊ณ ๊ฐ์ผํฐ๋ก ์ ํ์ฃผ์ธ์</span>
</p>
</div>
<div>
<h3>๊ณ ๊ฐ์ผํฐ</h3>
<p>
<span>0000-0000</span>
<span>์๋ด์๊ฐ: ์ค์ 9์ ~ ์คํ 6์ (ํ /์ผ ๊ณตํด์ผ ํด๋ฌด)</span>
</p>
</div>
</section>
</main>
</body>
