사이트 만들기 : 이미지 유형 01
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
이번 시간에 공부해 볼 유형은 이미지 유형 입니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
피그마 구도에 맞게 틀을 잡아줍니다.
{
<body>
<section id="imageType01" class="image__wrap nexon section">
<h2>육식 동물들</h2>
<p>사납고 무서운 동물들 리스트 입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">무서운 맹수 호랑이</h3>
<p class="image__desc">
호랑이는 무섭습니다. 무서운 맹수입니다. 호랑이는 사납습니다.
호랑이는 매우 위협적인 동물입니다. 만나면 도망가야합니다.</p>
<a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">사나운 맹수 늑대</h3>
<p class="image__desc">
늑대는 무섭습니다. 무서운 맹수입니다 늑대는 사납습니다.
늑대는 매우 위협적인 동물입니다. 만나면 도망가야 합니다.</p>
<a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
</body>
}
03. CSS
Figma에서 정해놓은 수치대로 CSS를 입혀줍니다.
{
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* imageType */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
}
.image.img1 {
background: url(img/image_bg01_01.jpg) no-repeat center;
}
.image.img2 {
background: url(img/image_bg01-02.jpg) no-repeat center;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.image__desc {
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
font-size: 16px;
color: #fff;
background-color: #B45A30;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #B59140;
}
}
댓글