728x90
사이트 만들기
이번 사이트는 다수의 유형을 종합하여 하나의 사이트를 만드는 방법입니다.
○ 사이트 완성하기 01
여태까지 했던 사이트 유형을 종합하여 가장 기본적인 하나의 사이트 형태로 구성합니다.
사이트의 구성은 헤더 영역, 메인 영역, 푸터 영역으로 구성되어 있으며 메인 영역은 여러개의 타입이 모여 구성합니다.
또한 만든 사이트를 태블릿과 핸드폰의 크기에 맞춰 반응형 웹까지 완성합니다.
1. 헤더 영역
로고와 메뉴 및 로그인 버튼이 들어가는 헤더 영역은 반응형 시 메뉴창이 햄버거 버튼 형태로 구성됩니다.
헤더 영역 코드
<style>
body {
overflow: overlay;
}
/* headerType */
.header__inner {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
position: fixed;
top: 0;
left: 0;
background: #fff;
backdrop-filter: blur(10px);
z-index: 10000;
}
.header__logo {
width: 20%;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
}
.header__logo em {
font-size: 18px;
font-weight: 400;
}
.header__menu {
width: 85%;
text-align: center;
}
.header__menu li {
display: inline;
}
.header__menu li a {
padding: 13px 28px;
margin: 0 5px;
font-size: 20px;
font-family: "NexonLv2Gothic";
font-weight: 500;
transition: background-color 0.3s;
}
.header__menu li a:hover {
background-color: #f1f1f1;
border-radius: 5px;
}
.header__member {
width: 20%;
text-align: right;
}
.header__member a {
font-size: 16px;
border: 1px solid #000;
padding: 10px 30px;
border-radius: 50px;
transition: background-color 0.3s;
}
.header__member a:hover {
background-color: #000;
color: #fff;
}
</style>
<header id="headerType" class="header__wrap LocusSang">
<div class="header__inner">
<div class="header__logo">
<a href="#">web <em>site</em></a>
</div>
<div class="header__menu">
<ul>
<!-- <li><a href="#headerType">헤더 영역</a></li>
<li><a href="#slideType">슬라이드 영역</a></li> -->
<li><a href="#imageType">이미지 영역</a></li>
<li><a href="#imgTextType">이미지/텍스트 영역</a></li>
<li><a href="#cardType">카드 영역</a></li>
<li><a href="#bannerType">배너 영역</a></li>
<li><a href="#textType">텍스트 영역</a></li>
<!-- <li><a href="#footerType">푸터 영역</a></li> -->
</ul>
</div>
<div class="header__member">
<a href="#">로그인</a>
</div>
<div class="header__ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
반응형 및 햄버거 버튼 코드
<style>
@media (max-width: 1300px) {
.header__menu {
position: fixed;
right: -100%;
top: 69px;
background: #fff;
width: 47%;
height: 100vh;
padding: 20px;
text-align: right;
transition: right 0.4s ease-in;
}
.header__menu ul li {
display: block;
margin: 20px;
}
.header__menu ul li a {
padding: 10px;
white-space: nowrap;
}
.header__menu.active {
right: 0;
}
.header__member {
width: 50%;
margin-right: 50px;
}
.header__logo {
width: 50%;
}
.header__ham {
display: block;
}
.header__ham span {
display: block;
background: #000;
width: 30px;
height: 2px;
border-radius: 3px;
margin-left: 10px;
margin-top: 5px;
transition: 0.25s margin 0.25s, transform 0.25s;
}
.header__ham span:nth-child(1){
margin-top: 17px;
}
.header__ham.active span {
transition: 0.25s margin, 0.25s transform 0.25s;
}
.header__ham.active span:nth-child(1) {
margin-top: 25px;
margin-bottom: -7px;
transform: rotate(45deg);
}
.header__ham.active span:nth-child(2) {
transform: rotate(45deg);
}
.header__ham.active span:nth-child(3) {
margin-top: -2px;
transform: rotate(135deg);
}
}
</style>
<header id="headerType" class="header__wrap LocusSang">
<div class="header__inner">
<div class="header__ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<script>
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");
btnHam.addEventListener("click", () => {
btnHam.classList.toggle("active");
btnMenu.classList.toggle("active");
document.body.classList.toggle("fixed");
});
btnMenuList.forEach((list) => {
list.addEventListener("click", () => {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
});
});
window.addEventListener("resize", () => {
let width = window.innerWidth;
if(width > 1300){
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
}
});
</script>
햄버거 버튼은 마치 햄버거 모양의 3선 메뉴 버튼을 클릭하거나 터치 등의 상호작용 시 활성화되어 메뉴를 토글하거나 표시하는 네비게이션 바 역할을 합니다.
메뉴를 숨기기 위해 화면 밖으로 옮겼다가 이벤트 요소를 통해 활성화 할 때 원래 자리로 돌아와 메뉴를 보여줍니다.
2. 슬라이더 영역
슬라이드 영역은 swiper를 사용했습니다. swiper는 쉽게 슬라이더 효과를 사용할 수 있도록 해주는 라이브러리 입니다.
https://swiperjs.com/ 이 곳에서 사용이 가능합니다.
https://swiperjs.com/ 이 곳에서 사용이 가능합니다.
슬라이드 영역 코드
<style>
.slider__inner {
margin-top: 70px;
}
.slider {
position: relative;
}
.slider_img {
background: url(../img/slider_bg01.jpg) no-repeat center / cover;
}
.slider_img .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
}
.slider_img .desc span {
font-size: 16px;
background-color: #fff;
padding: 1px 14px 0 14px;
border-radius: 30px;
text-transform: uppercase;
margin-bottom: 10px;
display: inline-block;
}
.slider_img .desc h3 {
font-size: 110px;
font-weight: 300;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
margin-left: -8px;
}
.slider_img .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 130px;
}
.slider_img .desc .btn {}
.slider_img .desc .btn a {
font-size: 16px;
background-color: #fff;
padding: 11px 50px;
display: inline-block;
}
.slider_img .desc .btn a.black {
background: #000;
color: #fff;
}
.slider__arrow a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 56px;
background-image: url(../img/slider_icon.svg);
}
.slider__arrow a.left {
left: 20px;
}
.slider__arrow a.right {
right: 20px;
background-position: -50px 0;
}
.slider__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
}
.slider__dot a {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(../img/slider_icon.svg);
background-position: -20px -70px;
}
.slider__dot a.active {
background-position: 0 -70px;
}
.slider__dot a.play {
background-position: -40px -70px;
}
.slider__dot a.stop {
background-position: -60px -70px;
}
/* swiper */
.swiper-slide {
background: url(../img/slider_bg01.jpg) no-repeat center / cover;
}
.swiper-slide .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
box-sizing: border-box;
}
.swiper-slide .desc span {
font-size: 16px;
background-color: #fff;
padding: 1px 14px 0 14px;
border-radius: 30px;
text-transform: uppercase;
margin-bottom: 10px;
display: inline-block;
}
.swiper-slide .desc h3 {
font-size: 110px;
font-weight: 300;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
margin-left: -8px;
}
.swiper-slide .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 130px;
}
.swiper-slide .desc .btn {}
.swiper-slide .desc .btn a {
font-size: 16px;
background-color: #fff;
padding: 11px 50px;
display: inline-block;
}
.swiper-slide .desc .btn a.black {
background: #000;
color: #fff;
}
.swiper-button-next,
.swiper-button-prev {
width: 30px !important;
height: 56px !important;
background-image: url(../img/slider_icon.svg);
}
.swiper-button-next {
background-position: -50px 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
opacity: 0;
}
.swiper-pagination-bullet {
width: 16px !important;
height: 16px !important;
background-image: url(../img/slider_icon.svg) !important;
background-position: -20px -70px !important;
background-color: transparent !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background-position: 0px -70px !important;
}
.swiper-button {
position: absolute;
left: 50%;
margin-left: 40px;
bottom: 23.7px;
z-index: 1000;
display: flex;
}
.swiper-button-stop {
background-image: url(../img/slider_icon.svg);
background-position: -60px -70px;
width: 16px;
height: 16px;
cursor: pointer;
}
.swiper-button-play {
background-image: url(../img/slider_icon.svg);
background-position: -40px -70px;
width: 16px;
height: 16px;
cursor: pointer;
}
</style>
<section id="sliderType" class="slider__wrap">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="desc">
<span>The Fruit</span>
<h3>Sweet Fresh</h3>
<p>
싱싱한 과일이 왔어요~ 맛도 좋고 향도 좋고 몸에도 좋은 그 맛!<br>
과일의 여러가지 쓰임새에 대해 알아봅시다~!
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>The Fruit</span>
<h3>Sweet Fresh</h3>
<p>
싱싱한 과일이 왔어요~ 맛도 좋고 향도 좋고 몸에도 좋은 그 맛!<br>
과일의 여러가지 쓰임새에 대해 알아봅시다~!
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>The Fruit</span>
<h3>Sweet Fresh</h3>
<p>
싱싱한 과일이 왔어요~ 맛도 좋고 향도 좋고 몸에도 좋은 그 맛!<br>
과일의 여러가지 쓰임새에 대해 알아봅시다~!
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button">
<div class="swiper-button-play"><span class="ir">play</span></div>
<div class="swiper-button-stop"><span class="ir">stop</span></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<script src="assets/js/swiper.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: 'true',
},
});
const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-play");
btnStart.style.display = "none";
btnStop.addEventListener("click", () => {
swiper.autoplay.stop();
btnStop.style.display = "none";
btnStart.style.display = "block";
});
btnStart.addEventListener("click", () => {
swiper.autoplay.start();
btnStart.style.display = "none";
btnStop.style.display = "block";
});
document.querySelectorAll(".header__menu li a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth" //부드럽게 움직이도록 해줌
});
});
});
</script>
<!-- //sliderType -->
반응형 코드
<style>
@media (max-width: 960px) {
.swiper-slide {
text-align: center;
}
.swiper-slide .desc {
width: 100%;
}
.swiper-slide .desc h3 {
font-size: 70px;
}
}
@media (max-width: 600px) {
.swiper-slide .desc {
padding: 80px 0;
}
.swiper-slide .desc h3 {
font-size: 40px;
}
.swiper-slide .desc p {
font-size: 16px;
margin-bottom: 50px;
}
.swiper-slide .desc .btn a {
padding: 10px 25px;
}
}
</style>
3. 이미지 영역
이미지 영역은 텍스트가 포함된 이미지가 나열된 형태입니다.
이미지 영역 코드
<style>
/* imageType */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
}
.image.img1 {
background: url(../img/img_bg01.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(../img/img_bg02.jpg) no-repeat center /cover;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image__desc {
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
font-size: 16px;
color: #fff;
background-color: #B45A30;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #B59140;
}
</style>
<section id="imageType" class="image__wrap nexon section">
<h2>365일 언제나 맛있는 과일 쥬스</h2>
<p>남녀노소 누구에게나 인기있는 생과일 쥬스를 소개합니다!</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">상큼한 오렌지 쥬스</h3>
<p class="image__desc">
톡 쏘는 맛과 시원하고 달달한 오랜지 쥬스입니다.<br>
비타민C의 함유량도 엄청나요.
</p>
<a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">달콤한 딸기 쥬스</h3>
<p class="image__desc">
달달하고 맛있는 딸기쥬스입니다.<br>
한모금 마시면 잊을수가 없는 맛이죠.
</p>
<a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
반응형 코드
<style>
@media (max-width: 600px) {
.image__inner {
flex-direction: column;
}
.image {
width: 100%;
padding: 210px 20px 20px 20px;
}
.image:first-child {
margin-bottom: 20px;
}
.image__title {
font-size: 24px;
}
}
</style>
4. 이미지/텍스트 영역
이미지/텍스트 영역은 텍스트 파트와 이미지 파트가 합쳐진 영역입니다.
이미지/텍스트 영역 코드
<style>
/* imgTextType */
.imgText__inner {
display: flex;
justify-content: space-between;
}
.imgText__inner>div {
width: 32%;
height: 500px;
}
.imgText__txt span {
font-size: 16px;
color: #666;
text-decoration: underline;
text-underline-position: under;
margin-bottom: 20px;
display: block;
}
.imgText__txt h3 {
font-size: 50px;
font-weight: 300;
word-break: keep-all;
margin-bottom: 20px;
}
.imgText__txt p {
font-size: 18px;
font-weight: 300;
line-height: 1.5;
margin-bottom: 10px;
color: #666;
}
.imgText__txt ul {
font-size: 18px;
font-weight: 300;
line-height: 1.6;
}
.imgText__txt ul li {
position: relative;
padding-left: 20px;
}
.imgText__txt ul li a {
color: #666;
}
.imgText__txt ul li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 5px;
top: 9px;
background: #666;
}
.imgText__img {
border-radius: 10px;
position: relative;
}
.imgText__img a {
position: absolute;
left: 30px;
bottom: 30px;
background-color: #7c2b39;
color: #fff;
padding: 10px 30px;
font-size: 18px;
border-radius: 30px;
display: inline-block;
}
.imgText__img a.blue {
background-color: #2b387c;
}
.imgText__img.img1 {
background: url(../img/imgText_bg01.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
background: url(../img/imgText_bg02.jpg) no-repeat center / cover;
}
</style>
<section id="imgTextType" class="mgText__wrap nexon section gray">
<h2 class="blind">계절별 제철 과일 알아보기</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>Seasonal Fruits</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>
</ul>
</div>
<div class="imgText__img img1">
<a href="/">열대 과일</a>
</div>
<div class="imgText__img img2">
<a href="/" class="blue">한랭 과일</a>
</div>
</div>
</section>
<!-- //imgTextType -->
반응형 코드
<style>
@media (max-width:960px) {
.imgText__inner {
flex-wrap: wrap;
}
.imgText__txt h3 {
font-size: 40px;
margin-bottom: 20px;
}
.imgText__txt p {
margin-bottom: 60px;
}
.imgText__inner>div.imgText__txt {
width: 100%;
height: auto;
/*height값 초기화*/
text-align: center;
}
.imgText__inner>div.imgText__txt ul {
display: none;
}
.imgText__inner>div.imgText__img {
width: 49%;
}
}
@media (max-width:600px) {
.imgText__txt span {
font-size: 14px;
margin-bottom: 10px;
}
.imgText__txt h3 {
font-size: 30px;
}
.imgText__txt p {
margin-bottom: 50px;
font-size: 16px;
}
.imgText__inner>div.imgText__img {
width: 100%;
height: 200px;
}
.imgText__inner>div.imgText__img.img1 {
margin-bottom: 20px;
}
.imgText__img a {
left: 20px;
bottom: 20px;
}
}
</style>
5. 카드 영역
카드 영역은 몇가지의 섹션을 카드를 나열하듯 진열해 놓는 형태입니다.
카드 영역 코드
<style>
.card__inner {
display: flex;
justify-content: space-around;
}
.card {
width: 32%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 10px;
overflow: hidden;
/* 여기부터 아래까지 1줄 효과 */
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
overflow: hidden;
/* 여기부터 아래까지 3줄 효과 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
<section id="cardType" class="card__wrap nexon section gray">
<h2>과일로 만든 다양한 음식</h2>
<p>과일로 만든 맛있고 다양한 대표적인 음식을 소개합니다!</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<!-- 그림 넣을때 쓰는 웹표준 준수 하기 위한 태그 -->
<img src="assets/img/card_bg01_01.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">과일 샐러드</h3>
<p class="desc">
과일 샐러드는 다양한 야채와 과일을 섞어 넣고 소스에 버무려 먹는 대표적인 과일 음식입니다. 다양한 음식과 어울리며, 콘프레이크, 드레싱, 요구르트 등과 곁들어 먹기도 합니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<!--웹표준 준수하기 위해 보이스가 이걸 읽지 않도록 헤주는 태그-->
<svg width="71" height="8" viewBox="0 0 71 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M70.3536 4.35355C70.5488 4.15829 70.5488 3.84171 70.3536 3.64645L67.1716 0.464466C66.9763 0.269204 66.6597 0.269204 66.4645 0.464466C66.2692 0.659728 66.2692 0.976311 66.4645 1.17157L69.2929 4L66.4645 6.82843C66.2692 7.02369 66.2692 7.34027 66.4645 7.53553C66.6597 7.7308 66.9763 7.7308 67.1716 7.53553L70.3536 4.35355ZM0 4.5H70V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01_02.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">과일 타르트</h3>
<p class="desc">
과일 타르트는 비스켓 위에 크림과 갖가지 과일을 올려 먹는 달콤한 과자입니다. 유럽에서 오랜 역사를 가지고 있으며, 나라와 지역별로 종류도 다양해 많은 나라에서 사랑받고 있습니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="71" height="8" viewBox="0 0 71 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M70.3536 4.35355C70.5488 4.15829 70.5488 3.84171 70.3536 3.64645L67.1716 0.464466C66.9763 0.269204 66.6597 0.269204 66.4645 0.464466C66.2692 0.659728 66.2692 0.976311 66.4645 1.17157L69.2929 4L66.4645 6.82843C66.2692 7.02369 66.2692 7.34027 66.4645 7.53553C66.6597 7.7308 66.9763 7.7308 67.1716 7.53553L70.3536 4.35355ZM0 4.5H70V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01_03.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">과일 화채</h3>
<p class="desc">
과일 화채는 탄산수나 우유에 과일을 넣어 시원하게 해서 먹는 여름용 별미 음식입니다. 화채는 우리나라의 전통 음식으로 다양한 화채가 존재하나 특히 과일 화채가 가장 사랑받고
있습니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="71" height="8" viewBox="0 0 71 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M70.3536 4.35355C70.5488 4.15829 70.5488 3.84171 70.3536 3.64645L67.1716 0.464466C66.9763 0.269204 66.6597 0.269204 66.4645 0.464466C66.2692 0.659728 66.2692 0.976311 66.4645 1.17157L69.2929 4L66.4645 6.82843C66.2692 7.02369 66.2692 7.34027 66.4645 7.53553C66.6597 7.7308 66.9763 7.7308 67.1716 7.53553L70.3536 4.35355ZM0 4.5H70V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- //cardType -->
반응형 코드
<style>
@media (max-width: 960px) {
.card__inner {
flex-wrap: wrap;
}
.card {
width: 49%;
}
.card:last-child {
display: none;
}
}
@media (max-width: 600px) {
.card {
width: 100%;
}
.card:first-child {
margin-bottom: 20px;
}
.card__body {
padding: 20px;
}
.card__body .desc {
font-size: 16px;
}
}
</style>
6. 배너 영역
배너 영역은 말 그대로 길쭉한 플랜카드나 로고 등의 간단한 영역입니다.
배너 영역 코드
<style>
.banner__inner {
background-image: url(../img/banner_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
padding: 120px 0;
color: #fff;
}
.banner__inner .title {
font-size: 50px;
line-height: 1;
font-weight: 300;
margin-bottom: 40px;
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 300;
margin-bottom: 70px;
}
.banner__inner .desc a {
color: #fff;
display: block;
}
.banner__inner .desc a:hover {
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
text-decoration: underline;
}
@media (max-width: 960px) {
.banner__inner {
padding: 100px 0;
}
}
@media (max-width: 600px) {
.banner__inner {
padding: 80px 0;
}
.banner__inner .title {
font-size: 30px;
margin-bottom: 20px;
}
.banner__inner .desc {
font-size: 16px;
margin-bottom: 40px;
}
}
</style>
<section id="bannerType" class="banner__wrap nexon">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">저녁의 와인 한잔</h3>
<p class="desc">
오늘 밤은 좋은 무드를 가지고 와인 한잔 어떨까요?<br>
와인은 포도를 발효시켜 만든 오랜 역사를 가진 양조주입니다.
</p>
<span class="small">Let's try to wine!</span>
</div>
</section>
<!-- //bannerType -->
반응형 코드
<style>
@media (max-width: 960px) {
.banner__inner {
padding: 100px 0;
}
}
@media (max-width: 600px) {
.banner__inner {
padding: 80px 0;
}
.banner__inner .title {
font-size: 30px;
margin-bottom: 20px;
}
.banner__inner .desc {
font-size: 16px;
margin-bottom: 40px;
}
}
</style>
7. 텍스트 영역
텍스트 영역은 대부분이 텍스트로 이루어진 영역입니다.
텍스트 영역 코드
<style>
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
width: 32%;
margin-bottom: 2%;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
transition: background 0.4s;
}
.text:hover {
background: #f5f5f5;
}
.text__title {
font-size: 24px;
line-height: 1;
margin-bottom: 10px;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
padding-top: 75px;
}
.text__title::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
background: url(../img/text_icon.svg)
}
.text.t1 .text__title::before {
background-position: 0 0;
}
.text.t2 .text__title::before {
background-position: -60px 0;
}
.text.t3 .text__title::before {
background-position: -120px 0;
}
.text.t4 .text__title::before {
background-position: -180px 0;
}
.text.t5 .text__title::before {
background-position: -240px 0;
}
.text.t6 .text__title::before {
background-position: -300px 0;
}
.text__desc {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #666;
margin-bottom: 20px;
}
.text_btn {
font-size: 16px;
line-height: 1;
text-decoration: underline;
text-underline-position: under;
color: #666;
}
</style>
<section id="textType" class="text__wrap nexon section">
<span>Colors of fruits</span>
<h2 class="mb70">6가지 색깔의 과일</h2>
<div class="text__inner container">
<div class="text t1">
<h3 class="text__title">빨간색(Red)</h3>
<p class="text__desc">
화려하고 정렬적인 빨간색은 사람의 식욕을 돋구는 특징이 있습니다. 이런 식욕을 돋구는 색을 가진 과일은 딸기, 체리, 사과 등 다양하죠.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">노란색(Yellow)</h3>
<p class="text__desc">
명량하고 달콤한 느낌을 주는 노란색의 음식은 바나나가 대표하고 있습니다. 또한 열대과일 하면 빼놓을 수 없는 파인애플도 있죠!
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">초록색(Green)</h3>
<p class="text__desc">
마음이 진정되는 자연의 색인 초록색 역시 맛있는 과일을 내포하고 있습니다. 달콤한 멜론부터 시큼한 매실까지 맛도 다양하죠.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">오랜지색(Orange)</h3>
<p class="text__desc">
오랜지색은 말 그대로 오랜지의 색깔입니다. 세계 많은 나라에서 사랑받는 오랜지는 한라봉, 천혜향 등 종류도 다양하며, 가볍게 먹는 귤 역시 대표적인 과일입니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">보라색(Purple)</h3>
<p class="text__desc">
대표적인 보라색 과일하면 역시 포도죠! 과일로도, 와인으로도 너무나도 다양하게 쓰이는 음식입니다. 또한 여러 베리류 과일 역시 사랑받는 과일입니다.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">분홍색(Pink)</h3>
<p class="text__desc">
빨간색보다 은은하고 부드러운 느낌을 주는 분홍색도 달달하고 향기로운 식욕을 주는 색입니다. 분홍색에 속하는 과일로는 복숭아와 연한 색깔의 수박 등 보기만 해도 침이 고이는 음식이 있죠.
</p>
<a class="text_btn" href="/">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
반응형 코드
<style>
@media (max-width: 960px) {
.text {
width: 49%;
background: #f5f5f5;
}
}
@media (max-width: 600px) {
.text__title {
font-size: 20px;
}
.text__desc {
font-size: 16px;
}
}
@media (max-width: 480px) {
.text {
width: 100%;
}
}
</style>
8. 푸터 영역
푸터 영역은 가장 아래에 사이트 맵이나 주소 이메일 등이 간략히 들어가는 파트입니다.
푸터 영역 코드
<style>
.footer__menu {
display: flex;
margin-bottom: 70px;
}
.footer__menu>div {
width: 16%;
}
.footer__menu>div h3 {
font-size: 18px;
margin-bottom: 20px;
}
.footer__menu li a {
font-size: 14px;
color: #666;
margin-bottom: 10px;
display: block;
}
.footer__right {
border-top: 1px solid #d9d9d9;
text-align: center;
padding-top: 40px;
color: #666;
line-height: 1.5;
}
</style>
<footer id="footerType" class="footer__wrap nexon section gray">
<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="/">메뉴 유형 01</a></li>
<li><a href="/">메뉴 유형 02</a></li>
</ul>
</div>
<div>
<h3>슬라이드 영역</h3>
<ul>
<li><a href="/">슬라이드 유형 01</a></li>
<li><a href="/">슬라이드 유형 02</a></li>
</ul>
</div>
<div>
<h3>이미지 영역</h3>
<ul>
<li><a href="/">이미지 유형 01</a></li>
<li><a href="/">이미지 유형 02</a></li>
<li><a href="/">이미지/텍스트 유형 01</a></li>
<li><a href="/">이미지/텍스트 유형 02</a></li>
<li><a href="/">텍스트 유형 01</a></li>
</ul>
</div>
<div>
<h3>컨텐츠 영역</h3>
<ul>
<li><a href="/">카드 유형 01</a></li>
<li><a href="/">카드 유형 02</a></li>
<li><a href="/">카드 유형 03</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="/">푸터 메뉴 유형 01</a></li>
<li><a href="/">푸터 컨택트 유형 02</a></li>
<li><a href="/">푸터 이메일 유형 03</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2022 Webstoryboy. Portfolio is Power<br>
All rights reserved.
</div>
</div>
</footer>
<!-- footerType -->
반응형 코드
<style>
@media (max-width: 960px) {
.footer__menu {
display: none;
}
.footer__right {
padding-top: 0;
border-top: 0;
}
.footer__wrap {
padding: 40px 0;
}
}
</style>
※ 완성된 형태
'사이트 만들기' 카테고리의 다른 글
| 푸터 유형 사이트 01 (2) | 2022.09.06 |
|---|---|
| 배너 유형 사이트 01 (2) | 2022.09.06 |
| 슬라이드 유형 사이트 01 (2) | 2022.09.06 |
| 이미지/텍스트 유형 01 (6) | 2022.09.01 |
| 헤더 유형 01 (4) | 2022.09.01 |
댓글