728x90
반응형
텍스트 유형 페이지 만들어보기!!
이미지 유형 : https://dongjin6539.tistory.com/28
카드 유형 : https://dongjin6539.tistory.com/31
이미지/텍스트 유형 : https://dongjin6539.tistory.com/39
슬라이드 유형 : https://dongjin6539.tistory.com/40
헤더 유형 : https://dongjin6539.tistory.com/44
푸터 유형 : https://dongjin6539.tistory.com/49
지난 번에 이어 또다른 페이지를 만들어보았습니다.
지난 번과 같은 방식으로 시작해보겠습니다.
<!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%;
}
.blind{
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.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.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #FF0000;
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;
}
/* text__wrap */
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__inner .text {
width: 32.3333%;
border: 1px solid #f5f5f5;
padding: 90px 20px 20px 20px;
box-sizing: border-box;
margin-bottom: 20px;
border-radius: 10px;
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: #ccc;
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(235, 0, 255, 0.2);
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: rgba(25, 255, 21, 0.2);
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: rgba(0, 236, 251, 0.2);
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: rgba(252, 242, 0, 0.2);
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: rgba(252, 0, 0, 0.2);
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: rgba(0, 41, 255, 0.2);
background-image: url(../asset/img/textType01_06.svg);
}
.text__title {
font-size: 24px;
margin-bottom: 16px;
}
.text__desc {
font-size: 16px;
color: #666;
margin-bottom: 16px;
line-height: 1.5;
}
.text__btn {
float: right;
position: relative;
padding-right: 20px;
}
.text__btn::before {
content: '';
position: absolute;
right: 0;
bottom: 2px;
width: 15px;
height: 15px;
background-image: url(../asset/img/icon_plus.svg);
transition: all 0.3s;
}
.text__btn:hover::before {
transform: rotate(360deg);
}
</style>
</head>
<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">의지력</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">운동을 하면서 목표를 설정하고 그에 맞는 운동 계획을 세우는 것이 중요합니다. 목표를 설정하면 운동에 대한 동기부여가 생기고, 계획을 세우면 효과적인 운동이 가능합니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
</body>
</html>
방법
- 지난번에 했던 이미지 유형 페이지 의 글꼴과 style 태그의 /* reset */, /* commom */ 에 해당하는 부분은 모든 페이지의 공용으로 사용하기 때문에 그대로 가져왔습니다. 다만, 추가로 바꿔야 할게 있으면 모든 페이지에 추가를 해줘야 합니다.
- 지나번 페이지 만드는 방법과 매우 흡사합니다.
- 지난번에 추가로 줬던 /* commom */ 부분에 "section.center" 스타일을 텍스트 유형에도 사용할거기 때문에 body 태그의 section 태그에 "text__wrap section center nexon"으로 class 명을 입력해줍니다.
- body 태그로 넘어가서 class명이 "container" 안에 자식으로 자신이 원하는 notice라는 글을 입력하기 위해서 span 태그와 제목 h2 태그를 사용해 입력해줍니다.
- span 태그와 h2 태그에 class 명을 각각 "section__small", "section__h2 mb70"으로 입력해줍니다. 여기서 h2 태그에 전과 다르게 mb70을 준 이유는 이번 유형에서와 다른 유형에서 스타일이 다르기 때문에 지난 유형에서 추가로 입력했던 스타일 margin-top, margin-bottom을 사용했습니다.
- style 태그로 넘어가서 "section__small"에 대한 알맞은 스타일을 입력해줍니다.
- body 태그로 넘어가서 "container" class의 자식으로 "text__inner" class를 만들고 또 그의 자식으로 div 태그 6개를 사용해서 각각 "text t1", "text t2", "text t3", "text t4", "text t5", "text t6"을 만들어 줍니다.
- 또 그의 자식으로 각각 h3 태그, p 태그, a 링크 태그를 사용해서 만들어주고 각각 class명을 "text__title", "text__desc", "text__btn"을 입력해줍니다. 그리고 각각 들어갈 글을 입력해줍니다.
- style 태그로 넘어가서 "text__inner", "text__inner .title", "text__title", "text__desc", "text__btn" 각각 알맞은 스타일을 입력해줍니다.
- 추가로 "text__inner .title" 부분에 마우스를 가져다대면 박스 색상이 바뀌는 스타일을 주기 위해서 :hover 속성을 사용해서 배경색 색을 입력해줍니다.
- 효과를 부드럽게 주기 위해서 추가로 transition 속성을 사용해 알맞은 값을 주고 cursor 속성으로 값을 입력해줍니다.
- "text__inner .title" 부분에 아이콘을 넣기 위해 ::before 속성을 사용해서 width, height, 배경색 값을 주고 border-radius 속성으로 알맞은 값을 주고 아이콘 이미지를 스케치를 사용했던 피그만 앱에서 svg 유형 폴더로 가지고 옵니다.
- 가지고 온 폴더를 background-image 속성을 사용해 url( )로 폴더의 위치를 입력해줍니다. 그러면 아이콘 이미지가 반복되서 나오기 때문에 background-repeat 속성을 사용해 no-repeat; 값을 줘서 반복을 없애주고 background-position 속성을 사용해 center; 값을 줘서 가운데 정렬로 해줍니다.
- 아이콘 이미지의 위치를 원하는 위치에 가지고 오기 위해서 position: absolute; 를 주고 left와 top 값을 알맞게 줍니다. 그리고 position의 기준점을 주기 위해서 "text__inner .title" 부분에 position: relative; 를 줍니다.
- 다음 각각 다른 아이콘 이미지를 주기 위해서 "text__inner .title t1", "text__inner .title t2", "text__inner .title t3", "text__inner .title t4", "text__inner .title t5", "text__inner .title t6" 부분에 ::before 을 사용해 각각 알맞는 배경색과 background-image: url( )로 폴더의 위치를 입력해줍니다.
- 다음 "text__btn" 부분에도 아이콘 이미지를 가지고 오기 위해 똑같이 작성해주고 위치를 정하기 위해 right, bottom 값만 다르게 입력해주고 폴더의 위치를 입력해줍니다.
- "text__btn" 부분의 아이콘 이미지에도 마우스를 갖다대면 한바퀴 돌아가는 효과를 주기 위해서 transform: rotate(360deg); 를 입력해줍니다.
- 그러면 원하는 웹 페이지가 만들어집니다.
참고
- 아직 잘 모르는 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| transform | 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. |
| transition | 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. |
| :hover | 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. |
| cursor | 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다. |
| border-radius | 요소의 외부 테두리 가장자리 모서리를 둥글게 만듭니다. |
| ::before | 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. |
| text-transform: uppercase; | 요소의 텍스트를 대문자로 표시하는 방법을 지정합니다. |
- 이해가 안됐을 경우 이용해 보세요!!
728x90
반응형
