오늘은 텍스트 타입의 레이아웃을 만들어보겠습니다~!!
텍스트 유형 페이지 만들기
피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.
기본 CSS 리셋값 설정해주기
CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??
<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;
text-align: center;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff4191;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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;
}
</style>텍스트 섹션 구성해주기
<body>
<section 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">오드퍼퓸(EDP)</h3>
<p class="text__desc">오드퍼퓸(EDP)은 향수의 농도가 가장 높은 제품 중 하나로, 향수 성분의 농도가 약 15-20% 정도입니다. 따라서, 오드퍼퓸은 다른 향수에 비해 더 진하고 집중적인 향을 가지며, 오래 지속됩니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">오드코롱(EDC)</h3>
<p class="text__desc">오드코롱(Eau de Cologne)은 가장 가벼운 향수 중 하나이며, 향수 성분의 농도는 일반적으로 2-5% 정도입니다. 오드코롱은 보통 상쾌하고 가벼운 향을 가지고 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">오드파르펨(EDP)</h3>
<p class="text__desc">오드파르펨(Eau de Parfum)은 오드투왓과 오드퍼퓸 사이의 향수 등급으로, 일반적으로 향수 성분의 농도는 약 10-15% 정도입니다.오드파르펨은 보통 일상적인 사용에 적합합니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">오드투왓(EDT)</h3>
<p class="text__desc">오드투왓(EDT)은 향수의 농도가 높은 제품 중 하나이며, 오드퍼퓸보다는 더 가벼운 향을 가지고 있습니다. 일반적으로, 향수 성분의 농도는 약 5-15% 정도입니다.</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">코롱(Cologne)</h3>
<p class="text__desc">코롱은 오드코롱과 비슷한 의미로 사용되지만, 보통 향수 성분의 농도가 더 낮은 제품을 일컫습니다. 따라서, 코롱은 보통 더 가벼운 향을 가지고 있으며, 지속력도 상대적으로 짧습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
</body>text__inner를 정해준 뒤, 텍스트 안에 들어가는 정보들을 넣어줍니다. text t1~t6 이름을 정해준뒤 title, desc, btn 등등 구역을 나누어준 뒤 텍스트를 입력해줍니다.
구조를 잘 짜주기만 해도 소스가 깔끔하고 CSS도 설정해주기 편해집니당 >__<!
텍스트 구역 CSS 설정해주기
/* text__wrap */
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__inner .text {
width: 32.33333%;
border: 1px solid #f5f5f5;
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: #f5f5f5;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-color: #ff7878;
background-image: url(../asset/img/textType01_01.svg);
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: rgba(247, 227, 109, 0.3);
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: rgba(141, 255, 51, 0.2);
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: rgba(247, 109, 217, 0.2);
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: rgba(72, 87, 236, 0.2);
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: rgba(255, 51, 52, 0.2);
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: rgba(51, 255, 206, 0.2);
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 0.3s;
}
.text__btn:hover::before {
transform: rotate(360deg);
}이번엔 각각 텍스트 구역에 있는 아이콘들이 있기 때문에 아이콘을 svg파일로 저장해 넣어줍니다. 그리고 가상요소를 통해 위치를 지정해줍니다. 또한, 버튼을 눌렀을 때 애니메이션 효과를 주기 위해 transform을 설정해줍니다.
CSS 사전
| text-align | 속성은 텍스트 정렬 방식을 설정합니다. |
|
vertical-align
|
인라인 요소의 수직 정렬 방법을 설정하는 속성입니다. |
| justify-content | CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다. |
|
background-repeat
|
배경 이미지의 반복 여부를 지정하는 속성입니다. |
| background-position | 배경 이미지의 위치를 지정하는 속성입니다. |
|
background-image
|
요소의 배경 이미지를 설정하는 속성입니다. |
|
display
|
요소의 표시 방법(display method)을 설정하는 속성입니다. |
완성된 페이지와 링크
다른 유형의 페이지 보러가기
카드 유형 : https://duektmf34.tistory.com/32
이미지 유형 : https://duektmf34.tistory.com/37
이미지텍스트 유형 : https://duektmf34.tistory.com/42
슬라이드 유형 : https://duektmf34.tistory.com/43
배너 유형 : https://duektmf34.tistory.com/59
푸터 유형 : https://duektmf34.tistory.com/53
728x90
반응형
