다른 명언
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>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="JIN">
<meta name="description" content="JIN과 함께 만드는 사이트 튜토리얼 입니다.">
<meta name="keyword" content="JIN, 사이트, 사이트 만들기, 튜토리얼">
<meta name="robots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" href="assets/ico/favicon.png"/>
<!-- css -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="skip">
<a href="#">헤더(메뉴) 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지 / 텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">배너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>
<!-- skip -->
<header id="headerType">
<h1></h1>
</header>
<!-- headerType -->
<main id="mainType">
<section id="sliderType" class="nexon">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">event</span>
<h3 class="title">사막여우를 알아가는 사이트</h3>
<p class="desc">사막여우의 생태, 특징, 생활 습관, 보호 활동 등에 대한 정보를 제공하는 사이트 입니다. </p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">상담 신청</a>
</div>
</div>
<div class="slider__arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- sliderType -->
<section id="imageType" class="nexon section center gray">
<h2 class="section__h2">여우의 생활</h2>
<p class="section__desc">사막여우는 사막에서 생활 합니다.</p>
<div class="image__inner container">
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_01.jpg" alt="사막여우 ">
</figure>
<div class="image__body">
<h3 class="title">사막여우 털의 특징</h3>
<p class="desc">털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며,<br>
눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="사막 여우의 서식처">
</figure>
<div class="image__body">
<h3 class="title">사막 여우의 서식처</h3>
<p class="desc">사막여우는 북아프리카와 아시아의<br>
사막 지역에 서식하는 작은 크기의 개과 동물입니다</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section gray">
<div class="imgText__inner container">
<article class="text">
<span>NOTICE</span>
<h3>4종류의 사막여우</h3>
<p class="desc1">사막 여우는 다양한 종류가 있으며, 이들은 지리적인 위치, 생태학적 특성, 외모 등에서 차이가 있습니다. </p>
<ul>
<li><a href="#">아라비안 사막여우(Arabian Desert Fox) : 아랍반도와 이스라엘, 요르단 등에서 발견되며, 몸무게는 1~2kg 정도입니다</a></li>
<li><a href="#">모로코 사막여우(Moroccan Sand Fox) : 북아프리카 지역과 산불이 발생한 사막 지역에서 발견됩니다</a></li>
<li><a href="#">사하라 사막여우(Sahara Desert Fox) : 사하라 사막 지역에 서식하며, 몸무게는 1~1.5kg 정도입니다</a></li>
<li><a href="#">미국 사막여우(American Desert Fox) : 북아메리카 지역의 사막 지역에서 발견되며, 몸무게는 1~3kg 정도입니다.</a></li>
</ul>
</article>
<article class="img i1">
<a href="#">미국 사막여우</a>
</article>
<article class="img i2">
<a href="#">아라비안 사막여우</a>
</article>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="nexon section center">
<div class="container">
<h2 class="section__h2">여우의 생활</h2>
<p class="section__desc">사막여우는 사람과의 접촉을 피하는 경향이 있으며, 인간이 살아가는 지역과 구분된 지역에서 주로 발견됩니다.
사람들은 이들을 사냥 대상으로 삼는 경우가 많아서 사망하거나 멸종 위기에 놓여 있습니다.</p>
<div class="card__inner">
<article class="card">
<figure>
<img src="../asset/img/cardType01_01.jpg" alt="물리적학적 특성">
</figure>
<div class="card__body">
<h3 class="title">물리적학적 특성</h3>
<p class="desc">사막여우는 건조한 사막 지역에서 살아남기 위해 다양한 물리학적 특성을 갖추고 있습니다. 예를 들어, 사막여우는 대부분의 체온을 머리 부분에서 방출하여 열을 조절합니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="../asset/img/cardType01_02.jpg" alt="사막여우의 생김새">
</figure>
<div class="card__body">
<h3 class="title">사막여우의 생김새</h3>
<p class="desc">사막여우는 길이가 50에서60cm, 몸무게가 1.53kg 정도인 작은 포유류입니다. 몸은 길쭉하고 다리가 길어 머리는 비교적 작으며, 귀는 크고 뾰족합니다. 몸은 황갈색, 붉은갈색, 회색 등... </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="../asset/img/cardType01_03.jpg" alt="사막여우의 환경">
</figure>
<div class="card__body">
<h3 class="title">사막여우의 환경</h3>
<p class="desc">사막여우는 체형이 다양한 이유로 인해 굉장히 다양한 환경에서 생활할 수 있습니다. 특히 사막 지역에서 발견되기 때문에, 흰 모래에 숨어있을 때는 털의 색이 흰색에 가깝게...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="nexon section center banner__wrap">
<h2></h2>
<div class="banner__inner">
<div class="banner__info section nexon">
<h3>사막여우 보호 활동</h3>
<p>사막 여우를 보호하기 위한 이러한 조치들은 지속적으로 이루어져야 합니다.<br>
우리는 지구상 모든 생명체들이 함께 존재하는 지구에서 살아가고 있으며,<br>
이를 위해서는 모든 생명체들이 서로 존중하고 보호해야 합니다.</p>
</div>
<address class="banner__right">
<a href="jinyongjang.github.io/web2023/">자세한 사항은 jinyongjang.github.io/web2023/에서 확인 가능 합니다.</a>
</address>
</div>
</section>
<!-- bannerType -->
<section id="textType" class="nexon section center">
<span class="section__small">NOTICE</span>
<h2 class="section__h2" mb70>사막여우를 키우는 방법</h2>
<div class="text__inner container">
<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>
</section>
<!-- textType -->
</main>
<!-- mainType -->
<footer id="footerType" class="nexon section gray">
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>사막여우 사이트</h3>
<ul>
<li><a href="#">소개하기</a></li>
<li><a href="#">사막여우 이야기</a></li>
<li><a href="#">사막여우 도움주기</a></li>
<li><a href="#">사막여우와 함께살기</a></li>
</ul>
</div>
<div>
<h3>사막에 사는 종류</h3>
<ul>
<li><a href="#">Fennec fox</a></li>
<li><a href="#">Pale fox</a></li>
<li><a href="#">Cape fox</a></li>
<li><a href="#">Blanford's fox</a></li>
</ul>
</div>
<div>
<h3>사막여우 노하우</h3>
<ul>
<li><a href="#">충분한 운동하기</a></li>
<li><a href="#">같이 갈 수 있는 곳</a></li>
<li><a href="#">산책하기 좋은 곳</a></li>
<li><a href="#">관련 커뮤니티</a></li>
</ul>
</div>
<div>
<h3>사막여우 먹이</h3>
<ul>
<li><a href="#">강아지 사료</a></li>
<li><a href="#">당근과 양배추</a></li>
<li><a href="#">전용 물병</a></li>
<li><a href="#">낮보다는 밤</a></li>
<li><a href="#">주의해야할 음식</a></li>
</ul>
</div>
<div>
<h3>사막여우 냄새</h3>
<ul>
<li><a href="#">자체적인 냄새</a></li>
<li><a href="#">배설물 냄새</a></li>
<li><a href="#">처리 방법</a></li>
<li><a href="#">전용 탈취제</a></li>
</ul>
</div>
<div>
<h3>같이 오래 살기</h3>
<ul>
<li><a href="#">사막여우의 수명</a></li>
<li><a href="#">야생에서의 수명</a></li>
<li><a href="#">사람과 같이살 때의 수명</a></li>
<li><a href="#">사막여우 접종하기</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 진블로그 사막여우 사이트 Portfolio is power <br>All Right Reserved
</address>
</div>
</footer>
<!-- footerType -->
</body>
</html>// SEO (검색 엔진 최적화)
- author 메타 태그: 이 태그는 문서의 작성자를 나타냅니다. 검색 엔진에서는 이 정보를 사용하지 않지만, 사용자에게 문서의 신뢰성을 높이는 데 도움이 됩니다.
- description 메타 태그: 이 태그는 문서의 내용을 간략하게 설명합니다. 검색 엔진에서는 이 정보를 검색 결과 페이지에 표시하여 사용자에게 보여줍니다.
- keyword 메타 태그: 이 태그는 문서의 키워드를 정의합니다. 검색 엔진에서는 이 정보를 사용하여 문서의 콘텐츠와 일치하는 검색어를 찾습니다.
- robots 메타 태그: 이 태그는 검색 엔진 로봇이 문서를 어떻게 색인할지를 지정합니다. all 값은 로봇이 문서를 모두 색인하도록 지시하는 것을 의미합니다.
이러한 메타 태그들은 검색 엔진이 웹 페이지의 내용을 이해하는 데 중요한 역할을 합니다. 따라서 적절하게 작성하는 것이 검색 엔진 최적화 (SEO)에 도움이 됩니다.
font, reset, common, style css 링크를 따로 걸어 다른 시트에서 작업할 수 있도록 설정하였습니다.
<h2> 태그의 blind class는 화면에는 보이지 않지만 영역에 속하도록 css에 style display:none 을 걸어두었습니다.
저번에 제작한 모든 유형의 사이트를 하나로 만들어 구성은 같습니다.
이번 시간은 미디어쿼리를 사용하여 다양한 기기에서 사용할 수 있도록 화면에 따라 크기가 달라지는 방법을 사용하였습니다.
배너 영역의 미디어 쿼리 입니다.
@media (max-width: 960px){
.banner__inner h3 {
font-size: 40px;
}
}
@media (max-width: 600px){
.banner__inner h3 {
font-size: 30px;
}
.banner__inner p {
margin-bottom: 50px;
}
}화면의 크기가 960px보다 작을 때는 .banner__inner h3 요소의 글꼴 크기를 40px에서 30px으로 줄이고, 화면의 크기가 600px보다 작을 때는 .banner__inner p 요소의 아래 여백을 50px으로 늘리는 스타일이 적용됩니다.
카드 영역의 미디어쿼리 입니다.
@media (max-width: 960px){
.card__inner .card {
width: 49%;
}
.card__inner .card:last-child {
display: none;
}
}
@media (max-width: 600px){
.card__inner {
flex-wrap: wrap;
}
.card__inner .card {
width: 100%;
margin-bottom: 3%;
}
.section__h2 {
text-align: center;
}
.section__decs {
text-align: center;
word-break: keep-all;
}화면의 크기가 960px보다 작을 때는 .card__inner 요소 내부의 .card 요소가 가로로 2개씩 배치되고, 마지막 .card 요소는 숨겨집니다. 화면의 크기가 600px보다 작을 때는 .card__inner 요소 내부의 .card 요소가 세로로 배치되고, 가로 폭은 꽉 차게, 아래쪽 여백은 3%로 지정됩니다. 또한, .section__h2와 .section__decs 요소의 텍스트는 가운데 정렬되고, .section__decs 요소의 단어가 중간에서 잘리지 않도록 word-break: keep-all 스타일이 적용됩니다.
공통 css 입니다.
/* skip */
#skip {
position: relative;
z-index: 1000000;
}
#skip a {
background-color: #000;
color: #fff;
position: absolute;
left: -400px;
top: 0;
padding: 20px 40px;
}
#skip a:active,
#skip a:focus {
left: 0;
}
/* container */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
/* bg */
.gray {
background-color: #f5f5f5;
}
/* section */
.section {
padding: 120px 0;
}
.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.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 1.5;
color: #666;
margin-bottom: 70px;
font-weight: 300;
}
/* 미디어쿼리 */
@media (max-width: 1200px){
.container {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 960px){
.section {
padding: 100px 0;
}
.section__h2 {
font-size: 40px;
margin-bottom: 10px;
}
.section__desc {
font-size: 18px;
margin-bottom: 40px;
}
}
@media (max-width: 600px){
.section {
padding: 80px 0;
}
.section__h2 {
font-size: 30px;
}
.section__desc {
font-size: 16px;
}
}공통 요소로 container를 설정하여 class내에 container를 입력하면 width, margin, padding이 정해진 값으로 자동 정렬이 됩니다.
- 첫번째 미디어쿼리(@media (max-width: 1200px))는 브라우저의 최대 너비가 1200px 일 때 적용되는 스타일입니다. .container 클래스의 너비를 100%로 설정하고, box-sizing을 border-box로 지정합니다.
- 두번째 미디어쿼리(@media (max-width: 960px))는 브라우저의 최대 너비가 960px 일 때 적용되는 스타일입니다. .section 클래스의 패딩을 100px 0으로 설정하고, .section__h2 클래스의 폰트 크기를 40px로, .section__desc 클래스의 폰트 크기를 18px로 지정합니다.
- 세번째 미디어쿼리(@media (max-width: 600px))는 브라우저의 최대 너비가 600px 일 때 적용되는 스타일입니다. .section 클래스의 패딩을 80px 0으로 설정하고, .section__h2 클래스의 폰트 크기를 30px로, .section__desc 클래스의 폰트 크기를 16px로 지정합니다.
공동 폰트 css입니다.
@font-face {
font-family: 'NexonLv2Gothic';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv2Gothic';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv2Gothic';
font-weight: 500;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv2Gothic';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.ttf') format("truetype");
font-display: swap;
}
.nexon {
font-family: 'NexonLv2Gothic';
font-weight: 400;
}font-weight(글자의 굵기를 지정하는 CSS 속성) 별로 폰트 스타일을 적용할 수 있도록 설정하고, nexon 클래스를 입력하면 폰트가 적용되도록 설정 하였습니다.
footer css 입니다.
@media(max-width: 960px){
.footer__menu {
flex-wrap: wrap;
}
.footer__menu > div {
width: 32.3333%;
margin-bottom: 6%;
text-align: center;
}
}
@media(max-width: 600px){
.footer__menu > div {
width: 49%;
}
}- 첫번째 미디어쿼리(@media (max-width: 960px))는 브라우저의 최대 너비가 960px 일 때 적용되는 스타일입니다. .footer__menu 클래스의 flex-wrap 속성을 wrap으로 설정하여 하위 항목이 세로로 쌓이도록 하고, .footer__menu > div 클래스의 너비를 32.3333%로 설정하고, 마진 바텀을 6%로 지정하여 각각의 아이템 사이의 간격을 늘려주고, 텍스트를 가운데 정렬합니다.
- 두번째 미디어쿼리(@media (max-width: 600px))는 브라우저의 최대 너비가 600px 일 때 적용되는 스타일입니다. .footer__menu > div 클래스의 너비를 49%로 설정하여 두 개의 아이템이 가로로 나열되도록 합니다.
나머지 유형도 미디어쿼리를 그에 맞게 적용하여 브라우저의 너비에 따라 이미지 설명이나 이미지와 버튼의 크기 등을 조정하여 반응형 웹사이트를 구현할 수 있습니다.
reset css 코드 입니다.
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, p, table, th, td, input,
figure, figcaption, blockquote {
margin: 0;
padding: 0;
}
/* 폰트 초기화 */
body, button, input, select, table, textarea {
font-family: 'NexonLv2Gothic', 'Malgun Gothic', '맑은 고딕', 'dotum', '돋움';
}
/* 링크 초기화 */
a {
text-decoration: none;
color: #000;
}
/* 목록 초기화 */
li, ol, ul {
list-style: none;
}
/* 제목 초기화 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1rem;
}
/* 폰트 스타일 */
em, address {
font-style: normal;
}
/* 이미지 초기화 */
img {
width: 100%;
vertical-align: top;
}
/* 보더 초기화 */
img, fieldset, button {
border: 0;
}
/* 클리어 픽스 */
.clearfix::before,
.clearfix::before {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
/* 블라인드 효괴 */
.blind {
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
}
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* 간격설정 */
.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;}
/* hide */
.hide {
display: none;
}모든 웹 브라우저에는 기본 설정값이라고 하는 미리 정해둔 CSS 기본 속성 값들이 있습니다.
아무런 CSS 속성을 사용하지 않아도 HTML 태그만으로 표시할 때 이 기본 값 속성들이 적용됩니다.
우리가 아는 대부분의 데스크탑 웹 브라우저는 기본 글자 크기를 "16px" 로 사용하고 있고, 글자색은 검정색, "<body>" 태그에는 "8px"의 마진(margin) 속성이 기본 속성 값으로 정해져 있습니다.
윈도우용 크롬 웹 브라우저는 기본 글꼴로 맑은 고딕(Malgun Gothic) 을 사용합니다.
같은 웹 브라우저임에도 맥OS용과 리눅스용은 사용 기본 글꼴이 다릅니다.
각 브라우저마다 설정 되어있는 기본 스타일이 다 다릅니다. 이러한 점을 개선하기 위해 CSS를 작성할 때, 초기화를 시킵니다. 기본적으로 태그가 가지고 있는 간격이나 색상 등을 통일 시키는 작업입니다.
728x90