오늘은 이미지 타입의 레이아웃을 만들어보겠습니다~!!
이미지 유형 페이지 만들기
피그마에서 만든 디자이늘 그대로 코딩해보도록 하겠습니다.
기본 CSS 리셋값 설정해주기
CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩 값이 먹혀서 편하겠죠?
이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다.
그리고 바디 안쪽에 섹션들을 나누어주겠습니다.
<style>
/* reset */
* {
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%;
}
.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;}
/* 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 {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
</style>
바디 부분에 이미지 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등)
구역을 잘 나눠주고 이름을 지정해줘야 나중에 CSS를 설정할 때 효율성이 좋습니다!
section태그와 h2태그, p태그, div태그에 각각 class로 이름을 지정해줍니다.
그리고 제목에 맞는 텍스트를 넣어줍니다.
<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>
메인 제목과 설명 글, 이미지에 CSS를 적용시켜줍니다.
<style>
/* 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: 20%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}
</style>CSS 사전
| text-align | 속성은 텍스트 정렬 방식을 설정합니다. |
|
vertical-align
|
인라인 요소의 수직 정렬 방법을 설정하는 속성입니다. |
| justify-content | CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다. |
|
background-repeat
|
배경 이미지의 반복 여부를 지정하는 속성입니다. |
| background-position | 배경 이미지의 위치를 지정하는 속성입니다. |
|
background-image
|
요소의 배경 이미지를 설정하는 속성입니다. |
|
display
|
요소의 표시 방법(display method)을 설정하는 속성입니다. |
완성된 페이지와 링크
다른 유형의 페이지 보러가기
카드 유형 : https://duektmf34.tistory.com/32
이미지텍스트 유형 : https://duektmf34.tistory.com/42
슬라이드 유형 : https://duektmf34.tistory.com/43
텍스트 유형 : https://duektmf34.tistory.com/48
배너 유형 : https://duektmf34.tistory.com/59
푸터 유형 : https://duektmf34.tistory.com/53
728x90
반응형
