...
728x90
반응형
레이아웃 실전 _ 이미지 유형
이미지 유형 레이아웃 디자인하기
우선 만들고자 하는 웹 사이트의 디자인을 구상해 봅니다.
구상한 디자인 기반으로 코딩하기
구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다.
HTML 문서 작성
<!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>이미지 유형01</title>
</head>
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">한강의 전경</h2>
<p class="section__desc">한강은 평소에 봐도 저녁에 봐도 이쁩니다.</p>
<div class="image__inner">
<article 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">맑은 날 밝을 때 한강을 가면 산뜻하고 웅장한 느낌을 받을 수 있습니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="저녁의 한강">
</figure>
<div class="image__body">
<h3 class="title">저녁의 한강</h3>
<p class="desc">노을이 지는 저녁에 한강을 가면 맥주를 안 마시고는 버틸 수 없는 전경이 펼쳐집니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>HTML 정리해보기
하나의 section에 제목과 이미지로 크게 두 부분으로 나누어 구조를 짜봤습니다.
이미지의 부분에는 다시 두 부분으로 나누어 각각의 이미지를 넣어주었습니다.
CSS 정리해보기
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.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;
}
.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 25px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* image__type */
.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;
font-size: 32px;
line-height: 1;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 35%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}CSS 정리해보기
카드유형과 마찬가지로 기본값을 리셋해주는 부분을 똑같이 작성해 주었습니다.
속성값을 부여해 원하는 위치를 잡기 힘들 때, position: absolute;의 속성으로 강제적으로 위치를 잡아줄 수 있습니다.
position: absolute; 의 속성을 사용하면 기준이 되는 요소에 position: relative;를 부여해야 합니다.
728x90
반응형