SITE
텍스트 타입 03
코빈_
2022. 8. 31. 03:51
텍스트 타입 03
이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다.
Site HTML
사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다.
<section id="textType" class="text__wrap nexon section">
<h2>Review</h2>
<p>이용하신 분들에 후기입니다.</p>
<div class="text__inner container">
<article class="text">
<div class="text__body">
<p class="desc">
이 디자인 나쁘지 않은 것 같아요! 첨에는 살까 말까 망설여 졌는데 나쁘지도 않고 계속 입다보니깐 맘에 듭니다. 역시 믿고 사길 잘했네여!
</p>
</div>
<div class="desc2">
<figure class="circle">
<img src="img/Coffee.svg" alt="Coffee">
</figure>
<h2>
안현규
<img src="img/star.svg" class="star" alt="star">
</h2>
<p>지나가는 시민</p>
</div>
<div class="good">
<p>자세히 보기</p>
</div>
</article>
<article class="text">
<div class="text__body">
<p class="desc">
아 이번에 춤을 춰야하는데, 뭘 춰야 할 지... 이거 떨어질거라 생각을 못해봤는데, 시간을 다시 돌릴 수 있을까라고 생각을 해봅니다. 첫 데뷔를 이렇게 하다니 너무 좋네여!
</p>
</div>
<div class="desc2">
<figure class="circle">
<img src="img/Coffee.svg" alt="Coffee">
</figure>
<h2>
이강현
<img src="img/star.svg" class="star" alt="star">
</h2>
<p>마피아</p>
</div>
<div class="good">
<p>자세히 보기</p>
</div>
</article>
<article class="text">
<div class="text__body">
<p class="desc">
오오! 너무 맘에 들어요. 이거 사이즈도 너무 잘 맞고 인생 핏을 찾은 것 같습니다..!! 조아요!
</p>
</div>
<div class="desc2">
<figure class="circle">
<img src="img/Coffee.svg" alt="Coffee">
</figure>
<h2>
서지우
<img src="img/star.svg" class="star" alt="star">
</h2>
<p>조커</p>
</div>
<div class="good">
<p>자세히 보기</p>
</div>
</article>
</div>
</section>
Site CSS
사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 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: 70px;
}
.section > h3 {
font-size: 16px;
line-height: 1;
text-align: center;
margin-bottom: 10px;
text-decoration: underline;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* textType */
.text {
width: 346px;
height: 224px;
margin-bottom: 20px;
padding: 20px;
}
.text:hover {
background: #f1f1f1;
border-radius: 15px;
transition: all 0.3s ease-in;
}
.text__inner {
display: flex;
flex-wrap: wrap;
}
.circle {
width: 24px;
height: 24px;
padding: 18px;
}
.desc {
}
.desc > h2 {
font-size: 24px;
margin-bottom: 10px;
}
.desc > p {
font-size: 18px;
line-height: 1.4;
margin-bottom: 20px;
}
.one01 {
width: 60px;
height: 60px;
background: #FFFADD;
border-radius: 50%;
margin-bottom: 10px;
}
.one02 {
width: 60px;
height: 60px;
background: #DAFFEF;
border-radius: 50%;
margin-bottom: 10px;
}
.one03 {
width: 60px;
height: 60px;
background: #E4F2FF;
border-radius: 50%;
margin-bottom: 10px;
}
.one04 {
width: 60px;
height: 60px;
background: #FFE2E2;
border-radius: 50%;
margin-bottom: 10px;
}
.one05 {
width: 60px;
height: 60px;
background: #E1FAFF;
border-radius: 50%;
margin-bottom: 10px;
}
.one06 {
width: 60px;
height: 60px;
background: #FDEFFF;
border-radius: 50%;
margin-bottom: 10px;
}
.the {
text-decoration: underline;
}