728x90
Text Type page 만들기
텍스트 유형 페이지란, 주로 텍스트로 구성된 웹 페이지를 의미합니다.
텍스트 페이지는 텍스트와 함께 이미지, 동영상, 그래프, 표 등 다양한 요소를 포함할 수 있으며, 정보를 제공하거나, 커뮤니케이션을 위한 목적으로 사용됩니다.
또한, 텍스트 페이지는 다른 매체에 비해 작성과 유지보수 비용이 낮아 비용 효율적입니다.
다음과 같은 텍스트 페이지를 만들어보겠습니다.
코드블럭
<!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;
color: #000;
}
.mt0 {margin-top: 0px !important;}
.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;}
.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: #ff7c7c;
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;
line-height: 25px;
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: #ce3939;
background-image: url(../asset/img/textType01_01.svg);
position: absolute;
background-repeat: no-repeat;
background-position: center;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #F8B8E2;
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #D0B6F1;
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #F48989;
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #F3E19F;
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #BBF4BE;
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #9FDAF5;
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);
}
</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">오사카에서는 '톤코츠 라멘(Tonkotsu Ramen)'이 유명합니다. 돼지 뼈와 고기 등을 오랫동안 끓여 깊은 맛을 낸 스프에, 탄탄면을 넣어 먹습니다.</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">'츠네오'는 1675년부터 이어져 온 오사카에서 가장 오래된 찻집 중 하나입니다. 경치가 아름다운 가든에서 일본 전통차와 전통간식을 함께 즐길 수 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
</body>
</html>
코드설명
| background-image: url(../asset/img/textType01_03.svg); | 상대적 URL을 사용하여 요소의 배경 이미지를 설정합니다 |
| <section class="text__wrap section center nexon"> | 다음 코드에서 "center" 클래스는 해당 요소를 수평 가운데로 정렬하고,"nexon" 클래스는 해당 박스에 폰트값을 적용시켜 줍니다. |
| transform: rotate(360deg); | 요소를 회전시키는 효과를 줍니다. "transform" 속성은 요소의 변환을 지정하는 데 사용되며, "rotate" 함수는 요소를 지정된 각도만큼 회전시킵니다. "360deg"를 지정하면 요소를 360도 회전시켜줍니다. |
| href="#" | HTML에서 하이퍼링크를 클릭했을 때 해당 페이지의 상단으로 이동하도록 지정된 링크입니다. '#'은 현재 페이지의 최상단을 나타내는 '북마크'를 가리키는 것이며, 이렇게 작성된 링크를 클릭하면 현재 페이지의 상단으로 스크롤됩니다. |
| text-decoration: none | 텍스트의 장식(underline, overline, line-through)을 제거하는 역할입니다. 이 속성은 <a> 태그와 같은 하이퍼링크를 스타일링할 때 자주 사용됩니다. 하이퍼링크를 클릭할 때 해당 링크가 밑줄로 나타나는 것은 기본적인 브라우저 스타일이기 때문입니다. 하지만 text-decoration: none;을 사용하면 하이퍼링크의 밑줄을 제거할 수 있습니다. |
간단복습
" class와 id "
class는 여러 개의 요소가 동일한 스타일 또는 동작을 공유할 때 사용됩니다. 예를 들어, <p> 태그의 모든 요소에 대해 동일한 스타일을 적용하려면 모든 <p> 태그에 대해 동일한 class를 지정할 수 있습니다. 또한, 자바스크립트와 CSS에서 class를 사용하여 특정 요소를 선택하고 스타일을 적용하거나 동작을 추가할 수 있습니다.
id는 문서 내에서 특정 요소를 식별하고 선택할 때 사용됩니다. id는 고유한 값이어야 하며, 문서 내에서 단 한 번만 사용될 수 있습니다. 예를 들어, <div> 요소에 id="header"를 지정하여 문서 내에서 해당 요소를 식별하고 선택할 수 있습니다. CSS나 자바스크립트에서 id를 사용하여 해당 요소를 선택하고 스타일을 적용하거나 동작을 추가할 수 있습니다.
따라서, class는 여러 요소가 공유하는 스타일과 동작을 지정하고, id는 문서 내에서 특정 요소를 고유하게 식별하고 선택하는 데 사용됩니다.