CSS
사이트 만들기 1
hyejeong3283
2023. 3. 28. 19:36
728x90
반응형
이전에 만들었던 슬라이드, 이미지, 이미지/텍스트, 카드, 텍스트, 푸터 영역의 페이지들과 헤더, 배너 영역의 페이지를 하나로 모아 사이트페이지를 만들었습니다.
슬라이드 유형 페이지 만들기!
Figma 피그마를 이용해 만들고자하는 슬라이드 유형의 페이지를 작업했습니다. 슬라이드 유형 페이지 안에 넣은 아이콘을 만들어 jpg파일로 저장해주었습니다. HTML 코드 메인 슬라이드 영역 event
hyejeong3283.tistory.com
카드 유형 페이지 만들기
카드 유형 페이지 만들기 피그마를 이용하여 만들고 싶은 페이지를 작업을 해주었습니다. 코드 반려동물을 키울때 필요한 책임감 애완동물을 "제대로" 기르려면 아이를 키우는 것 만큼 돈이 나
hyejeong3283.tistory.com
이미지 유형 페이지 만들기
Figma 피그마를 사용하여 만들고자 하는 이미지 유형 페이지를 작업했습니다. HTML 코드 반려동물 귀여운 반려동물들 입니다. 반려견 강아지는 산책을 좋아합니다. 하루에 충분한 산책시간을 가져
hyejeong3283.tistory.com
이미지텍스트 유형 페이지 만들기!
Figma 피그마를 이용해서 만들고자하는 이미지텍스트 유형 페이지를 작업했습니다. HTML 코드 notice 반려동물과 외출하기 반려동물 외출 시 챙겨야 할 것들과 주의사항입니다. 인식표 부착하기 목
hyejeong3283.tistory.com
텍스트 유형 페이지 만들기
Figma 피그마를 이용해 만들고자 하는 텍스트 유형의 페이지를 작업했습니다. HTML 코드 notice 반려동물을 키울때 필요한 책임감 생명과 안전 보호 동물의 소유자 등은 동물로 하여금 갈증·배고픔,
hyejeong3283.tistory.com
푸터 유형 페이지 만들기
Figma 피그마를 이용해 만들고자 하는 푸터 유형의 페이지를 작업했습니다. HTML 코드 푸터 반려동물 사이트 반려동물 소개 기타 반려동물 입양,분양 방법 사육 기본사항 반려견 반려견 종류 미용
hyejeong3283.tistory.com
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>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="hyejeong">
<meta name="description" content="hyejeong와 함께 만드는 사이트 튜토리얼입니다.">
<meta name="keyword" content="hyejeong, 사이트, 사이트 만들기, 튜토리얼">
<meta name="roboots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="asset/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="asset/ico/favicon.png"/>
<link rel="apple-touch-icon" href="asset/ico/favicon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="asset/css/fonts.css">
<link rel="stylesheet" href="asset/css/reset.css">
<link rel="stylesheet" href="asset/css/common.css">
<link rel="stylesheet" href="asset/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" style="display:none">
<h1 class="blind">사이트 로고</h1>
<div class="header__inner">
<h1 class="header__logo">Animals</h1>
<nav class="header__menu">
<ul>
<li><a href="#">소개</a></li>
<li><a href="#">환경</a></li>
<li><a href="#">건강</a></li>
<li><a href="#">운동 </a></li>
<li><a href="#">Dog</a></li>
<li><a href="#">Cat</a></li>
</ul>
</nav>
<div class="header__member">
<a href="#">로그인</a>
</div>
</div>
</header>
<!-- headerType -->
<main id="mainType">
<section id="silderType" class="nexon hide">
<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>
<!-- silderType -->
<section id="imageType" class="nexon section center">
<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">강아지는 산책을 좋아합니다. 하루에 충분한 산책시간을 가져야 합니다.</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">고양이는 높은 곳을 좋아합니다. 고양이는 야외 활동을 거의 하지 않습니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section gray">
<h2 class="blind">이미지/텍스트 영역</h2>
<div class="imgText__inner container">
<article class="text">
<span>NOTICE</span>
<h3>반려동물과 외출하기</h3>
<p>반려동물 외출 시 챙겨야 할 것들과 주의사항입니다.</p>
<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>
<li><a href="#">반려동물을 안은 상태에서의 운전금지</a></li>
<li><a href="#">대중교통 이용시 이동가방 사용하기</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">
<div class="container">
<h2 class="section__h2">반려동물을 키울때 필요한 책임감</h2>
<p class="section__desc">애완동물을 "제대로" 기르려면 아이를 키우는 것 만큼 돈이 나간다. 사료, 간식, 장난감, 병원비는 물론이고, 애완동물 출입을 허가하는 주거시설과 놀이 시설에 가기 위해 많은 비용을 지불해야 한다. 먼 거리까지 가려면 자동차도 필수다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<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 class="card__header">
<img src="./asset/img/cardType01_02.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 class="card__header">
<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">
<h2 class="blind">배너</h2>
<div class="banner__inner container">
<h3>함께하는 반려동물</h3>
<p>반려동물 정보는<br>다음 홈페이지를 통해 확인할 수 있습니다.</p>
<a href="#">https://nias.go.kr/companion/index.do</a>
</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">동물의 소유자 등은 동물로 하여금 갈증·배고픔, 영양불량, 불편함, 통증·부상·질병, 두려움과 정상적으로 행동할 수 없는 것으로 인하여 고통을 받지 아니하도록 노력하여야 합니다.</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">2마리 이상의 동물을 함께 사육하는 경우 목줄에 묶이거나 목이 조이는 등으로 인한 상해를 입지 않도록 주의를 해야 합니다. 적합한 음식과 깨끗한 물을 공급하여야 합니다.</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">
<h2 class="blind">푸터 영역</h2>
<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="#">반려견 종류</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>
</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>
<h3>반려동물 정보</h3>
<ul>
<li><a href="#">반려동물 보호법</a></li>
<li><a href="#">반려동물 등록제</a></li>
<li><a href="#">유기동물 보호소</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 hyejoeng 반려견 사이트 Portpolio is Power<br>All Right Reserved
</address>
</div>
</footer>
<!-- footerType -->
</body>
</html>
- 이전에 만들었던 각 유형의 페이지들에서 제목과 내용이 포함된 태그 영역들을 복사해 각 영역에 맞게 넣어줍니다.
- 페이지에 사용된 이미지들도 복사해 img파일 안에 넣어줍니다.
- html과 img 파일은 같은 site1이라는 파일에 들어있으므로 이미지 경로를 맞게 수정해줍니다.
- 피그마를 이용해 파비콘을 만들어 ico 파일에 저장시켜준 후 html에 링크를 걸어 보이게 해줍니다.
- 공통으로 적용할 css효과는 따로 font, reset, common, style css문서를 만들어 html에 링크를 걸어줍니다.
font css
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.ttf') format("truetype");
font-display: swap;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}이전 페이지 css에서 그대로 가져와 폰트에 공통으로 css 효과를 주었습니다.
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: 'NexonLv1Gothic', 'malgun Gothic', '맑은 고딕';
}
/* 링크 초기화 */
a {
text-decoration: none;
color: #000;
}
/* 목록 */
ul,li,ol {
list-style: none;
}
/* 제목 초기화 */
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 1rem; /* 16px */
}
/* 폰트 스타일 */
em, address {
font-style: normal;
}
/* 이미지 초기화 */
img {
width: 100%;
vertical-align: top;
}
/* 보더 초기화 */
img, fieldset, button {
border: 0;
}
/* 클리어픽스 */
.clearfix::before,
.clearfix::after{
content: "";
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
/* 블라인드 효과 */
.blind {
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
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;
}reset css에는 기존에 적용된 css를 초기화시켜주기 위해 각 태그들을 적어 css 효과를 넣어주었습니다.
clearfix
HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다.
이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다.
ir 효과
일반적으로 이미지 대체 텍스트와 같은 요소에서 사용됩니다. 이미지 대체 텍스트는 시각적으로 표시되지 않는 대체 텍스트로, 스크린 리더와 같은 보조 기술을 사용하는 사용자가 이해할 수 있도록 하기 위해 사용됩니다. 따라서 이 스타일은 이미지 대체 텍스트를 숨기고 요소의 시각적 모양을 꾸밀 수 있도록 하는 데 사용됩니다.
common css
/* skip */
#skip {
position: relative;
z-index: 100000;
}
#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.center {
text-align: center;
}
.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;
}
/* 미디어쿼리 */
@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;
}
}common css 문서 안에 css효과들을 넣어 html문서에 공통으로 css 효과를 줍니다.
skip, container, gray(배경색), section 영역에 공통 css 효과를 주었습니다.
미디어쿼리
미디어쿼리(Media Queries)는 CSS의 일부로, 웹 페이지의 디바이스 종류나 크기 등의 다양한 특성에 따라 스타일을 다르게 적용하는 것을 가능하게 해줍니다. 즉, 웹 사이트가 다양한 디바이스나 화면 크기에서 적절하게 보이도록 하기 위해 사용됩니다.
@media (특성: 값) {
/* 스타일 규칙 */
}예를 들어, 모바일 기기에서는 화면이 작아서 큰 이미지가 보기 어려울 수 있습니다. 이 때, 다음과 같은 미디어쿼리를 사용하여 모바일에서는 이미지 크기를 줄이는 스타일을 적용할 수 있습니다.
미디어쿼리는 또한 다양한 특성을 기반으로 스타일을 적용할 수 있습니다. 예를 들어, 디바이스의 종류(screen, print, speech 등), 화면 비율(aspect-ratio), 디바이스 방향(orientation), 입력 방법(hover, pointer, any-hover 등) 등을 기준으로 스타일을 적용할 수 있습니다.
위에 코드에서는 화면 너비가 1200px이하일 경우, 960px이하일 경우, 600px이하일 경우
각각 다르게 스타일css 효과를 주었습니다.