텍스트 타입 02
이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다.
Site HTML
사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
section내에 각 태그에 이름을 부여해줍니다.
<section id="textType" class="text__wrap gmark section">
<div class="container text__inner">
<div class="main">
<div class="t_desc">
<h3 class="h3box">About us</h3>
<h2>Steady<br>Every Wear</h2>
<p>지속적인 가치를 지닌 라이프 스타일 제품<br>을 만들기 위해 노력합니다.</p>
</div>
</div>
<div class="aside">
<article class="text">
<div class="one01">
<figure class="circle">
<img src="img/Dribbble.svg" alt="Dribbble">
</figure>
</div>
<div class="desc">
<h2>Brand</h2>
<p>
디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다.
브랜드의 플랫폼을 통해 영감을 줍니다.
</p>
</div>
</article>
<article class="text">
<div class="one02">
<figure class="circle">
<img src="img/Twiiter.svg" alt="Twiiter">
</figure>
</div>
<div class="desc">
<h2>Tpo</h2>
<p>
디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다.
브랜드의 플랫폼을 통해 영감을 줍니다.
</p>
</div>
</article>
<article class="text">
<div class="one03">
<figure class="circle">
<img src="img/Instagram.svg" alt="Instagram">
</figure>
</div>
<div class="desc">
<h2>원단</h2>
<p>
디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다.
브랜드의 플랫폼을 통해 영감을 줍니다.
</p>
</div>
</article>
<article class="text">
<div class="one04">
<figure class="circle">
<img src="img/YouTube.svg" alt="YouTube">
</figure>
</div>
<div class="desc">
<h2>ADVOCACY</h2>
<p>
디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다.
브랜드의 플랫폼을 통해 영감을 줍니다.
</p>
</div>
</article>
</div>
</div>
</section>
Site CSS
사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다.
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: "GmarketSans";
font-weight: 500;
}
/* 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;
}
/* textType02 */
.text__inner {
display: flex;
}
.main {
margin-right: 58px;
}
.t_desc > h3 {
font-size: 18px;
margin-bottom: 10px;
padding: 6px 45px 6px 45px;
}
.t_desc > h2 {
font-size: 50px;
font-weight: bold;
margin-bottom: 20px;
}
.t_desc > p {
font-size: 18px;
color: #666;
}
.h3box {
width: 90px;
border-radius: 25px;
background: #000a67;
color: #ffffff;
text-align: center;
}
.aside {
width: 767px;
height: 428px;
display: flex;
flex-wrap: wrap;
}
.text {
width: 320px;
height: 194px;
margin-right: 30px;
}
.circle {
width: 24px;
height: 24px;
padding: 18px;
margin-top: 5px;
margin-bottom: 5px;
}
.desc > h2 {
margin-bottom: 20px;
}
.desc > p {
font-weight: 300;
}
.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;
}
댓글