728x90
반응형
html 마크업
#contents css편집
한 페이지당 h2가 들어가도록 편집
h2 그라디이션으로 배경 넣기
#nav 편집
nav z-index : 100;
cursor : 1000; 지정한다.
h1 편집
.menu 편집
<script>
● 상수: 변하지 않는 값
● 변수 : 변하는 값
스크롤 될 때마다 top 값이 변경됨
if 조건문 넣어주기
submenu가 밑에 있다가
스크롤을 하면 위로 붙게 된다.
각 페이지 별 active 활성화하기 (글자색 변경)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav id="nav">
<h1>로고</h1>
<ul class="menu">
<li class="active"><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</nav>
<section id="contents">
<article id="article1"><h2>오늘은 금요일입니다.</h2></article>
<article id="article2"><h2>그리고 6월의 마지막날입니다</h2></article>
<article id="article3"><h2>2023년 절반이 되는 날</h2></article>
<article id="article4"><h2>2023년 계획이행률 1%인 듯</h2></article>
<article id="article5"><h2>나머지 99%는</h2></article>
<article id="article6"><h2>지금부터 열심히 이룹시다</h2></article>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// const 변하지 않는 상수값 / 변하는 값은 변수값
const nav = $("#nav ul li");
const cont = $("#contents > article");
nav.click(function(e){
e.preventDefault();
// 기존에 위로 올라가려고하는 성질을 막아줌
let target = $(this);
// 변하는 값 = let
let index = target.index();
// target 의 인덱스 번호를 알아서 인덱스라는 변수안에 넣어준다.
let section = cont.eq(index);
// article을 section이라는 아이안에 콘텐츠를 선택
let offset = section.offset().top;
// 컨텐츠의 맨위 좌표를 찾자
$("html").animate({scrollTop:offset},600);
// offset 만큼 0.6초동안 스크롤 하겠다.
});
// 스크롤 됐을 때 이벤트 발생해야함
$("#nav").each(function(){
// nav 이름을 변경 >> const = header
const header = $(this);
const hedaerOffset = header.offset().top;
// console.log(hedaerOffset);
$(window).scroll(function(){
// 윈도우가 스크롤 됐을때 이벤트 발생시켜라
let wScroll = $(this).scrollTop();
// console.log(wScroll);
if(wScroll > hedaerOffset){
header.addClass("on");
}else{
header.removeClass("on");
}
});
});
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
if(wScroll >= cont.eq(0).offset().top){
nav.removeClass("active");
nav.eq(0).addClass("active");
}
if(wScroll >= cont.eq(1).offset().top){
nav.removeClass("active");
nav.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().top){
nav.removeClass("active");
nav.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().top){
nav.removeClass("active");
nav.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().top){
nav.removeClass("active");
nav.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().top){
nav.removeClass("active");
nav.eq(5).addClass("active");
}
});
</script>
</body>
</html>@charset "utf-8";
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
clear: both;
}
#contents{
text-align: center;
height: 100vh;
width: 100%;
line-height: 100vh;
}
#contents > article{}
#contents > article > h2{
font-size: 5vw;
white-space: nowrap;
}
#article1{ background: radial-gradient(ellipse farthest-corner at center center ,#6beace 0%, #2e9ae4 100%);}
#article2{ background: radial-gradient(ellipse farthest-corner at left center ,#f39264 0%, #f2606f 100%);}
#article3{ background: radial-gradient(ellipse farthest-corner at 20% 20% ,#7eea6b, #2e71e4);}
#article4{ background: radial-gradient(ellipse farthest-corner at right bottom ,#ff2275 0%, #ff8530 100%);}
#article5{ background: radial-gradient(ellipse farthest-corner at left top ,#6cebcf 0%, #38a7aa 100%);}
#article6{ background: radial-gradient(ellipse farthest-corner at center center ,#69d2fb, #20438e);}
/* nav */
#nav{
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
/* nav가 가장 위에 위치하게 100으로 한다. */
z-index: 100;
}
#nav.on{
position: fixed;
top: 0;
}
#nav h1{
float: left;
height: 60px;
font-size: 40px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px #ccc;
}
#nav .menu{
float: right;
}
#nav .menu li{
/* menu 옆으로 나열 */
display: inline;
}
#nav .menu li a{
/* 인라인 블럭으로 해주어야 높이, 너비값이 적용됨 */
display: inline-block;
height: 60px;
/* background-color: #38a7aa; */
/* 양 옆 여백 넣기 */
padding: 0px 20px;
/* disflay: flex 가 안먹기 때문에 inline-flex 적용 */
display: inline-flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
font-weight: bold;
}
#nav .menu li.active{}
#nav .menu li.active a{
color: #000;
text-transform: uppercase;
}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 (0) | 2023.07.03 |
|---|---|
| 비주얼 스튜디오 코드 58_햄버거 메뉴 복습 (0) | 2023.07.03 |
| 비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0) | 2023.06.30 |
| 비주얼 스튜디오 코드 55_ parallax04 (0) | 2023.06.29 |
| [JAVASCRIPT]5.클래스 제어하기 (0) | 2023.06.29 |