사이트 만들기 : 텍스트 유형 02
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
텍스트 유형 세번째 시간입니다. 전체 구조는 간단하지만 세부 구조가 좀 까다로워 졌습니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
피그마 구도에 맞게 틀을 잡아줍니다.
{
<body>
<div id="textType03" class="section tex__wrap nexon">
<h2>스터디 후기</h2>
<p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다.</p>
<div class="text__inner container">
<article class="text__box">
<p class="desc">
불과 3달전만해도 여러 원인들로 인해 자
존감이 밑바닥이였던 저에게 이 스터디는
너무 소중한 시간이었어요. 매일 마음속
으로 울고싶다를 외쳤던 저였는데 이제는
조금이나마 이겨 낼 수 있을 것 같네요.
다음에 선생님 만났을 때는 많이 발전해
있는 제가 되었으면 좋겠네요...
</p>
<div class="big">
<figure class="img">
<img src="img/img_bg03_01.png" alt="메시지">
</figure>
<div class="small">
<h3 class="small__h">이태용</h3>
<figure class="star">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
</figure>
</div>
<p class="web">웹스 24기</p>
</div>
<div class="more">
<a href="#">자세히 보기</a>
</div>
</article>
<article class="text__box">
<p class="desc">
진심 학교나 학원보다 더 많이 배운거라
고 생각하고, 무지하고, 말안듣고 자존감
바닥인 저를 팩폭도 해주시고, 버리지 않
아주셔서 감사...합니다 쌤!!!
회사에서 잘리지않고... 존버하겠습니
다!!!
</p>
<div class="big big2">
<figure class="img">
<img src="img/img_bg03_02.png" alt="메시지">
</figure>
<div class="small">
<h3 class="small__h">이희진</h3>
<figure class="star">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_starX.png" alt="별X">
</figure>
</div>
<p class="web">웹스 24기</p>
</div>
<div class="more more2">
<a href="#">자세히 보기</a>
</div>
</article>
<article class="text__box">
<p class="desc">
제가 게을러서 의도치않게 자꾸 말을 안
듣는 학생이 되었었지만 정말 선생님 말
씀 틀린거 하나 없었다는거 잘 알고있
습니다...ㅎㅎ
아 그리고 마지막 하고 싶은 말은 저 새
벽 5~6시에 자는 ㄹㅇ올빼미형인간인
데.. 쌤이랑 두달 공부했다고...
</p>
<div class="big big2">
<figure class="img">
<img src="img/img_bg03_03.png" alt="메시지">
</figure>
<div class="small">
<h3 class="small__h">정승연</h3>
<figure class="star">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
<img src="img/img_bg03_star.png" alt="별">
</figure>
</div>
<p class="web">웹스 24기</p>
</div>
<div class="more more2">
<a href="#">자세히 보기</a>
</div>
</article>
</div>
</div>
</body>
}
03. CSS
피그마 수치대로 CSS를 입혀줍니다.
{
/* fonts */
@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: 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;
}
/* textType03 */
body {
background-color: #DDDBF6;
}
.text__inner {
display: flex;
justify-content: space-between;
}
.text__box {
width: 373px;
background-color: #fff;
padding: 20px;
position: relative;
height: 335px;
}
.text__box:nth-child(1) {
margin-right: 20px;
}
.text__box:nth-child(2) {
margin-right: 20px;
}
.desc {
font-size: 18px;
line-height: 1.4;
font-weight: 300;
color:#666;
margin-bottom: 37px;
}
.img {
width: 53px;
height: 53px;
margin-right: 13px;
margin-bottom: 40px;
}
.star {
width: 15px;
height: 15px;
display: flex;
}
.starX {
width: 15px;
height: 15px;
}
/* a div로 감싸주기 안감싸면 글자크기대로 상자 늘어남 */
.more {
width: 132px;
height: 30px;
border-radius: 50px;
background-color: #3D73FF;
text-align: center;
line-height: 30px;
position: absolute;
right: 115px;
}
.more a {
color: #fff;
}
.big {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.web {
margin-left: 4px;
font-size: 16px;
font-weight: 300;
padding-top: 8px;
color: #666;
}
.small__h {
margin-bottom: 10px;
font-size: 24px;
font-weight: 400;
}
.more2 {
position: absolute;
bottom: 20px;
}
.big2 {
position: absolute;
bottom: 50px;
}
}
댓글