<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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:image" content="..."> -->
<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="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
<!-- <meta name="twitter:image" content="..." /> -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<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>
<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>
<section class="section" id="section1">section1</section>
<section class="section" id="section2">section2</section>
<section class="section" id="section3">
<div class="ball">ball</div>
<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>
<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>
reset다운로드
@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');
font-family: 'Black And White Picture', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
body::-webkit-scrollbar {
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 {
background-color: #282972;
box-shadow: 1px 1px 3px #000;
body::-webkit-scrollbar-thumb {
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;
background: rgba(0, 0, 0, 0.4);
background: rgba(255, 0, 100, 0.6);
nav .gnb li a:hover:before,
nav .gnb li a:hover:after {
background-color: yellow;
background-color: #00eeff;
background: rgba(0, 0, 0, 0.5);
.sideNav li.on a::before {
background-color: skyblue;
sections = $('.section'),
sideNav = $('.sideNav>li');
let section = sections.eq(index);
let offset = section.offset().top;
$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
sideNav.click(function (e) {
let section = sections.eq(index);
let offset = section.offset().top;
$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
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');
sections = document.querySelectorAll('.section'),
gnb = document.querySelectorAll('.gnb li'),
sideNav = document.querySelectorAll('.sideNav>li');
o.classList.remove('on');
o.classList.remove('on');
el.addEventListener('click', function (e) {
document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
sideNav.forEach((el) => {
el.addEventListener('click', function (e) {
document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
win.addEventListener('scroll', function (e) {
winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');
const scrollOn = (sct) => {
if (sct >= sections[0].offsetTop - 300) {
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) {
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) {
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) {
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) {
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) {
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) {
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) {
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) {
document.querySelector('.gnb li:nth-child(9)').classList.add('on');
document.querySelector('.sideNav li:nth-child(2)').classList.add('on');