사이트 만들기 : 텍스트 유형 02
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
텍스트 유형 두번째 시간입니다. 별 다를건 없습니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
피그마 구도에 맞게 틀을 잡아줍니다.
{
<body>
<section id="textType02" class="section gmarket text__wrap">
<div class="container all__inner">
<aside>
<div class="logo">ANIMAL</div>
<h2>초식 동물<br>소개하기</h2>
<p>초식동물 중 귀여운 동물들을<br>
소개 해보려고 합니다.<br>
잘 봐주세요!
</p>
</aside>
<div class="text__inner1">
<article class="text text1">
<figure>
<img src="img/img_bg02_01.png" alt="재생">
</figure>
<h3>기린</h3>
<p>기린입니다기린입니다기린입니다기린입니다<br>
기린입니다기린입니다기린입니다기린입니다<br>
기린입니다기린입니다기린입니다
</p>
</article>
<article class="text text1">
<figure>
<img src="img/img_bg02_03.png" alt="재생">
</figure>
<h3>판다</h3>
<p>판다입니다판다입니다판다입니다판다입니다<br>
판다입니다판다입니다판다입니다판다입니다<br>
판다입니다판다입니다판다입니다
</p>
</article>
</div>
<div class="text__inner2">
<article class="text text1">
<figure>
<img src="img/img_bg01_06.png" alt="재생">
</figure>
<h3>토끼</h3>
<p>토끼입니다토끼입니다토끼입니다토끼입니다<br>
토끼입니다토끼입니다토끼입니다토끼입니다<br>
토끼입니다토끼입니다토끼입니다
</p>
</article>
<article class="text text1">
<figure>
<img src="img/img_bg01_05.png" alt="재생">
</figure>
<h3>코뿔소</h3>
<p>코뿔소입니다코뿔소입니다코뿔소입니다<br>
코뿔소입니다코뿔소입니다코뿔소입니다<br>
코뿔소입니다코뿔소입니다
</p>
</article>
</div>
</div>
</div>
</section>
</body>
}
03. CSS
피그마 수치대로 CSS를 입혀줍니다.
{
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-weight: 300;
font-family: 'GmarketSans';
}
/* 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;
}
/* textType02 */
.logo {
background-color: red;
width: 200px;
height: 30px;
border-radius: 50px;
text-align: center;
line-height: 30px;
color: #fff;
font-weight: 500;
margin-bottom: 20px;
}
aside {
padding: 20px;
width: 33%;
}
aside > h2 {
font-size: 50px;
line-height: 1;
font-weight: 600;
margin-bottom: 47px;
}
aside > p {
font-size: 20px;
line-height: 1.4;
font-weight: 500;
}
article > h3 {
font-size: 24px;
font-weight: 600;
}
article > h3 {
margin-bottom: 20px;
}
article > p {
font-weight: 300;
color: #666;
}
figure {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.all__inner {
display: flex;
height: 425px;
}
.text__inner1 {
display: flex;
flex-wrap: wrap;
}
.text__inner2 {
display: flex;
flex-wrap: wrap;
}
}
댓글