728x90
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
* {
text-decoration: none;
/* color: #000; */
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
text-align: center;
}
.section.center{
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
color: #666;
font-size: 22px;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* image__inner */
.image__inner{
display: flex;
justify-content: space-between;
}
.image__inner .image{
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image__body{
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title{
margin-bottom: 15px;
line-height: 1;
font-size: 32px;
}
.image__body .desc{
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn{
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px ;
display: inline-block;
}
</style>css 코드입니다.
<body>
<section class="iamge__wrap section center nexon">
<div class="container">
<h2 class="section__h2">Counting star lv01</h2>
<p class="section__desc">계절이 지나가는 하늘에는 가을로 가득 차 있습니다.</p>
<div class="image__inner">
<article class="image">
<figure class = "image__header">
<img src="../asset/img/star_01_01.jpg" alt="별이 많은 사진1">
</figure>
<div class="image__body">
<h3 class="title">잠이 안올땐 1</h3>
<p class="desc">하나 둘 셋 별을 세다 보면 어느세 잠이들어요</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure>
<img src="../asset/img/star_01_02.jpg" alt="별이 길은 사진2">
</figure>
<div class="image__body">
<h3 class="title">잠이 안올땐 2</h3>
<p class="desc">하나 둘 셋 별을 세다 보면 나도 모르게 눈이 아파요</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>body 테그 입니다.
중요 point 1
.image__inner .image{
position: relative;
}
.image__body{
position: absolute; /*기준*/
}를 이용해서 image 안에 내용이 들어가게 설정을 해줍니다.
이 내용이 없다면 image안에 글이 들어가지 않습니다.
중요 point 2
.image__body .btn{
display: inline-block;
}해당 코드를 이용해 btn의 인라인블록처리해줍니다.
인라인 블록은 !
- 인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정 된다
- 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있음
- 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있음
- 인라인 요소처럼 여러개의 인라인블록 요소가 있을때, 수평으로 쌓인다
- 인라인블록 요소를 생성하려면, css의 {display: "inline-block";}으로 스타일을 적용해야 함