웹 사이트를 설정할 때 텍스트 영역은 매우 중요합니다.
텍스트 영역은 사용자가 사이트에서 읽을 수 있는 모든 텍스트가 포함된 영역을 의미합니다.
주요 텍스트 영역은 다음과 같습니다.
헤더: 사이트 상단의 영역에 로고, 메뉴, 제목 등의 텍스트가 포함되어 있습니다.
바닥글: 사이트 하단의 영역에 저작권 정보, 연락처 등의 텍스트가 포함되어 있습니다.
본문: 머리글과 바닥글 사이에 위치하는 중요한 텍스트 영역으로 사이트의 중요한 정보를 포함합니다.
사이드바(Sidebar): 주요 본문 영역 옆에 위치한 영역으로 추가 정보나 링크 등이 포함됩니다.
모달 창: 페이지에서 팝업 형식으로 떠 있는 작은 창으로 주로 사용자에게 추가 정보와 알림을 제공하는 데 사용됩니다.
인기글
이러한 텍스트 영역은 HTML과 CSS를 사용하여 설계되었으며 JavaScript를 사용하여 대화형 기능을 추가할 수 있습니다.
예를 들어 JavaScript를 사용하여 텍스트가 표시되고 사라지는 애니메이션 효과를 적용하거나 사용자가 스크롤할 때 텍스트가 자동으로 표시되는 등의 동적 기능을 추가할 수 있습니다.
먼저 피그마를 이용하여 만들고 싶은 사이트 이미지를 만들고 이 이미지를 기반으로 코드를 적어 사이트를 만듭니다.
우선 html 코드입니다.
<!
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">
</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">사막여우는 일반적으로 넓은 지역에서 자유롭게 움직일 수 있어야 하며, 적어도 3-4평방미터의 공간이 필요합니다.
쾌적한 환경을 필요로 합니다.
</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>
section 태그의 이름은 text__wrap라는 클래스명으로 지정했습니다.
section 태그 아래
text__inner 의 아이로서 t1, t2, t3, t4, t5, t6 의 div 태그를 만들어 text 의 내용을 써 주었습니다.
a href=”#” 태그는 나중에 링크를 링크하고 다른 페이지로 이동하기 위해 남아 있습니다.
style 코드입니다.
<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 {
background-color: rgba(12, 209, 174, 0.64);
font-size: 14px;
border-radius: 50px;
color: black;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
padding: 1px 23px;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 1.5;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* text__wrap */
.text__wrap {}
.text__inner {
text-align: left;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.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: #af2222;
background-image: url(../asset/img/textType01_01.svg);
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #EACEA4;
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #2EADAD;
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #FFA726;
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #2542DC;
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #12F086;
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #EF324A;
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>때로는 CSS가 이상하게 적용될 수 있습니다.
제 경우에는 상자와 상자 사이에 틈이 없습니다.
f12를 누릅니다.
개발자 tool 확인해 보면 사용자 에이전트 스타일 시트 dispaly : block이 적용되었으므로 display : flex와
justify-content: space-between 속성이 적용되지 않는 문제가 발생했습니다.
이 문제를 해결하기 위해 Google을 사용한 결과 reset css가 올바르지 않으면 발생하는 문제임을 확인했습니다.
reset 영역의 내 코드를 다른 사람과 비교해 보면 img 태그에 width:100%를 삭제하지 않았습니다.
사용자 에이전트 스타일 시트는 사용자가 명시해야하는 속성을 override하지 않거나, DOCTYPE html> 등으로 html 파일에서 html의 최신 버전을 모르고 브라우저가 임의로 설정해 둔 것으로 한마디로 말하면 브라우저별로 결정한 CSS의 기본 규칙 라고 생각하면 됩니다.
reset css를 사용하여 디자인을 초기화하고 개발하는 습관이 있다면 이러한 문제에 직면하지 않습니다.
공통 영역은 다른 페이지를 만들 때도 공통으로 사용하는 부분입니다.
🤞css 속성을 다시 배우기
position: relative : 이 property를 적용하면(자), 그 요소의 위치가 문서 플로우내의 원의 위치에 근거해 상대적으로 이동합니다.
vertical-align: top : 인라인 요소(inline element)나 테이블 셀(table cell) 등의 수직 정렬 방식을 지정하기 위해서 사용됩니다.
이 속성을 적용하면 요소가 상위 요소의 맨 위에 위치하도록 정렬됩니다.
display: inline-block : 요소가 인라인 레벨 요소와 블록 레벨 요소의 특성을 모두 갖도록 하는 데 사용됩니다.
flex-wrap: wrap : flex 컨테이너(flex container)의 플렉스 아이템 (flex item)이 1 행에 모두 표시되지 않는 경우, 다음의 행으로 진행하는 것을 지정하기 위해서 사용됩니다.
background-repeat: no-repeat: 배경 이미지의 반복을 금지하는 데 사용됩니다.
이 속성을 사용하면 배경 이미지가 한 번만 표시되며 반복되지 않습니다.
position: absolute : 요소의 위치를 문서 플로우로 부모 요소에 근거해 절대로 지정하기 위해서 사용됩니다.
이 속성을 사용하면 해당 요소가 있는 가장 가까운 상위 요소를 기반으로 위치를 지정하고 문서 흐름에서 위치를 이동할 수 있습니다.
transform: rotate(360deg) : 요소를 360도 회전시키는 데 사용됩니다.
이 속성은 2D 변환을 처리하고 요소를 회전시키는 데 사용됩니다.
