728x90
오늘은 이미지유형, 이미지/텍스트 유형, 카드 유형, 배너 유형, 텍스트 유형, 푸터 유형을 모두 하나로 합쳐 위와 같은 웹페이지를 만들어보겠습니다.
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="이승연">
<meta name="descripton" content="이승연과 함께 만드는 사이트 튜토리얼 입니다.">
<meta name="descripton" content="이승연과 함께 만드는 사이트 튜토리얼 입니다.">
<meta name="keyword" content="이승연, 사이트, 사이트 만들기, 튜토리얼">
<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="hassets/ico/favicon.png"/>
<link rel="apple-touch-icon" href="assets/ico/favicon.png"/>
<!-- css -->
<link rel="stylesheet" href="assets/css/font.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" style="display: none">
<h1>사이트 로고</h1>
</header>
<!-- //headerType -->
<main id="mainType">
<section id="sliderType" class="nexon hide">
<h2 class="blind">메인 슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">event</span>
<h1 class="title">냥집사들의 커뮤니티 Catt</h1>
<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>
</section>
<!-- //sliderType -->
<section id="imageType" class="nexon section center">
<h2 class="section__h2">반려묘를 키우는 방법</h2>
<p class="section__desc">반려묘를 키우려면 돈도 많고 열정과 노력과 부모가 시간도 많아야 합니다.</p>
<div class="image__inner container">
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="../assets/img/imageType_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="../assets/img/imageType_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">300종 이상의 반려묘</h2>
<div class="container">
<div class="imgText__inner">
<article class="text">
<span>NOTICE</span>
<h3>300종 이상의 반려묘</h3>
<p>세상에는 다양한 종류의 고양이가 있습니다.<br>일부 인기 있는 반려묘 종류는 다음과 같습니다.</p>
<ul>
<li><a href="#">스코티쉬 폴드 (Scottish Fold)</a></li>
<li><a href="#">샴 고양이 (Siamese)</a></li>
<li><a href="#">브리티쉬 숏헤어 (British Shorthair)</a></li>
<li><a href="#">먼치킨 (Munchkin)</a></li>
<li><a href="#">사바나 (Savannah)</a></li>
<li><a href="#">페르시안 (Persian)</a></li>
<li><a href="#">스노우슈 (Snowshoe)</a></li>
<li><a href="#">스픽스 (Sphynx)</a></li>
<li><a href="#">러시안 블루 (Russian Blue)</a></li>
<li><a href="#">아메리칸 숏헤어 (American Shorthair)</a></li>
</ul>
</article>
<article class="img i1">
<a href="#">인기 많은 고양이</a>
</article>
<article class="img i2">
<a href="#">똑똑한 고양이</a>
</article>
</div>
</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="../assets/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="../assets/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="../assets/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">
<h2 class="blind">배너</h2>
<div class="banner__inner">
<h3>초보 집사들을 위한 유튜브 교육</h3>
<p>처음 고양이를 키우는 사람들을 위한 교육은<br>유튜브를 통해 더욱 자세히 확인하실 수 있습니다.</p>
<a href="#">youtube.com/cat</a>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon section center">
<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 href="#" class="text__btn">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">충분한 사랑과 관심</h3>
<p class="text__desc">고양이는 충분한 사랑과 관심이 필요합니다. 주인의 사랑과 관심이 고양이의 건강과 행복에 큰 영향을 미칩니다. 따라서 일정한 시간을 투여하여 관심과 사랑을 나눠주어야 합니다..</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">적절한 먹이 제공</h3>
<p class="text__desc">고양이는 적절한 먹이를 제공해야 합니다. 고양이의 나이, 체중, 건강 상태 등을 고려해 알맞은 양의 먹이를 제공하고, 식습관도 지속적으로 관찰하며 필요에 따라 조정해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">적절한 운동과 활동</h3>
<p class="text__desc">고고양이는 적절한 운동과 활동을 해야 합니다. 고양이 산책용 끈을 이용하여 집 주변을 돌아다니게 하거나, 장난감으로 놀아주는 등 다양한 방법으로 활동을 유도해야 합니다.
</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">스크래칭 포스트 제공</h3>
<p class="text__desc">고양이는 스크래칭을 하기 때문에 스크래칭 포스트를 제공해주어야 합니다. 스크래칭 포스트를 이용하면 가구 등을 파손하지 않고 고양이가 스크래칭을 할 수 있습니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">예방접종과 내부 구충</h3>
<p class="text__desc">고양이의 건강을 유지하기 위해서는 예방접종과 내부 구충을 꼭 시켜야 합니다. 수의사의 조언에 따라 필요한 예방접종과 내부 구충을 받게 해야 합니다.</p>
<a href="#" class="text__btn">더보기</a>
</div>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->
<footer id="footerType" class="nexon section gray">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<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>
<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>
<li><a href="#">반려묘 접종하기</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 이승연 반려묘 사이트 Porfolio is Power<br>All Right Reserved
</address>
</div>
</div>
</footer>
<!-- //footerType -->
</body>
</html>meta태그로 설명을 써주고 파비콘을 바꿔주었습니다.
font, reset, common, style, 각각 유형들의 css를 따로따로 만들고 유형들의 css를 제외하고 링크를 달아주었습니다.
skip부분은 tab키를 눌러서 바로가기로 영역 이동할 수 있도록 설정해주었습니다.
전에 했던 유형들에서 각각 body의 container안에 속한 영역들을 넣어주었습니다.
CSS
font.css
font는 font-face방식으로 가져왔습니다.
출처: https://wess.tistory.com/522
@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;
}
style.css
import방식으로 각각의 css를 안에 불러옵니다.
@import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imageText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");
reset.css
태그들을 초기화 해주는 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', 'AppleSDGothicNeo-Regular', '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::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;
}
common.css
바로가기에 css를 설정해주고 전에 만들었던 유형들에서 common부분들을 안에 넣어줍니다.
중간에 몇몇 영역들이 구분될 수 있도록 뒷배경에 회색을 넣어줄 건데 html에서 영역의 class안에 넣으면 더 간결하게 설정할 수 있으므로 common.css 안에 넣어줍니다.
그리고 화면애 따라 최적화 될 수 있게 media로 미디어쿼리를 설정해줍니다.
/* 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.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #0083FD;
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;
}
/* 미디어쿼리 */
@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;
}
}
image.css
이미지 유형을 할 떄 style을 쓴 부분에서 image__wrap안에 들어가는 부분을 모두 넣어주었습니다.
그 후 미디어 쿼리를 설정하여 브라우저가 960px일 때 설명이 사라지게 설정합니다.
600px일 때 flex-direction: column을 설정하여 요소들이 세로 정렬 될 수 있도록 합니다.
image__inner .image에 width: 100%;을 설정하여, 부모 요소의 100%의 너비를 차지하도록 변경합니다. 그리고 margin-bottom: 3%을 설정하여, 요소들 간에 아래쪽 여백을 추가합니다.
.image__body .title에 font-size와 margin-bottom으로 글자크기와 여백을 설정해줍니다.
image__body .btn에 padding과 font-size로버튼 내부 여백과 글꼴 크기를 조정합니다.
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 49%;
background-color: #ccc;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}
/* 미디어쿼리 */
@media (max-width: 960px){
.image__body .desc {
display: none;
}
}
@media (max-width: 600px){
.image__inner {
flex-direction: column;
}
.image__inner .image {
width: 100%;
margin-bottom: 3%;
}
.image__body .title {
font-size: 22px;
margin-bottom: 10px;
}
.image__body .btn {
padding: 10px 20px;
font-size: 14px;
}
}
imgText.css
image.css와 마찬가지로 imgText도 style의 img__wrap부분에서 가져옵니다.
똑같이 미디어 쿼리를 설정해줍니다.
브라우저가 960px일 때,
.imgText__inner .text 에"width: 100%;"과 "text-align: center;"를 설정하여, 요소가 부모 요소의 100% 너비를 차지하고, 텍스트가 중앙 정렬되도록 변경합니다.
.imgText__inner .img 에 width: 49%;"를 설정하여, 요소가 부모 요소의 너비의 49%만 차지하도록 변경합니다.
.imgText__inner .text h3에 font-size: 40px;와 margin-bottom: 10px;를 설정하여, 제목 요소의 글꼴 크기와 아래쪽 여백을 조정합니다.
브라우저가 600px일 때,
.imgText__inner .text p에 font-size: 18px;, margin-bottom: 40px;, 그리고 font-weight: 300;을 설정하여, 텍스트 요소의 글꼴 크기, 아래쪽 여백, 그리고 글꼴 두께를 조정합니다.
.imgText__inner .text ul에 display: none;을 설정하여, 요소를 숨김 처리합니다.
.imgText__inner .img에 width: 100%;와 margin-bottom: 3%;를 설정하여, 요소가 부모 요소의 100% 너비를 차지하고, 요소들 간에 아래쪽 여백을 추가합니다.
.imgText__inner .text h3 에 font-size: 30px;를 설정하여, 제목 요소의 글꼴 크기를 줄입니다.
.imgText__inner .text p 에 font-size: 16px;를 설정하여, 텍스트 요소의 글꼴 크기를 줄입니다.
.imgText__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.imgText__inner article {
width: 32.3333%;
}
.imgText__inner .text span {
background-color: #0083FD;
font-size: 14px;
color: #fff;
padding: 1px 20px;
border-radius: 50px;
margin-bottom: 15px;
display: inline-block;
}
.imgText__inner .text h3 {
font-size: 50px;
margin-bottom: 17px;
}
.imgText__inner .text p {
font-size: 16px;
line-height: 1.5;
color: #666;
margin-bottom: 12px;
}
.imgText__inner .text li{
position: relative;
padding-left: 14px;
}
.imgText__inner .text li::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #666;
position: absolute;
left: 0;
top: 8px;
}
.imgText__inner .text li a {
color: #666;
line-height: 1.6;
font-size: 16px;
}
.imgText__inner .img {
background-repeat: no-repeat;
background-size: cover;
height: 500px;
border-radius: 10px;
position: relative;
}
.imgText__inner .img a {
position: absolute;
left: 20px;
bottom: 20px;
background: #000;
color: #fff;
padding: 10px 20px;
border-radius: 40px;
}
.imgText__inner .img.i1 {
background-image: url(../img/img_txtType01.jpg);
}
.imgText__inner .img.i2 {
background-image: url(../img/img_txtType02.jpg);
}
.imgText__inner .img.i1 a {
background-color: #405792;
}
.imgText__inner .img.i2 a {
background-color: #721C17;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.imgtext .imgtext__body {
background-image: url(../img/img_txtType01.jpg);
background-image: url(../img/img_txtType02.jpg);
}
}
@media (max-width: 960px){
.imgText__inner .text {
width: 100%;
text-align: center;
}
.imgText__inner .img {
width: 49%;
}
.imgText__inner .text h3 {
font-size: 40px;
margin-bottom: 10px;
}
.imgText__inner .text p {
font-size: 18px;
margin-bottom: 40px;
font-weight: 300;
}
.imgText__inner .text ul{
display: none;
}
}
@media (max-width: 600px){
.imgText__inner .img {
width: 100%;
margin-bottom: 3%;
}
.imgText__inner .text h3 {
font-size: 30px;
}
.imgText__inner .text p {
font-size: 16px;
}
}
card.css
카드유형도 위의 유형들과 마찬가지로 가져옵니다.
미디어쿼리로 브라우저가 960px일 때,
.card__inner .card에 width: 49%;를 설정하여, 요소가 부모 요소의 너비의 49%만 차지하도록 변경합니다.
.card__inner .card:last-child 요소는 display: none;을 설정하여, 마지막 카드 요소를 숨김 처리합니다.
브라우저가 600px일 때,
.card__inner에 flex-wrap: wrap;을 설정하여, 요소가 한 줄에 배치되지 않고, 필요에 따라 여러 줄로 나뉘어 배치될 수 있도록 변경합니다.
.card__inner .card에 width: 100%; 와 margin-bottom: 3%;을 설정하여, 요소가 부모 요소의 100% 너비를 차지하고, 요소들 간에 아래쪽 여백을 추가합니다.
.section__h2에 text-align: center;를 설정하여, 제목 요소를 가운데 정렬합니다.
.section__desc에 text-align: center;와 word-break: keep-all;를 설정하여, 텍스트 요소를 가운데 정렬하고, 단어가 잘리지 않도록 유지합니다.
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
}
.card__body .btn {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='8' viewBox='0 0 32 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
/* 미디어쿼리 */
@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__desc {
text-align: center;
word-break: keep-all;
}
}
banner.css
배너도 똑같이 가져오고 미디어쿼리로 브라우저가 960px일 때,
.banner__inner h3에 "font-size: 40px;"을 설정하여, 제목의 글꼴 크기를 40px으로 변경합니다.
브라우저가 600px일 때,
.banner__inner h3에 font-size: 30px;을 설정하여, 제목의 글꼴 크기를 30px으로 변경합니다.
.banner__inner p에 margin-bottom: 50px;을 설정하여, 설명의 아래쪽 여백을 50px로 추가합니다.
#bannerType {
width: 100%;
background-image: url(../img/bannerType01.jpg);
background-repeat: no-repeat;
background-position: center;
z-index: -1;
}
.banner__inner {
color: #fff;
text-align: center;
}
.banner__inner h3 {
font-size: 50px;
margin-bottom: 45px;
}
.banner__inner p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 90px;
}
.banner__inner a {
color: #fff;
text-decoration: underline;
}
@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;
}
}
text.css
텍스트도 똑같이 가져오고 미디어쿼리로 브라우저가 960px일 때,
..text__inner .text 에 "width: 49%;을 설정하여, 요소의 너비를 부모 요소의 49%로 지정합니다.
브라우저가 600px일 때,
.text__inner .text 에 width: 100%;을 설정하여, 요소의 너비를 부모 요소의 100%로 지정합니다.
.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-color: #f5f5f5;
}
.text__inner .text::before {
content: '';
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 20px;
top: 20px;
border-radius: 50%;
}
.text__inner .text.t1::before {
background-color: #B9D1FF;
background-image: url(../img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #B9EEFF;
background-image: url(../img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #FFB9CA;
background-image: url(../img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #F5FFB9;
background-image: url(../img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #CBFFB9;
background-image: url(../img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #F5B9FF;
background-image: url(../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(../img/icon_plus.svg);
transition: all 0.3s;
}
.text__btn:hover::before {
transform: rotate(360deg);
}
@media (max-width: 960px){
.text__inner .text {
width: 49%;
}
}
@media (max-width: 600px){
.text__inner .text {
width: 100%;
}
}
footer.css
푸터도 똑같이 가져오고 미디어쿼리로 브라우저가 960px일 때,
footer__menu에 flex-wrap: wrap;을 설정하여, 하위 요소들을 줄바꿈하여 배치합니다.
또한, 하위 요소인 .footer__menu > div들에게 너비와 마진을 설정하여 중앙 정렬합니다.
브라우저가 600px일 때,
.footer__menu > div 요소는 width: 49%;을 설정하여, 요소의 너비를 부모 요소의 49%로 지정합니다.
이로 인해 하위 요소들이 두 개씩 나란히 배치됩니다.
.footer__menu{
display: flex;
}
.footer__menu > div {
width: 16.6666%;
}
.footer__menu > div h3 {
margin-bottom: 13px;
}
.footer__menu > div li {
line-height: 1.9;
font-size: 14px;
}
.footer__menu > div li a {
color: #666;
}
.footer__right {
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
text-align: center;
font-style: normal;
line-height: 1.6em;
color: #666;
font-size: 14px;
}
@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%;
}
}
슬라이드 유형: https://zheldqmffhrm.tistory.com/37
슬라이드 유형 레이아웃 웹페이지 만들기
수업 시간에 위와 같은 카드유형레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 슬라이드 유형은 보시다시피 사진과 문자를 슬라이드 형식으로 넘길 수 있는 구조로 되어있는 유형입니다.
zheldqmffhrm.tistory.com
카드 유형 : https://zheldqmffhrm.tistory.com/27
카드유형 레이아웃 웹 페이지 만들기
카드 유형 레이아웃 웹 페이지 만들기 수업 시간에 위와 같은 카드유형레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 반려묘를 키울때 팁 고양이를 키우기 전에 충분한 연구를 하십시오.
zheldqmffhrm.tistory.com
이미지 유형 : https://zheldqmffhrm.tistory.com/31
이미지 유형 레이아웃 웹페이지 만들기
수업 시간에 위와 같은 이미지유형 레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 반려묘를 키우는 방법 반려묘를 키우려면 돈도 많고 열정과 노력과 부모가 시간도 많아야 합니다. 고양
zheldqmffhrm.tistory.com
이미지/텍스트 유형 : https://zheldqmffhrm.tistory.com/36
이미지/텍스트 유형 레이아웃 웹페이지 만들기
위의 예시처럼 텍스트의 영역과 이미지의 영역 있는 유형이 이미지 텍스트 유형입니다. 오늘은 예시처럼 이미지 텍스트 유형을 만들어 보려고 합니다. notice 300종 이상의 반려묘 세상에는 다양
zheldqmffhrm.tistory.com
텍스트 유형: https://zheldqmffhrm.tistory.com/40
텍스트 유형 레이아웃 웹페이지 만들기
텍스트 유형 레이아웃 웹 페이지 만들기 수업 시간에 위와 같은 텍스트 유형 레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. notice 반려묘 키울때 주의할점 건강 검진 고양이는 매우 활발한
zheldqmffhrm.tistory.com
푸터 유형: https://zheldqmffhrm.tistory.com/44
푸터 유형 레이아웃 웹페이지 만들기
오늘은 웹 페이지의 제일 하단 부분인 푸터(footer)유형을 만드는 법을 소개해보겠습니다. 위의 예제와 같이 생긴 페이지를 만들겠습니다. 전체구조 푸터 반려묘 사이트 소개하기 반려묘 이야기
zheldqmffhrm.tistory.com