사이트 만들기 : 텍스트 유형 01
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
이번 시간에 공부해 볼 유형은 텍스트 유형 입니다.
이미지 유형과 별 다를게 없으며 쉽습니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
피그마 구도에 맞게 틀을 잡아줍니다.
{
<body>
<section id="textType01" class="text__wrap nexon section">
<h2>순하고 순둥한 동물들 리스트 입니다.</h2>
<p>초식 동물들</p>
<div class="text__inner container">
<article class="text text1">
<figure class="img__box">
<img class="img01" src="img/img_bg01_01.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
<article class="text text1">
<figure class="img__box">
<img class="img02" src="img/img_bg01_02.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
<article class="text text1">
<figure class="img__box">
<img class="img03" src="img/img_bg01_03.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
<article class="text text1">
<figure class="img__box">
<img class="img04" src="img/img_bg01_04.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
<article class="text text1">
<figure class="img__box">
<img class="img05" src="img/img_bg01_05.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
<article class="text text1">
<figure class="img__box">
<img class="img06" src="img/img_bg01_06.png" alt="메시지">
</figure>
<h3 class="text__title">초식 동물들</h3>
<p class="text__desc">
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
초식동물초식동물초식동물초식동물초식동물
</p>
<a class="text__btn" href="#">더보기</a>
</article>
</div>
</section>
</body>
}
03. CSS
피그마 수치대로 CSS를 입혀줍니다.
{
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: NexonLv1Gothic;
font-weight: 300;
}
/* 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: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 10px;
}
.section > p {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 70px;
}
/* textType */
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.img__box {
width: 60px;
height: 60px;
padding: 20px;
}
.text {
width: 373px;
height: 260px;
background-color: #D9D9D9;
position: relative;
}
.text:nth-child(1) {
margin-bottom: 20px;
}
.text__title {
font-size: 24px;
margin-bottom: 10px;
margin-left: 20px;
}
.text__desc {
font-size: 18px;
margin-bottom: 20px;
margin-left: 20px;
color: #666;
line-height: 1.4;
}
.text__btn {
font-weight: 500;
margin-left: 20px;
}
}
댓글