저번에 했었던 카드 유형 사이트 처럼 figma 로 만들고 싶은 이미지 사이트 만들어 본 후에 body부분에 박스를 만들어 사이트에 들어갈 글과 링크를 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다.
그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다.
<!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>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<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%;
}
/* 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;
}
.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__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 {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.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>
</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><style>에 위치한 /*img type*/ 위에 부분은 카드 사이트 유형과 같으므로 넘어가고 /*img type*/ 에서 부터 차례대로 봐 보겠습니다.
·class가 image__inner 부분을 display: flex를 주어 "justify-content: space-between"를 주어 이미지를 가로축을 기준으로 정렬해 줍니다.
·class가 image__inne 인곳 안에 class가 image인 곳에 width: 570px ,height: 370px 를주어 폭과높이를 넓혀주고, background-color: #ccc로하여 배경색을 바꿔 주고 position: relative를 을 줍니다.
·class가 image__body>에 position: absolute를 주고 left:0, bottom:0, color는 #fff를 준다. text-align: left을 이용해 텍스트를 왼쪽으로 정렬 한후 padding: 30px주어 간격을 넓혀 줍니다.
·class가 image__body 안에 class가 title인곳 으로 가주어 font-size: 32px를 주고 라인높이를 line-height: 1 만큼 준후 margin-bottom: 15px 을 줘서 밑에 간격을 넓혀줍니다.
·class가 image__body 안에 class가 desc인곳 에 margin-bottom: 15px을 주어 밑에 간격을 넓혀주고 라인높이를 line-height: 1.5를 주어 텍스트 간격을 넓혀 준후,padding-right: 20%을 넣어 간격을 오른쪽으로 넓혀줍니다.
·class가 image__body 안에 class가 btn인곳에 color: #fff 로 해주고,background-color: rgba(0, 0, 0, 0.5);를 넣어 배경을 약간 어둡게 만든후, padding: 10px 30px;을 주어 간격을 넓혀줍니다. 그리고 display: inline-block;으로 만들어주면 이미지유형이 완성됩니다.
