728x90
텍스트 유형 레이아웃 웹 페이지 만들기
수업 시간에 위와 같은 텍스트 유형 레이아웃을 똑같이 웹 페이지로 구현해 보았습니다.
<!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>
* {
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;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #0083FD;
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.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-repeat: no-repeat;
background-position: center;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #B9D1FF;
background-image: url(../assets/image/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #B9EEFF;
background-image: url(../assets/image/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #FFB9CA;
background-image: url(../assets/image/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #F5FFB9;
background-image: url(../assets/image/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #CBFFB9;
background-image: url(../assets/image/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #F5B9FF;
background-image: url(../assets/image/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(../assets/image/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 href="#" class="text__btn">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">충분한 사랑과 관심</h3>
<p class="text__desc">고양이는 충분한 사랑과 관심이 필요합니다. 주인의 사랑과 관심이 고양이의 건강과 행복에 큰 영향을 미칩니다. 따라서 일정한 시간을 투여하여 관심과 사랑을 나눠주어야 합니다..</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">적절한 먹이 제공</h3>
<p class="text__desc">고양이는 적절한 먹이를 제공해야 합니다. 고양이의 나이, 체중, 건강 상태 등을 고려해 알맞은 양의 먹이를 제공하고, 식습관도 지속적으로 관찰하며 필요에 따라 조정해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">적절한 운동과 활동</h3>
<p class="text__desc">고고양이는 적절한 운동과 활동을 해야 합니다. 고양이 산책용 끈을 이용하여 집 주변을 돌아다니게 하거나, 장난감으로 놀아주는 등 다양한 방법으로 활동을 유도해야 합니다.
</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">스크래칭 포스트 제공</h3>
<p class="text__desc">고양이는 스크래칭을 하기 때문에 스크래칭 포스트를 제공해주어야 합니다. 스크래칭 포스트를 이용하면 가구 등을 파손하지 않고 고양이가 스크래칭을 할 수 있습니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">예방접종과 내부 구충</h3>
<p class="text__desc">고양이의 건강을 유지하기 위해서는 예방접종과 내부 구충을 꼭 시켜야 합니다. 수의사의 조언에 따라 필요한 예방접종과 내부 구충을 받게 해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
</div>
</div>
</section>
</body>
</html>
만드는 방법 풀이
body
<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 href="#" class="text__btn">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">충분한 사랑과 관심</h3>
<p class="text__desc">고양이는 충분한 사랑과 관심이 필요합니다. 주인의 사랑과 관심이 고양이의 건강과 행복에 큰 영향을 미칩니다. 따라서 일정한 시간을 투여하여 관심과 사랑을 나눠주어야 합니다..</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">적절한 먹이 제공</h3>
<p class="text__desc">고양이는 적절한 먹이를 제공해야 합니다. 고양이의 나이, 체중, 건강 상태 등을 고려해 알맞은 양의 먹이를 제공하고, 식습관도 지속적으로 관찰하며 필요에 따라 조정해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">적절한 운동과 활동</h3>
<p class="text__desc">고고양이는 적절한 운동과 활동을 해야 합니다. 고양이 산책용 끈을 이용하여 집 주변을 돌아다니게 하거나, 장난감으로 놀아주는 등 다양한 방법으로 활동을 유도해야 합니다.
</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">스크래칭 포스트 제공</h3>
<p class="text__desc">고양이는 스크래칭을 하기 때문에 스크래칭 포스트를 제공해주어야 합니다. 스크래칭 포스트를 이용하면 가구 등을 파손하지 않고 고양이가 스크래칭을 할 수 있습니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">예방접종과 내부 구충</h3>
<p class="text__desc">고양이의 건강을 유지하기 위해서는 예방접종과 내부 구충을 꼭 시켜야 합니다. 수의사의 조언에 따라 필요한 예방접종과 내부 구충을 받게 해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
</div>
</div>
</section>
</body>가장 큰 제목 부분에 mb70은 margin bottom 70을 주기 위해 넣었습니다.
notice부분을 만들고 각각 텍스트들의 제목과 설명부분을 만들어주고 더보기 버튼을 만들어줍니다.
style
/* 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-repeat: no-repeat;
background-position: center;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #B9D1FF;
background-image: url(../assets/image/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #B9EEFF;
background-image: url(../assets/image/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #FFB9CA;
background-image: url(../assets/image/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #F5FFB9;
background-image: url(../assets/image/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #CBFFB9;
background-image: url(../assets/image/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #F5B9FF;
background-image: url(../assets/image/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(../assets/image/icon_plus.svg);
transition: all 0.3s;
}
.text__btn:hover::before {
transform: rotate(360deg);
}text inner
전체 텍스트 상자들 부분에 글자들을 왼쪽 정렬을 하고 display:flex를 줍니다.
그 다음 flex-wrap:wrap;을 줍니다.
text__inner .text
flex-wrap:wrap;은 플렉스 박스의 아이템들이 한 줄에 모두 표시되지 않을 경우 다음 줄로 넘어가는 방법을 결정하는 속성입니다.
justify-content:space-between;은 플렉스 아이템을 시작과 끝 부분에 정렬하지 않고, 중간에 공간을 만들어서 아이템들을 분산시키는 방법입니다.
텍스트 상자 전체 중 텍스트 부분에 여백과 테두리를 설정해줍니다.
transition을 주어 전체 부분에 배경색이 바뀌는 효과를 줄 수 있도록 하고 조금 더 부드럽고 자연스러운 효과를 주기 위해
0.3초로 설정해줍니다.
텍스트 상자에 마우스 커서를 대면 모양이 바뀌도록 cursor: pointer;를 줍니다.
text__inner .text::hover
마우스 커서를 대면 바뀔 배경색을 설정해줍니다.
text__inner .text::before
원이 들어갈 부분들의 크기와 위치를 설정해주고 아이콘이 가운데로 들어갈 수 있도록 설정해줍니다.
그 다음 부분들은 배경색을 넣고 아이콘 이미지를 따로 저장하여 넣어준 부분입니다.
그리고 제목과 설명들 부분의 설정,버튼 설정들에 대한 부분은 간단하므로 그냥 넘어가겠습니다.
.txt__btn:hover::before
더보기 옆 원형 버튼이 돌아가는 효과를 설정해준 것입니다.
deg는 돌아가는 각도를 뜻합니다.
텍스트 유형01
건강 검진 고양이는 매우 활발한 동물로서 외부세균과 바이러스에 노출될 가능성이 높습니다.새로운 고양이를 입양하면 즉시 수의사에게 건강 검진을 받게 해야 합니다. 더보기 충분한 사랑과
dkdlelw.github.io