QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
텍스트 유형이란?
텍스트 유형 사이트는 텍스트가 주요 콘텐츠인 웹 사이트를 말합니다. 이러한 사이트는 주로 글을 중심으로 정보를 제공하고, 이미지나 동영상보다는 텍스트를 통해 정보를 전달합니다.
예를 들어, 뉴스 사이트나 블로그, 정부 기관의 법률정보 제공 사이트, 학술지 등이 텍스트 유형 사이트에 해당합니다. 이러한 사이트에서는 텍스트가 핵심 콘텐츠이기 때문에, 텍스트의 품질과 내용의 신뢰성이 중요합니다.
텍스트 유형 사이트는 디자인적인 요소나 그래픽보다는 정보 전달에 중점을 둔 사이트이기 때문에, 디자인이 간결하고 직관적인 것이 좋습니다. 또한, 검색 엔진 최적화(SEO)를 고려하여, 텍스트의 키워드 사용과 구성 등이 중요합니다.
텍스트 유형 장점
- 정보 전달에 뛰어남 : 텍스트가 핵심 콘텐츠이기 때문에, 정보 전달에 높은 효율성을 가집니다. 이미지나 동영상으로 전달하기 어려운 내용도 텍스트를 통해 명확하게 전달할 수 있습니다.
- 검색 엔진 최적화(SEO)에 유리 : 검색 엔진은 텍스트를 기반으로 검색 결과를 제공합니다. 텍스트 유형 사이트는 키워드를 적절히 활용하여 검색 엔진 최적화(SEO)를 할 수 있어, 검색 결과 상위에 노출될 가능성이 높습니다.
- 접근성이 높음 : 텍스트는 스크린 리더 등의 보조기기를 통해 시각장애인이나 저시력자도 쉽게 접근할 수 있습니다. 또한, 텍스트는 다양한 기기와 브라우저에서도 잘 표시되기 때문에, 접근성이 높습니다.
- 용량이 작음 : 텍스트는 이미지나 동영상보다 용량이 작기 때문에, 사이트의 로딩 속도가 빠르며, 대역폭도 적게 소모됩니다.
- 비용이 적음 : 텍스트를 중심으로 구성된 사이트는 이미지나 동영상 등과 달리 제작 비용이 적게 듭니다. 또한, 텍스트를 기반으로한 사이트는 유지보수 비용도 적게 듭니다.
텍스트 유형 페이지
텍스트 유형 페이지 코드
<!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;
}
.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: #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;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* text__wrap */
.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: #f5f5f5;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-color: #ce9393;
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(247, 109, 217, 0.2);
background-image: url(../asset/img/textType01_02.svg);
}.text__inner .text.t3::before {
background-color: rgba(51, 255, 206, 0.2);
background-image: url(../asset/img/textType01_03.svg);
}.text__inner .text.t4::before {
background-color: rgba(141, 255, 51, 0.2);
background-image: url(../asset/img/textType01_04.svg);
}.text__inner .text.t5::before {
background-color: rgba(72, 87, 236, 0.2);
background-image: url(../asset/img/textType01_05.svg);
}.text__inner .text.t6::before {
background-color: rgba(255, 51, 52, 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);
}
</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">비엔나커피(Vienna coffee)</h3>
<p class="text__desc">비엔나커피는 에스프레소 2샷 위에 풍부한 휘핑크림을 얹고 코코아 가루를 뿌린 에스프레소 커피입니다. 그리고 손잡이가 있는 긴 유리잔을 사용해서 마십니다. 비엔나에서 우리가 비엔나커...</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
</body>
</html>
페이지를 만들면서 들어가는 icon들을 jpg가 아닌 svg로 저장했습니다.
그래서 jpg와 svg 차이점을 이번에 찾아봤는데 아래와 같은 차이점이 있었습니다.
| jpg | svg |
| 래스터 이미지 | 벡터 이미지 |
| 픽셀로 구성되어서 이미지 크기를 키우면 화질이 떨어짐 | 선,곡선 등의 수학적인 표현으로 이미지를 만들어서 화질이 깨지지 않음 |
| 파일 크기가 작음 | 파일 크기가 큼 |
| 사진, 그림과 같은 복잡한 이미지에 적합 | 아이콘 및 로고와 같은 단순한 이미지에 적합 |
| 색상이 부드럽고 자연스러운 이미지에 적합 | 간단한 글래픽 요소에 적합 |
| 이미지 편집 X : 픽셀이기 때문에 편집하면 화질이 떨어짐 | 이미지 편집 O : 수학적으로 정의되어 있어서 크기와 색상 등을 쉽게 변경할 수 있음 |
페이지 제작 공통 CSS
다른 페이지를 제작할 때도 공통으로 사용한 CSS입니다.
(하나의 페이지에 추가할 것이 있으면 모든 페이지에 추가를 해줘야 함.)
<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;
}
.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: #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;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* text__wrap */
.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: #f5f5f5;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-color: #ce9393;
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(247, 109, 217, 0.2);
background-image: url(../asset/img/textType01_02.svg);
}.text__inner .text.t3::before {
background-color: rgba(51, 255, 206, 0.2);
background-image: url(../asset/img/textType01_03.svg);
}.text__inner .text.t4::before {
background-color: rgba(141, 255, 51, 0.2);
background-image: url(../asset/img/textType01_04.svg);
}.text__inner .text.t5::before {
background-color: rgba(72, 87, 236, 0.2);
background-image: url(../asset/img/textType01_05.svg);
}.text__inner .text.t6::before {
background-color: rgba(255, 51, 52, 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);
}
</style>
속성 참고!
| 속성 | 속성 설명 |
| transform | 요소의 위치, 크기, 회전, 기울기 등을 변경할 수 있습니다. |
| font-weight | 글꼴의 두께를 지정하는 데 사용됩니다. |
| vertical-align | 인라인 요소의 수직 정렬을 지정하는 데 사용됩니다. |
| line-height | 줄간격(line spacing)을 지정하는 데 사용됩니다. normal : 브라우저에서 설정한 기본 값으로, 보통 폰트의 크기와 같은 값을 가집니다. |
| justify-content | flex 컨테이너 내부의 flex 아이템들을 수평 방향으로 정렬하는 속성입니다. 이 속성은 flex-direction 속성이 row로 설정되어 있을 때 적용됩니다. |
| cursor | 마우스 커서의 모양을 지정하는 속성입니다. |
반응형
