<!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>
<meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
<meta property="og:url" content="http://www.mango.dothome.co.kr" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="망고의 포트폴리오" />
<meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
<meta name="twitter:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav>
<ul class="gnb">
<li class="on"><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
<li><a href="#section4">section4</a></li>
<li><a href="#section5">section5</a></li>
<li><a href="#section6">section6</a></li>
<li><a href="#section7">section7</a></li>
<li><a href="#section8">section8</a></li>
<li><a href="#section9">section9</a></li>
</ul>
</nav>
<ul class="sideNav">
<li class="on"><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
<li><a href="#section4">section4</a></li>
<li><a href="#section5">section5</a></li>
<li><a href="#section6">section6</a></li>
<li><a href="#section7">section7</a></li>
<li><a href="#section8">section8</a></li>
<li><a href="#section9">section9</a></li>
</ul>
<main class="container">
<section class="section" id="section1">section1</section>
<section class="section" id="section2">section2</section>
<section class="section" id="section3">
<div class="ball">ball</div>
section3
</section>
<section class="section" id="section4">section4</section>
<section class="section" id="section5">section5</section>
<section class="section" id="section6">section6</section>
<section class="section" id="section7">section7</section>
<section class="section" id="section8">section8</section>
<section class="section" id="section9">section9</section>
</main>
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="jq.js"></script>
</body>
</html>
[reset다운로드](https://meyerweb.com/eric/tools/css/reset/)
```css
@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap');
html {
overflow-x: hidden;
}
html,
body,
a,
table {
font-family: 'Black And White Picture', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
}
ul,
li,
ol {
list-style: none;
}
a {
text-decoration: none;
}
body::-webkit-scrollbar {
width: 1em;
background-color: red;
background-image: repeating-conic-gradient(#474bff 0% 25%, #47d3ff 0% 50%);
background-position: 0 0, 38px 38px;
background-size: 46px 76px;
background-color: #47d3ff;
}
body::-webkit-scrollbar-thumb {
}
body::-webkit-scrollbar-button {
width: 3em;
height: 3em;
background-color: #282972;
box-shadow: 1px 1px 3px #000;
}
body::-webkit-scrollbar-thumb {
width: 10em;
height: 10em;
background-color: #47d3ff;
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
border-radius: 3px 0 0 3px;
box-shadow: 1px 1px 4px #000;
}
/* nav */
nav {
position: absolute;
top: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.4);
padding: 1em 1.4em;
width: 100%;
}
nav.sticky {
background: rgba(255, 0, 100, 0.6);
position: fixed;
z-index: 222;
}
nav .gnb {
display: flex;
width: 100%;
max-width: 1600px;
margin: auto;
}
nav .gnb li {
flex: 1 1 200px;
}
nav .gnb li a {
color: #fff;
display: inline-block;
padding: 0.2rem;
text-align: center;
line-height: 2rem;
height: 2rem;
position: relative;
}
nav .gnb li a:before,
nav .gnb li a:after {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 2px;
background: #000;
transform: scaleX(0);
transition: all 0.5s;
}
nav .gnb li a:before {
top: 0;
transform-origin: left;
}
.gnb li a:after {
bottom: 0;
transform-origin: right;
}
nav .gnb li.on a:before,
nav .gnb li a:hover:before,
nav .gnb li.on a:after,
nav .gnb li a:hover:after {
transform: scaleX(1);
}
.container {
}
section {
min-height: 100vh;
line-height: 100vh;
text-align: center;
background-color: yellow;
margin: 40vw auto;
}
section::selection {
color: red;
background-color: #00eeff;
}
/* sideNav */
.sideNav {
position: fixed;
top: 10%;
right: 10%;
z-index: 999;
}
.sideNav a {
display: inline-block;
padding: 1em;
background: rgba(0, 0, 0, 0.5);
color: #fff;
margin-bottom: 1em;
}
.sideNav li.on a::before {
content: '😺';
}
/* sectionIn */
section {
position: relative;
}
section .ball {
position: absolute;
background-color: skyblue;
width: 450px;
height: 450px;
border-radius: 50%;
left: -450px;
transition: left 1s;
}
section.on .ball {
left: 100px;
}
```
```js
let win = $(window),
sections = $('.section'),
gnb = $('.gnb li'),
sideNav = $('.sideNav>li');
const gnbOff = () => {
gnb.each(() => {
this.removeClass('on');
});
};
gnb.click(function (e) {
e.preventDefault();
let tg = $(this);
let index = tg.index();
let section = sections.eq(index);
let offset = section.offset().top;
$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
});
sideNav.click(function (e) {
e.preventDefault();
let tg = $(this);
let index = tg.index();
let section = sections.eq(index);
let offset = section.offset().top;
$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
});
win.scroll(function () {
let sct = win.scrollTop();
sections.each(function (i) {
if (sct >= sections.eq(i).offset().top - 300) {
$('.gnb li').eq(i).addClass('on').siblings().removeClass('on');
sideNav.eq(i).addClass('on').siblings().removeClass('on');
sections.eq(i).addClass('on').siblings().removeClass('on');
}
});
sct > 400 ? $('nav').addClass('sticky') : $('nav').removeClass('sticky');
});
```
```js
let win = window,
winSct,
sections = document.querySelectorAll('.section'),
gnb = document.querySelectorAll('.gnb li'),
sideNav = document.querySelectorAll('.sideNav>li');
const gnbOff = () => {
gnb.forEach((o) => {
o.classList.remove('on');
});
};
const navOff = () => {
sideNav.forEach((o) => {
o.classList.remove('on');
});
};
gnb.forEach((el) => {
el.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
gnbOff();
el.classList.add('on');
});
});
sideNav.forEach((el) => {
el.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
navOff();
el.classList.add('on');
});
});
win.addEventListener('scroll', function (e) {
e.preventDefault();
winSct = this.scrollY;
winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');
scrollOn(winSct);
});
const scrollOn = (sct) => {
if (sct >= sections[0].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(1)').classList.add('on');
document.querySelector('.sideNav li:nth-child(1)').classList.add('on');
sections[0].classList.add('on');
}
if (sct >= sections[1].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(2)').classList.add('on');
document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
sections[1].classList.add('on');
}
if (sct >= sections[2].offsetTop - 700) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(3)').classList.add('on');
document.querySelector('.sideNav li:nth-child(3)').classList.add('on');
sections[2].classList.add('on');
}
if (sct >= sections[3].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(4)').classList.add('on');
document.querySelector('.sideNav li:nth-child(4)').classList.add('on');
}
if (sct >= sections[4].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(5)').classList.add('on');
document.querySelector('.sideNav li:nth-child(5)').classList.add('on');
}
if (sct >= sections[5].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(6)').classList.add('on');
document.querySelector('.sideNav li:nth-child(6)').classList.add('on');
}
if (sct >= sections[6].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(7)').classList.add('on');
document.querySelector('.sideNav li:nth-child(7)').classList.add('on');
}
if (sct >= sections[7].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(8)').classList.add('on');
document.querySelector('.sideNav li:nth-child(8)').classList.add('on');
}
if (sct >= sections[8].offsetTop - 300) {
gnbOff();
navOff();
document.querySelector('.gnb li:nth-child(9)').classList.add('on');
document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
}
};