우선 FIgma를 이용해 만들고 싶은 텍스트 유형 사이트의 틀을 만들어 줍니다.
<!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%;
}
.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;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: rgba(219, 7, 7, 0.6);
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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;
}
/* text__wrap */
.text__wrap {}
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__inner .text{
width: 32.333333%;
border: 1px solid #d8d8d8;
border-radius: 10px;
padding: 90px 20px 20px 20px;
box-sizing: border-box;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
position: relative;
}
.text__inner .text:hover{
background-color: #aaa6a6;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #EDD0A6;
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #A9F5C3;
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #B8E9FF;
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #F8C6F3;
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #C4BAFF;
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #F9C6C6;
background-image: url(../asset/img/textType01_06.svg);
}
.text__title {
font-size: 24px;
margin-bottom: 10px;
}
.text__desc {
font-size: 16px;
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
.text__btn {
float: right;
position: relative;
padding-right: 20px;
}
.text__btn::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 15px;
background-image: url(../asset/img/icon_plus.svg);
transition: all 1s;
}
.text__btn:hover::before{
transform: rotate(360deg);
}
</style>
</head>
<body>
<sectiont class="text__wrap section center nexon">
<div class="container">
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">쿠키를 만들때 주의점</h2>
<div class="text__inner">
<div class="text t1">
<h3 class="text__title">재료의 품질 확인하기</h3>
<p class="text__desc">좋은 품질의 재료를 사용하는 것이 맛있는 쿠키를 만드는 핵심입니다. 신선한 재료를 사용하고, 유통기한을 확인하고, 가능한 경우 유기농 또는 천연 재료를 사용하는 것이 좋습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">정확한 양 계산하기</h3>
<p class="text__desc">쿠키를 만들 때 정확한 양과 비율을 잘 지켜서 재료를 사용해야 합니다. 레시피에서 지정한 양과 비율을 잘 지켜서 누구든지 쉽게 따라할 수 있는 쿠키를 만들어보아요. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">반죽을 과하게 섞지 않기</h3>
<p class="text__desc">반죽을 과하게 섞으면 쿠키가 딱딱해지거나 지루해질 수 있습니다. 반죽이 잘 섞이도록 믹서기나 주걱 등을 사용해서 부드럽게 섞어주시기 바랍니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">오븐 온도와 시간 조절하기 </h3>
<p class="text__desc">오븐의 온도와 굽는 시간은 쿠키의 맛과 질감에 큰 영향을 미칩니다. 레시피에서 지정한 온도와 시간을 지켜야 합니다. 시간에 따라 쿠키가 타거나 덜 익을수 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">쿠키를 굽는 시트 조절하기</h3>
<p class="text__desc">쿠키를 굽는 시트의 간격을 충분히 띄워서 균등하게 굽히도록 하세요. 시트의 크기와 모양에 따라 쿠키의 모양이 바뀔 수 있으므로 주의해야 합니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">쿠키를 굽은 후 식히기</h3>
<p class="text__desc">쿠키를 굽은 후에는 오븐에서 꺼내서 식히기 전에 5분 정도 시간을 두세요. 그 후에는 완전히 식히기 전에 쿠키를 빼지 마세요. 쿠키가 완전히 식으면 구리거나 크리스피해집니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
</body>
</html>우선 <body> 부분에 section안에 컨테이너 박스를 만들고 제목과 박스 6개를 만들어 넣고 싶은 내용을 넣어줍니다.
그후 <style> 부분으로 가서 css로 사이트를 만들어 줍니다. text__wrap 위에 부분은 다른 사이트와 같이 쓰이니 건드리지 말고 밑에 부분만 보도록 하겠습니다.
·우선 text__inner .text부분에 6개의 박스의 폭을 정해 주기위해 (width)을 32.3333% 를 주고 그 크기만큼 선을 만들어 박스의 크기를 알아보기 쉽게 하기위해 border에 폭과 색을 정해 넣어 준후, 모서리 부분에 윤곽을 주기 위해 border-radius를 이용해 10px만큼의 윤곽을 주어 모서리 부분이 부드러워 지게 하였습니다. 그후 간격을 정해 주기 위해 paddig을 이용 하였습니다 그 후 박스 밑에 공간을 주기 위해 margin-bottom을 이용 하였습니다..
·그 후 6개의 박스를 자연스럽게 배치하기 위해 .text__inner 가 있는 곳에 모든텍스트를 왼쪽으로 정렬 하기위해 text-align: left;를 주었고, display: flex;, flex-wrap: wrap;,justify-content: space-between;를 이용해 세로로 정렬 되있던 박스를 가로로 배치시키면서 공간의 비율에 맞게 가로 정렬 해주었습니다.
이때 justify-content: space-between;로인해 박스를 기준으로 공간의 비율에 맞춰 가로로 정렬 하기 때문에 너무 많은 공간이 비게 되는데 그때는 text__inner .text에 box-sizing: border-box;를 해주게 되면 박스도 포함하여 비율을 맞추어 줍니다.
·박스에 커서를 대면 커서 모양이 바뀌게 하기위해 cursor: pointer 를 주었고 ,배경이 바뀌게 하기 위해 .text__inner .text 가있는곳에 :hover를 만들어 배경이 바뀌게 하였습니다. 배경을 부드럽게 바꾸게 하기위해 transition: all 0.3s을 이용하여 배경이 바로 바뀌지 않고 0.3초 동안 바뀌게 해주었습니다.
·아이콘을 만들어 주기위해 .text__inner .text::before를 만들고 content 와 width과 height를 이용해 작은 박스 하나를 만들고 border-radius를 이용해 윤곽을 주고, 배경과 아이콘을 text__inner .text.t1::before부터text__inner .text.t6::before까지 지정해준후 다시 돌아와 아이콘이 비틀어 져있는것을 background-position: center를 이용해 중앙로 오게하고 반복되는 아이콘을 background-repeat: no-repeat를 이용해 하나만 나오게 해줍니다. 그후 아이콘을 배치하기 위해서는position: absolute; 를 이용하고 자기가 있어야 할 박스로 보내주기 위해 .text__inner .text 에 position: relative;를 주어 배치할 수 있도록 합니다. 그후 .text__inner .text::before로 돌아가 left와 top을 이용해 위치를 지정해줍니다.
·text__title의 폰트 크기를 24px주고 밑으로만 공간을 10px주었습니다.
·text__desc 에 폰트크기를 16px을 주고 컬러를 바꾼후 밑으로만 공간을 15px을 주고 폰트사이의 간격을 1.5주었습니다.
·text__btn의 내용을 오른쪽으로 보내기 위해 float: right;를 썻습니다. 그옆에 아이콘을 하나 달아주기위해 .text__btn::before 에다가 위에서 만든 아이콘과 처럼 공간과 크기를 정하고 아이콘을 넣은후 해준후 position: absolute;를주고 다 position: absolute: relative;를 이용하여 있어야할 태그에 넣어줍니다. 그리고 .text__btn:hover::before에 마우스 커서를 가져다대면 아이콘이 한바퀴 돌게하기 위해 transform: rotate(360deg);를 주었고, .text__btn::before에 transition: all 1s; 를 주어 아이콘이 바로 바뀌지 않고 1초 동안 바뀌게 해주었습니다.
그렇게 완성이 됩니다.
완성된 텍스트 사이트 보러가기
https://jhwangwoo.github.io/web2023/site/texttype/texttype01.html