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>Document</title>
<!-- seo 포폴때 참고 -->
<meta name="author" content="codi">
<meta name="description" content="사이트 만들기 연습해보기!">
<meta name="keyword" content="사이트, 만들기, 튜토리얼, 웹스토리보이">
<meta name="robots" content="all">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css"> <!-- 폰트 -->
<link rel="stylesheet" href="assets/css/reset.css"> <!-- 리셋 -->
<link rel="stylesheet" href="assets/css/common.css"> <!-- 공통 -->
<!-- CSS(섹션별) -->
<link rel="stylesheet" href="assets/css/card.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/image.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/text.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/header.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/imgText.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/banner.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/footer.css"> <!-- 공통 -->
<link rel="stylesheet" href="assets/css/slider.css"> <!-- 공통 -->
</head>
<body>
<div style="position: fixed; width: 50px; height: 50px; bottom: 0; left: 0;" class="check">체크용</div>
<!-- 웹표준 준수시 필요 -->
<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>
<header id="headerType" class="header__wrap nexon">
<div class="header__inner">
<div class="header__logo">
<a href="#">#여행_가자!</a>
</div>
<div class="header__menu">
<ul>
<!-- <li><a href="#headerType">헤더 영역</a></li> -->
<li class="actived"><a href="#sliderType">슬라이드 영역</a></li>
<li><a href="#imageType01">이미지 영역</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>
</header>
<div class="header__menu__media">
<ul>
<!-- <li><a href="#headerType">헤더 영역</a></li> -->
<div id="header_logo_media" class="header__logo media">
<a href="#">#여행_가자! <em>자연으로</em></a>
</div>
<li class="actived"><a href="#sliderType">슬라이드 영역</a></li>
<li><a href="#imageType01">이미지 영역</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>
<!-- //headerType -->
<main id="mainType">
<section id="sliderType" class="slider__wrap baegopa">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__img one show">
<div class="desc">
<span>어디로 가볼까?</span>
<h3>#새하얀_눈.</h3>
<p>눈 덮힌 마을 속<br>고히 잠들어 있는 새싹들</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="slider__img two">
<div class="desc">
<span>시원한곳 없을까?</span>
<h3>#보글보글</h3>
<p>여기는 아름다운 민스크시의 보글거리는 바닷가.<br>마음도 보글보글</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="slider__img three">
<div class="desc">
<span>자유로운곳 없을까?</span>
<h3>#넓디_넓은_바닷가.</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>
</section>
<!-- //sliderType -->
<section id="imageType01" class="image__wrap nexon section baegopa container">
<h2>#내_여행_동반자</h2>
<p>내 여행동안 내 외로움을 채워줄 소울 메이트는 어떠세요?</p>
<div class="image__inner">
<article class="image img1">
<h3 class="image__title">불독은 어떠세요?</h3>
<p class="image__desc">
불독은 혼종이라고 하는데, 사람들에게 인기많은 이유는<br>
생김새를 떠나서 강아지를 키운다는 그 사실이 좋은겁니다.</p>
<a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">웰시코기는 어떠세요?</h3>
<p class="image__desc">
웰시코기는 다리가 참 짧죠? 그래서 키우는 사람들도 많은 편이고<br>
총총 걸어다니는 모습을 보고있자니 너무 귀엽답니다!</p>
<a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
<!-- //imageType -->
<section id="imgTextType" class="imgText__wrap nexon section gray baegopa">
<h2 class="blind">유용한 사이트 살펴보기 🎮</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>여행 속 내 비즈니스</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 -->
<section id="cardType" class="card__wrap nexon section baegopa container">
<!--다중 클래스 선택-->
<h2>#여행_중_게임은_못참지🎮</h2>
<p>새롭고 혁신적인 PS5™ 컨트롤러로 완전히 몰입할 수 있는 게임 경험을 즐겨보시기 바랍니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<!--img를 쓰기 위한 웹 표준 방법-->
<img src="assets/img/card_bg01_01.jpg" alt="다양한 인터렉티브 반응">
</figure>
<div class="card__body">
<h3 class="tit">다양한 인터렉티브 반응</h3>
<p class="desc">인게임 기어 및 환경과 상호작용하면서 활시위를 당길 때 점점 팽팽해지는 느낌과 질주하는 자동차의 급브레이크를 밟는 느낌 등 액션과 함께 어우러집니다.
</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true"> <!--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.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 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.5H0V4.5Z" fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure>
<!--img를 쓰기 위한 웹 표준 방법-->
<img src="assets/img/card_bg01_02.jpg" alt="게임패드 지원">
</figure>
<div class="card__body">
<h3 class="tit">게임패드 지원</h3>
<p class="desc">내장 마이크를 사용하거나 3.5mm 잭에 미니멀하고 아이코닉한 헤드셋을 연결 전용 음소거 버튼을 사용하여 음성 캡처를 즉시 끌 수 있습니다.</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.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 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.5H0V4.5Z" fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure>
<!--img를 쓰기 위한 웹 표준 방법-->
<img src="assets/img/card_bg01_03.jpg" alt="진동을 통한 생생한 현장감">
</figure>
<div class="card__body">
<h3 class="tit">진동을 통한 생생한 현장감</h3>
<p class="desc">기존의 진동 모터 대신 듀얼 액추에이터가 선사하는 물리적 반응형 피드백을 경험해보세요, 게임 내 환경에서부터 실감 나는 역동적인 진동이 손을 타고
전해집니다.</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.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 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.5H0V4.5Z" fill="black" />
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- //cardType -->
<section id="bannerType" class="banner__wrap nexon section baegopa">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">#내_손으로_만들어_가는_루트</h3>
<p class="desc">
다양하고 다채로운 도시의 모습은 이곳을 참조하세요!
<a href="" title="유튜브 페이지로 이동">https://www.youtube.com/channel/UCqVDpXKLmKeBU_yyt_QkItQ/</a>
</p>
<span class="small">도시 속 모습_01</span>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon text__wrap section baegopa container">
<span>텍스트 유형01</span>
<h2 class="mb70">#어느걸_찾으세요?</h2>
<div class="text__inner">
<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>
<!-- //textType -->
<div id="olaga">위로!</div>
</main>
<!-- //mainType -->
<footer id="footerType" class="footer__wrap nexon section gray baegopa">
<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>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">웹표준 사이트</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2022 CODi. Portfolio is power<br>
All rights reserved.
</div>
</div>
</footer>
<!-- //footerType -->
<script>
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //이렇게 3개 중첩해서 사용 가능
//forEach 문
document.querySelectorAll(".baegopa").forEach((e,i)=>{
if(scrollTop >= e.offsetTop-500){ //scrollTop이 id값 이상이면
document.querySelectorAll(".header__menu ul li").forEach((li)=>{
li.classList.remove("actived");
})
document.querySelector(".header__menu ul li:nth-child("+(i+1)+")").classList.add("actived");
}
})
})
//스크롤 이동
document.querySelectorAll(".header__menu ul li a").forEach(li => {
// console.log(li)
li.addEventListener("click", (e)=>{
e.preventDefault(); //클릭하면 이동하는걸 막아줌
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
})
})
//스크롤 이동
document.querySelectorAll(".header__menu__media ul li a").forEach(li => {
// console.log(li)
li.addEventListener("click", (e)=>{
e.preventDefault(); //클릭하면 이동하는걸 막아줌
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
})
})
//이미지 넘기기
let i = 1;
document.querySelector(".right").addEventListener("click", ()=>{
i++
if(i<=3){
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
} else{
i = 1;
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
// document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
}
})
document.querySelector(".left").addEventListener("click", ()=>{
i--
if(i===0){
i = 3;
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
} else{
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
// document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
}
})
//스크롤
window.addEventListener("scroll", ()=>{
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
document.querySelector(".check").innerText=scrollTop;
if(scrollTop>=70){
document.querySelector("#header_logo_media").classList.add("inline")
document.querySelector("#olaga").classList.add("opacity")
} else {
document.querySelector("#header_logo_media").classList.remove("inline")
document.querySelector("#olaga").classList.remove("opacity")
}
})
//스크롤 탑
document.querySelector("#olaga").addEventListener("click", ()=>{
window.scrollTo({left: 0, top: 0, behavior: "smooth"});
})
</script>
</body>
</html>
CSS : 헤더 유형
헤더용 CSS의 전부입니다
/* headerType */
.media{
display: none;
}
.inline{
display: inline !important;
}
.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;
background: rgba(255, 255, 255, 0.637);
z-index: 100;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.494);
white-space: nowrap;
}
.header__logo{
width: 10%;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
}
.header__logo em{
font-size: 18px;
font-weight: 400;
}
.header__menu{
width: 80%;
text-align: center;
/* overflow-x: scroll;
overflow-y: hidden; */
}
.header__menu li{
display: inline;
}
.header__menu li a{
padding: 13px 10px;
margin: 0 5px;
transition: background-color 0.3s;
}
.header__menu li a:hover{
background-color: #f1f1f1;
border-radius: 5px;
}
.header__menu__media{
display: none;
}
.header__member{
width: 10%;
text-align: right;
}
.header__member a{
font-size: 16px;
border: 1px solid #000;
padding: 10px 30px;
border-radius: 50px;
transition: all 0.25s;
}
.header__member a:hover{
background-color: #000;
color: #fff;
}
#header_logo_media{
font-size: 20px;
padding: 0 20px;
margin-right: 20px;
border-right: 1px solid #00000047;
}
.header__menu__media::-webkit-scrollbar{
height: 4px;
margin-bottom: 2px;
background-color: rgba(255, 255, 255, 0.494);
}
.header__menu__media::-webkit-scrollbar-button{}
.header__menu__media::-webkit-scrollbar-thumb{
background-color: rgb(255 168 18);
}
.header__menu__media::-webkit-scrollbar-track{}
@media (max-width: 1150px){
.header__inner{
padding: 0 50px;
}
.header__menu{
display: none;
}
.header__logo{
margin: 0 auto;
text-align: center;
}
.header__menu__media{
display: block;
width: 100%;
text-align: center;
overflow: scroll hidden;
white-space: nowrap;
margin-top: 70px;
position: fixed;
background: rgba(255, 255, 255, 0.637);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 1000;
height: 55px;
padding-top: 20px;
position: sticky;
top: 0;
}
.header__menu__media li{
display: inline;
}
.header__menu__media li a{
padding: 13px 30px;
margin: 0 5px;
transition: background-color 0.3s;
}
}
@media (max-width: 750px){
.header__inner{
/* padding: 0 100px; */
justify-content: space-between;
}
.header__logo{
width: 20%;
margin: 0;
}
.header__member{
width: 20%;
}
}
CSS : 이미지 유형
이미지유형의 CSS의 전부입니다
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
border-radius: 5px;
}
.image.img1 {
background: url(../img/bg01_01.jpg) no-repeat center;
background-size: cover;
}
.image.img2 {
background: url(../img/bg01_02.jpg) no-repeat center;
background-size: cover;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.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;
border-radius: 5px;
}
.image__btn.yellow {
background-color: #B59140;
}
@media (max-width: 1215px){
.container{
width: 100%;
}
.image{
width: 100%;
}
.image:nth-child(1){
margin-bottom: 20px;
}
.image__inner{
flex-wrap: wrap;
}
}
@media (max-width: 1150px){
.slider__inner{
margin-top: 0 !important;
}
}
@media (max-width: 750px){
.section>h2{
font-size: 30px;
}
.section>p{
font-size: 16px;
}
}
CSS : 이미지+텍스트 유형
이미지+텍스트 유형의 CSS의 전부입니다
/* imgTextType */
.imgText__inner{
display: flex;
justify-content: space-between;
}
.imgText__inner>div{
width: 32%;
height: 500px;
}
.imgText__txt{}
.imgText__txt span{
font-size: 16px;
color: #666;
text-decoration: underline;
text-underline-position: under;
margin-bottom: 20px;
}
.imgText__txt h3{
font-size: 50px;
font-weight: bold;
word-break: keep-all;
line-height: 1.4;
margin-bottom: 20px;
margin-top: 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{
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;
font-size: 18px;
padding: 10px 30px;
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;
}
@media (max-width: 600px){
.imgText__inner{
display: block;
padding: 20px;
box-sizing: border-box;
}
.imgText__img{
margin-bottom: 20px;
}
.imgText__inner>div{
width: 100%;
/* height: 385px; */
}
.section:nth-child(3){
padding: 20px 0;
}
}
CSS : 배너 유형
배너 유형의 CSS의 전부입니다
.banner__inner {
background-image: url(../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: bold;
padding-bottom: 20px;
/* margin-bottom: 20px; */
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 300;
margin-bottom: 40px;
}
.banner__inner .desc a{
color: #fff;
display: inline-block;
background: #00000021;
backdrop-filter: blur(15px);
border-radius: 5px;
padding: 3px 10px;
border: 1px solid #ffffff29;
margin-top: 40px;
}
.banner__inner .desc a:hover{
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
/* text-decoration: underline; */
}
@media (max-width: 600px){
.banner__inner{
padding: 120px 20px;
box-sizing: border-box;
}
.banner__inner .desc a{
text-overflow: ellipsis;
overflow-y: clip;
}
}
CSS : 슬라이더 유형
슬라이더 유형의 CSS의 전부입니다
.slider__inner {
margin-top: 70px;
position: relative;
}
.slider {
position: relative;
}
.slider__img {
/* background: url(../img/slider_bg01.jpg) no-repeat center / cover; */
}
.slider__img.show.one{
display: block;
}
.one{
background: url(../img/slider_bg01.jpg) no-repeat center / cover;
display: none;
z-index: -5;
position: relative;
}
.three::before,
.two::before,
.one::before{
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.387);
position: absolute;
z-index: -1;
}
.two {
background: url(../img/slider_bg02.jpg) no-repeat center / cover;
display: none;
z-index: -5;
position: relative;
}
.three {
background: url(../img/slider_bg03.jpg) no-repeat center / cover;
display: none;
z-index: -5;
position: relative;
}
.show{
display: block;
}
.slider__img .desc {
/* width: 1160px; */
/* margin: 0 auto; */
padding: 100px;
text-align: center;
}
.slider__img .desc span {
font-size: 16px;
background-color: #ffffff17;
padding: 7px 10px;
text-transform: uppercase;
margin-bottom: 10px;
display: inline-block;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
.slider__img .desc h3 {
font-size: 90px;
font-weight: bold;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
margin-left: -8px;
margin-top: 20px;
}
.slider__img .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 80px;
}
.slider__img .desc .btn {}
.slider__img .desc .btn a {
font-size: 16px;
background-color: rgba(255, 255, 255, 0.537);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 11px 50px;
display: inline-block;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.48);
}
.slider__img .desc .btn a.black {
background: rgba(0, 0, 0, 0.457);
color: #fff;
}
.slider__arrow{
z-index: 5;
}
.slider__dot{
z-index: 5;
}
.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: 0px -70px;
}
.slider__dot a.play{
background-position: -40px -70px;
}
.slider__dot a.stop{
background-position: -60px -70px;
}
.slider{
position: relative;
}
@media (max-width: 920px){
.slider__img .desc h3{
font-size: 50px;
}
}
JS : 모든 동작
제가 사용한 스크립트의 전부이며 각 스크립트가 무엇인지는 주석으로 적어두었습니다.
//메뉴선택
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //이렇게 3개 중첩해서 사용 가능
//forEach 문
document.querySelectorAll(".baegopa").forEach((e,i)=>{
if(scrollTop >= e.offsetTop-500){ //scrollTop이 id값 이상이면
document.querySelectorAll(".header__menu ul li").forEach((li)=>{
li.classList.remove("actived");
})
document.querySelector(".header__menu ul li:nth-child("+(i+1)+")").classList.add("actived");
}
})
})
//스크롤 이동
document.querySelectorAll(".header__menu ul li a").forEach(li => {
// console.log(li)
li.addEventListener("click", (e)=>{
e.preventDefault(); //클릭하면 이동하는걸 막아줌
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
})
})
//스크롤 이동
document.querySelectorAll(".header__menu__media ul li a").forEach(li => {
// console.log(li)
li.addEventListener("click", (e)=>{
e.preventDefault(); //클릭하면 이동하는걸 막아줌
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
})
})
//이미지 넘기기
let i = 1;
document.querySelector(".right").addEventListener("click", ()=>{
i++
if(i<=3){
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
} else{
i = 1;
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
// document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
}
})
document.querySelector(".left").addEventListener("click", ()=>{
i--
if(i===0){
i = 3;
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
} else{
document.querySelectorAll(".slider__img").forEach((e,i)=>{
e.classList.remove("show")
})
document.querySelectorAll(".dot").forEach((e,i)=>{
e.classList.remove("active")
})
document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
document.querySelector(".dot:nth-child("+i+")").classList.add("active");
// document.querySelector(".slider__img:nth-child("+i+")").classList.add("show");
}
})
//스크롤
window.addEventListener("scroll", ()=>{
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
document.querySelector(".check").innerText=scrollTop;
if(scrollTop>=70){
document.querySelector("#header_logo_media").classList.add("inline")
document.querySelector("#olaga").classList.add("opacity")
} else {
document.querySelector("#header_logo_media").classList.remove("inline")
document.querySelector("#olaga").classList.remove("opacity")
}
})
//스크롤 탑
document.querySelector("#olaga").addEventListener("click", ()=>{
window.scrollTo({left: 0, top: 0, behavior: "smooth"});
})
완성!
너무나 지쳤읍니다
오늘은 화요일 차를 빌렸는데 차가 주저 앉았읍니다
이보다 좋은 하루가 있을까요?
728x90
반응형
'SITE 제작' 카테고리의 다른 글
| 사이트 유형 종합_02 : 버그 픽스와 함께 사이트 유형 종합의 완성도를 UP! (10) | 2022.09.15 |
|---|---|
| 내.디.코 : 티스토리 스킨 만들어보기_01 (9) | 2022.09.12 |
| 패럴렉스 효과_03 : TOP 버튼과 네비 메뉴를 스크롤에 따라 변화시켜보자! (10) | 2022.09.11 |
| 스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자! (9) | 2022.09.08 |
| 배너 유형 01 한번 만들어 봅시다! (7) | 2022.09.05 |
댓글