한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
설정 해 둔 리셋 값을 스타일에 넣고 폰트도 넣는다 그후
section 박스를 만들고 class값 image wrap 을 넣어준다. 텍스트를 가운데 넣어주는
리셋 값과 폰트를 적용시키기 위해 center 와 nexon를 넣어줍니다.
그후 섹션을 제목과 부제가 들어갈 container 와 이미지가 들어갈 image inner로
나눠준다. container는 리셋 값을 사용 하고 image inner는 style에 새로운 값을 설정해준다
그리고 이미지가 들어갈 div 박스를 두개 만들어 주고 image 라고 클래스 값을 줍니다.
그후 이미지가 들어갈 박스와 텍스트가 들어갈 박스 각 각 image header ,image body
로 클래스 값을 지정해 줍니다. img src 로 image header 에 이미지를 넣고 이미 figure로 감싸줍니다.
image body도 제목 h3 본문 p 버튼 a 로 나눠주고 각 내용에 맞는 텍스트로 채워줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image Type01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt30 {margin-top: 30px !important}
.mt40 {margin-top: 40px !important}
.mt50 {margin-top: 50px !important}
.mt60 {margin-top: 60px !important}
.mt70 {margin-top: 70px !important}
.mb10 {margin-bottom: 10px !important}
.mb20 {margin-bottom: 20px !important}
.mb30 {margin-bottom: 30px !important}
.mb40 {margin-bottom: 40px !important}
.mb50 {margin-bottom: 50px !important}
.mb60 {margin-bottom: 60px !important}
.mb70 {margin-bottom: 70px !important}
.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;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* image__type */
.image__wrap {}
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image__header {}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin: 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>
</head>
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__2">가구를 고르는 방법</h2>
<p class="section__desc">내 방에 어울리는 가구를 고르는 첫번째 방법은 [          ] 이다.</p>
<div class="image__inner">
<artcle class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_01.jpg" alt="색을 고르는 법">
</figure>
<div class="image__body">
<h3 class="title">비슷한 색을 찾아라!</h3>
<p class="desc">자신의 방의 색이 무엇인지 확인하고 <br>
그 색에 맞는 가구를 선택한다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</artcle>
<artcle class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="색을 고르는 법2">
</figure>
<div class="image__body">
<h3 class="title">대비되는 색을 찾아라!</h3>
<p class="desc">가구에 포인트가 필요하다면 벽이나 <br>옆 사물들과 대비되는 색을 찾는다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</artcle>
</div>
</div>
</section>
</body>
</html>