728x90
반응형
사이트 만들기 01
script 코드
<link rel="stylesheet" href="assets/css/swiper.css" />
<!-- Swiper JS -->
<script src="assets/js/swiper.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 2000,
},
pagination: {
el: ".swiper-pagination",
type: 'bullets',
},
});
const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-play");
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");
btnStart.style.display = "none";
btnStop.addEventListener("click", () => {
swiper.autoplay.stop();
btnStart.style.display = "block";
btnStop.style.display = "none";
});
btnStart.addEventListener("click", () => {
swiper.autoplay.start();
btnStart.style.display = "none";
btnStop.style.display = "block";
});
btnMenuList.forEach((list) => {
list.addEventListener("click", () => {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
});
});
btnHam.addEventListener("click", () => {
btnHam.classList.toggle("active");
btnMenu.classList.toggle("active");
document.body.classList.toggle("fixed");
});
window.addEventListener("resize", () => {
let width = window.innerWidth;
if (width > 1300) {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
}
});
//스크롤 이동
document.querySelectorAll("a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});
</script>
html
코드 보기
<main id="mainType">
<section id="sliderType" class="slder__wrap">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<!-- <div class="slider">
<div class="silder__img">
<div class="desc">
<span>DEVELOPER</span>
<h3>NEW PROJECT</h3>
<p>너무 무리하지 말아요! 이미 당신은 잘하고 있고!<br>
앞으로도 잘 할 수 있어요! </p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir">이전 이미지</span></a>
<a href="#" class="right"><span class="ir">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir">1</span></a>
<a href="#" class="dot"><span class="ir">2</span></a>
<a href="#" class="dot"><span class="ir">3</span></a>
<a href="#" class="play"><span class="ir">플레이</span></a>
<a href="#" class="stop"><span class="ir">정지</span></a>
</div>
</div> -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="desc">
<span>DEVELOPER</span>
<h3>NEW PROJECT</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>DEVELOPER</span>
<h3>NEW PROJECT</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>DEVELOPER</span>
<h3>NEW PROJECT</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>
<!--sliderType-->
<section id="imageType" class="image__wrap section NexonLv1Gothic gray">
<span class="blind">이미지 유형01</span>
<h2>레서판다</h2>
<p>레서판다의 귀여움을 알아보자.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__tit">레서판다가 줄 타는 모습</h3>
<p class="image__desc">레서판다가 줄타는 모습을 보십시오. 너무 귀엽지 않나요.. 귀여워서 깨물고 <br>
싶어요...너구리랑 햇갈리지 맙시다.</p>
<a class="image__btn" href="#" title="자세히보기">자세히보기</a>
</article>
<article class="image img2">
<h3 class="image__tit">레서판다의 귀여운 모습</h3>
<p class="image__desc">가만히 있어도 귀여운 헤서판다. 래교부리는 모습도 너무 귀엽다. 너구리랑 햇갈리지 맙시다..</p>
<a class="image__btn yellow" href="/" title="자세히보기">자세히보기</a>
</article>
</section>
<!--imageType-->
<section id="textType" class="text__wrap Nexon section">
<span class="blind">텍스트 유형 01</span>
<h2 class="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">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</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>
<!--imgTextType-->
<section id="cardType" class="card__wrap NexonLv1Gothic section">
<span class="blind">카드 유형 01</span>
<h2>말티즈 강의</h2>
<p>우리집 말티즈의 귀여움을 알아보자.</p>
<div class="card__inner container">
<article class="card">
<!-- alt 웹 표준성 화살표 모양은 백터 방식이나 이미지파일로 넣을수 있다.
css 벡터/비트맵 방식 정리 하기.비트맵 방식-> png투명도 처리,jpg 화려한 효과, jif 애니메이션 효과 가능 256색깔만 지원해서 단순한 것만 사용가능
이미지 표현 3가지 img->의미,로고->의미x backgvad, 이미지
-->
<figure class="card__header">
<img src="img/card_bg01_01.jpg" alt="웹표준 사이트 만들기">
</figure>
<div class="card__body">
<h3 class="tit">말티즈가 한심하게 처다볼때</h3>
<p class="decs">말티즈는 가끔 아니 자주 주인을 한심하게 처다볼때가 많습니다.성격이 치와와급으로 더럽습니다.자기 마음에 안들면 짖습니다. 간식주면 다
따라갑니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269203 60.6597 0.269203 60.4645 0.464466C60.2692 0.659728 60.2692 0.97631 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card ">
<figure class="card__header">
<img src="img/card_bg01_02.jpg" alt="웹표준 사이트 만들기">
</figure>
<div class="card__body ">
<h3 class="tit">말티즈가 산책할때</h3>
<p class="decs">말티즈는 산책을 아주 좋아합니다. 간식을 들고 가도 산책을 더 좋아해서 간식을 처다도 안봅니다.주인이 멈춰도 알아서 자기가 갈길을 갑니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269203 60.6597 0.269203 60.4645 0.464466C60.2692 0.659728 60.2692 0.97631 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg01_03.jpg" alt="웹표준 사이트 만들기">
</figure>
<div class="card__body">
<h3 class="tit">말티즈가 간식 달라고 할때</h3>
<p class="decs">말티즈는 간식을 원할 때 주인을 뚫어져라 처다보거나 간식이 있는 곳으로 가 짖습니다.한개만 주면 더 달라고 쪼릅니다. 안주면 주인 다리를
발톱으로 박박
긁습니다.</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269203 60.6597 0.269203 60.4645 0.464466C60.2692 0.659728 60.2692 0.97631 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0L0 4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!--cardType-->
<section id="bannerType" class="banner__wrap">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">유튜버 웹보이</h3>
<p class="desc">
더 다양한 강의는 유튜브를 통해 제공하고 있습니다.
<a href="#" title="유튜브 페이지로 이동"></a>
</p>
<span class="small">배너 유형01</span>
</div>
</section>
<!--bannerType-->
<section id="imgTextType" class="imgText__wrap section NexonLv1Gothic">
<h2 class="blind">이미지 텍스트 유형 01</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>이미지 텍스트 유형 01</span>
<h3>유용한 사이트 살펴보기</h3>
<p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다.</p>
<ul>
<li><a href="/">튜토리얼 사이트</a></li>
<li><a href="/">레퍼런스 사이트</a></li>
<li><a href="/">웹폰트 사이트</a></li>
<li><a href="/">CSS 사이트</a></li>
<li><a href="/">WebGL 사이트</a></li>
<li><a href="/">Youtube 사이트</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>
<!--textType-->
</main>
<!-- mainType -->
<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></div>
</div>
</div>
</footer>
<!-- footerType -->
CSS
header.css 코드 보기
/* 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;
z-index: 10000;
left: 0;
top: 0;
background: #fff;
}
.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: 60%;
text-align: center;
}
.header__menu li a:hover {
background-color: #f1f1f1;
border-radius: 5px;
}
.header__menu.overlay {
right: 0;
width: 100%;
height: 100vh;
transition: height 0.3s ease-in;
}
.header__menu.overlay li a {
opacity: 1;
}
.header__menu li {
display: inline;
}
.header__menu li a {
padding: 13px 30px;
margin: 0 5px;
}
.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: all 0.3s;
}
.header__member a:hover {
background-color: #000;
color: #fff;
}
.header__ham {
position: absolute;
right: 10px;
top: 10px;
z-index: 1000;
width: 50px;
height: 50px;
display: none;
cursor: pointer;
}
.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, 0.25s transform;
}
.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);
}
/* media */
.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;
left: 0;
top: 0;
z-index: 10000;
background: #fff;
}
.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: 60%;
text-align: center;
} */
/* .header__menu li {
display: inline;
}
.header__menu li a {
padding: 13px 30px;
margin: 0 5px;
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: all 0.3s;
}
.header__member a:hover {
background-color: #000;
color: #fff;
}
.header__ham {
position: absolute;
right: 10px;
top: 10px;
z-index: 1000;
width: 50px;
height: 50px;
display: none;
cursor: pointer;
}
.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, 0.25s transform;
}
.header__ham span:nth-child(1) {
margin-top: 18px;
}
.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);
}
/* media */
@media (max-width: 1300px) {
.header__menu {
position: fixed;
right: -100%;
top: 69px;
background: #fff;
width: 60%;
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 {
margin-right: 50px;
}
.header__ham {
display: block;
}
.header__logo {
width: 50%;
}
.header__member {
width: 50%;
}
}
@media (max-width: 600px) {
}
slder.css
.slider__inner {
margin-top: 70px;
}
.slider {
position: relative;
}
.silder__img {
background: url(/site/site1/img/SLIDER_TYPE01_01.jpg) no-repeat center / cover;
}
.silder__img .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
}
.silder__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;
}
.silder__img .desc h3 {
font-size: 110px;
font-weight: 300;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
margin-left: -8px;
}
.silder__img .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 130px;
}
.silder__img .desc .btn {
}
.silder__img .desc .btn a {
font-size: 16px;
background-color: #fff;
padding: 11px 50px;
display: inline-block;
}
.silder__img .desc .btn a.black {
background: #000;
color: #fff;
}
.slider__arrow a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 56px;
background: url(/site/site1/img/slider_icon.svg);
background-position: -20px -70px;
}
.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(/site/site1/img/slider_icon.svg);
}
.slider__dot a.active {
background-position: 0px -70px;
}
.slider__dot a.play {
background-position: -40px -70px;
}
.slider__dot a.stop {
background-position: -60px -70px;
}
/* swiper-slide */
.swiper-slide {
background: url(/site/site1/img/SLIDER_TYPE01_01.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 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(/site/site1/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(/site/site1/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: 25px;
z-index: 1000;
display: flex;
}
.swiper-button-stop {
background-image: url(/site/site1/img/slider_icon.svg);
background-position: -60px -70px;
width: 16px;
height: 16px;
cursor: pointer;
}
.swiper-button-play {
background-image: url(/site/site1/img/slider_icon.svg);
background-position: -40px -70px;
width: 16px;
height: 16px;
cursor: pointer;
}
/* media */
@media (max-width: 960px) {
.swiper-slide .desc {
width: 100%;
text-align: center;
}
.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;
}
}
imge.css 코드 보기
/* image */
.image__wrap {
}
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 48%;
height: 370px;
padding: 200px 20px 20px 20px;
box-sizing: border-box;
color: #fff;
}
.image.img1 {
background: url(/site/site1/img/imgType01_1.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(/site/site1/img/imgType01_2.jpg) no-repeat center / cover;
}
.image__tit {
font-size: 32px;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image__desc {
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
font-weight: 300;
padding-right: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
font-size: 16px;
font-weight: 300;
color: #fff;
background: #ba5a30;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #b59140;
}
@media (max-width: 960px) {
}
@media (max-width: 600px) {
.image__inner {
flex-direction: column; /*사진을 밑으로 보내줌*/
}
.image {
width: 100%;
padding: 210px 20px 30px 30px;
}
.image:first-child {
margin-bottom: 20px;
}
.image__title {
font-size: 24px;
}
}
text.css 코드 보기
//* textType */
.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(/site/site1/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;
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: unset;
color: #666;
}
@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%;
}
}
card.css 코드 보기
/* cartType */
.card__inner {
display: flex;
justify-content: space-between;
}
.card {
width: 100%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card__body .decs {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
@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 .decs {
display: none;
}
}
banner.css 코드 보기
.banner__inner {
background-image: url(/site/site1/img/BANNER-TYPE01.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;
}
}
imgText.css 코드 보기
/* 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: unset;
margin-bottom: 20px;
display: block;
}
.imgText__txt h3 {
font-size: 50px;
font-weight: 300;
margin-bottom: 20px;
}
.imgText__txt p {
font-size: 18px;
font-weight: 300;
line-height: 1.5;
color: #666;
margin-bottom: 10px;
}
.imgText__txt ul {
font-size: 18px;
font-weight: 300;
line-height: 1.6;
}
.imgText__txt ul li {
padding-left: 20px;
position: relative;
}
.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;
font-size: 18px;
padding: 10px 30px;
border-radius: 30px;
display: inline-block;
}
.imgText__img .blue {
background-color: #2b387c;
}
.imgText__img.img1 {
background: url(/site/site1/img/imgText_bg01.jpg) no-repeat center;
}
.imgText__img.img2 {
background: url(/site/site1/img/imgText_bg02.jpg) no-repeat center;
}
@media (max-width: 960px) {
.imgText__inner {
flex-wrap: wrap;
}
.imgText__txt h3 {
font-size: 40px;
}
.imgText__txt p {
margin-bottom: 60px;
}
.imgText__inner > div.imgText__txt {
width: 100%;
height: auto;
text-align: center;
}
.imgText__inner > div.imgText__txt ul {
display: none;
}
.imgText__inner > div.imgText__img {
width: 49%;
}
}
@media (max-width: 600px) {
.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:first-child {
margin-bottom: 20px;
}
.imgText__img a {
left: 20px;
bottom: 20px;
}
}
footer.css 코드 보기
.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;
}
@media (max-width: 960px) {
.footer__menu {
display: none;
}
.footer__right {
padding-top: 0;
border-top: 0;
}
.footer__wrap {
padding: 40px 0;
}
}
728x90
댓글