슬릭슬라이더 크롬에서 안 나옴.

너무 감사드립니다.ㅜㅜ 확인 해보니, 바로 원인이 적혀있더라구요 https 에스를 빼먹어서였어요 크롬에서도 정상작동합니다, 콘솔확인할 생각을 못했네요 감사합니다!!!!!!

라이트박스...아무리해도 안됩니다.

DOCTYPE html> html lang="ko"> head> meta charset="utf-8" /> title>Blake's Portfoliotitle> meta name="description" content="최유미 퍼블리싱 포트폴리오" /> meta name="keywords" content="Portfolio" /> meta name="author" content="Blake Choi" /> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> meta http-equiv="X-UA-Compatible" content="ie=edge" /> link rel="icon" href="img/blake.ico" /> link rel="apple-touch-icon" href="img/blake.ico" /> link rel="shortcut icon" type="image/x-icon" href="img/blake.ico" /> link rel="stylesheet" href="css/normalize.css" /> script src="https://kit.fontawesome.com/f1def33959.js" crossorigin="anonymous">script> link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" /> link rel="stylesheet" href="css/style.css" /> link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> head> body> header> div class="inner"> div class="head-container"> div class="head-brand">a href="#">Blake Choi's Portfolioa>div> nav> div class="navi">a href="#">abouta>div> div class="navi">a href="#">skilla>div> div class="navi">a href="#">codinga>div> div class="navi">a href="#">mobilea>div> div class="navi">a href="#">websitea>div> nav> div> div> header> section class="main"> div class="inner"> div class="main-container"> div class="title-container"> div class="title">br>기초탄탄 신입 웹퍼블리셔 최유미입니다.div> div class="message">겸손한 자세로 꾸준히 발전하는 퍼블리셔가 되겠습니다. div> div> div class="slider-container"> div>img src="/img/web-1.png" alt="웹결과물이미지입니다.">div> div>img src="/img/web-2.png" alt="웹결과물이미지입니다.">div> div>img src="/img/web-3.png" alt="웹결과물이미지입니다.">div> div>img src="/img/web-4.png" alt="웹결과물이미지입니다.">div> div>img src="/img/web-5.png" alt="웹결과물이미지입니다.">div> div> div> div> section> section> div class="inner"> div class="skill-container"> div class="skill"> div class="skill-title"> i class="fab fa-html5 icons">i> div class="skill-name">HTMLdiv> div class="skill-des">웹표준과 접근성을 고려하여 구조를 짭니다.div> div> div> div class="skill"> div class="skill-title"> i class="fab fa-css3-alt icons">i> div class="skill-name">CSSdiv> div class="skill-des">크로스브라우징을 위해 안정적인 CSS 속성을 사용하여 디자인합니다.div> div> div> div class="skill"> div class="skill-title"> i class="fab fa-js icons">i> div class="skill-name">jQuerydiv> div class="skill-des">탭메뉴, 어코디언 등 상호작용을 위한 주요 제이쿼리 사용시, 순수 제이쿼리 하드코딩으로 제작합니다.div> div> div> div class="skill"> div class="skill-title"> i class="fas fa-mobile-alt icons">i> div class="skill-name">Mobilediv> div class="skill-des">모바일 사용자 경험의 최적화를 위해 효율적인 컨텐츠 배치를 우선적으로 하며 모바일 웹앱 제작 경험도 있습니다.div> div> div> div class="skill"> div class="skill-title"> i class="fas fa-running icons">i> div class="skill-name">Responsive Webdiv> div class="skill-des">반응형 웹 제작시 flex와 grid 방식을 사용,media query를 활용한 기존 방식 또한 활용합니다.div> div> div> div> div> section> section> div class="inner"> div class="coding" data-position="0"> div class="coding-title-container"> div class="coding-title wow ttb">Hover & Animationdiv> div class="arrow-container"> i class="fas fa-arrow-alt-circle-left slide-prev">i> i class="fas fa-arrow-alt-circle-right slide-next">i> div> div> ul class="coding-list"> li class="coding-card"> a href="portfoilo/cording-works/hover/05/index.html">img src="/img/a4.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/06/index.html">img src="/img/a5.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/07/index.html">img src="/img/a6.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/02/index.html">img src="/img/a1.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/01/index.html">img src="/img/a.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/03/index.html">img src="/img/a2.png" alt="후버결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="portfoilo/cording-works/hover/04/index.html">img src="/img/a3.png" alt="후버결과물입니다." class="coding-img">a> li> ul> div> div class="coding" data-position="0"> div class="coding-title-container"> div class="coding-title wow ttb">Prototype & Card-Uidiv> div class="arrow-container"> i class="fas fa-arrow-alt-circle-left slide-prev">i> i class="fas fa-arrow-alt-circle-right slide-next">i> div> div> ul class="coding-list"> li class="coding-card"> a href="/portfoilo/cording-works/prototype/08/index.html">img src="/img/p1.png" alt="카드UI결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/06/index.html">img src="/img/p2.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/07/index.html">img src="/img/p3.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/04/index.html">img src="/img/p7.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/02/index.html">img src="/img/p5.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/03/index.html">img src="/img/p6.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/05/index.html">img src="/img/p8.png" alt="카드UI결과물입니다" class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/prototype/01/index.html">img src="/img/p4.png" alt="카드UI결과물입니다" class="coding-img">a> li> ul> div class="coding" data-position="0"> div class="coding-title-container"> div class="coding-title wow ttb">Tab & Navigationdiv> div class="arrow-container"> i class="fas fa-arrow-alt-circle-left slide-prev">i> i class="fas fa-arrow-alt-circle-right slide-next">i> div> div> ul class="coding-list"> li class="coding-card"> a href="/portfoilo/cording-works/navigation/09/index.html">img src="/img/t1.png" alt="탭메뉴결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/navigation/04/index.html">img src="/img/t2.png" alt="탭메뉴결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/navigation/06/index.html">img src="/img/t4.png" alt="탭메뉴결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/navigation/07/index.html">img src="/img/n1.png" alt="탭메뉴결과물입니다." class="coding-img">a> li> li class="coding-card"> a href="/portfoilo/cording-works/navigation/10/index.html">img src="/img/n2.png" alt="탭메뉴결과물입니다." class="coding-img">a> li> ul> div> div> div> section> footer> div class="inner"> div class="footer-message wow btt">누구나 처음은 서툴기만 합니다, 하지만 항상 처음인 것도 span>스스로 찾아가며 발전span>하는 웹퍼블리셔가 되겠습니다.div> div class="footer-submessage wow btt">지금까지 span>최유미span> 신입 웹퍼블리셔의 포트폴리오였습니다. 감사합니다:)div> div> footer> a id="backtotop">a> script src="https://code.jquery.com/jquery-3.6.0.min.js">script> script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js">script> script type="text/babel" src="js/main.js">script> script type="text/babel" src="js/arrow.js">script> script src="/js/wow.min.js">script> script> new WOW().init(); script> script> wow = new WOW( { boxClass: 'wow', offset: 200, mobile: true, live: false } ) wow.init(); script> script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">script> script type="text/javascript"> $('.slider-container').slick({ dots: false, infinite: true, speed: 4000, slidesToShow: 1, slidesToScroll: 1, autoplay : true, autoplaySpeed : 1000, pauseOnHover : true, arrows: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, dots: false } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); script> body> html> css * { box-sizing: border-box; } body { margin: 0 auto; color: #3f464d; font-family: "Spoqa Han Sans Neo", "Sans-serif"; } /* a reset*/ a { all: unset; } a:link { text-decoration: none; color: #3f464d; } a:visited { text-decoration: none; color: #3f464d; } a:active { text-decoration: none; color: #3f464d; } a:hover { text-decoration: none; color: #3f464d; } /* wow.js */ .ttb { animation: ttb 2s linear both; } .btt { animation: btt 1s linear both; } @keyframes ttb { 0% { opacity: 0; transform: translateY(-150px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes btt { 0% { opacity: 0; transform: translateY(150px); } 100% { opacity: 1; transform: translateY(0); } } .inner { width: 100%; height: 100%; margin: 0 auto; padding: 0 2rem; overflow: hidden; } /* header */ header { width: 100%; height: 60px; background-color: #ffffff; position: fixed; top: 0; left: 0; z-index: 1000; } .head-container { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .head-container .head-brand { font-weight: bold; font-size: 1.2em; } .head-container .head-brand a:hover { color: #2186c4; cursor: pointer; } .head-container nav { display: flex; justify-content: center; align-items: center; } .head-container nav .navi { font-weight: bold; font-size: 0.8em; padding: 0.3rem; text-transform: uppercase; } .head-container nav .navi a:hover { color: #2186c4; cursor: pointer; } section { width: 100%; background-color: #fff; position: relative; } .main { height: 360px; /* background-image: url(/img/web-1.png); background-repeat: no-repeat; background-size: contain; background-position: center 10%; */ z-index: 1; } .main-container { position: relative; } .slider-container { width: 100%; height: 100%; opacity: 0.3; z-index: 1; margin-top: 15px; padding-top: 50px; } .slider-container img { display: block; margin: auto; height: 300px; } .title-container { position: absolute; top: 50%; left: 50%; padding-top: 180px; z-index: 2; transform: translate(-50%, -50%); } .title { min-width: 11px; white-space: nowrap; margin: 0; color: transparent; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: bold; color: rgb(51, 51, 51); /* margin-bottom: 0.5rem; */ } .title::before { content: "Blake Choi !"; position: absolute; top: 0; left: 0; width: 100%; /* height: 100%; */ color: black; overflow: hidden; border-right: 1px solid black; animation: typing 3s steps(31) infinite; } @keyframes typing{ 0% { width: 0%; } 25% { width: 20% } 60% { width: 35%; } 100% { width: 0%; } } .message { font-size: 0.7rem; font-weight: normal; color: #333; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* skill */ .skill-container { width: 100%; min-height: 450px; display: flex; justify-content: space-around; align-items: center; /* padding: 1rem 0; */ } .skill { width: 25%; min-height: 250px; background-color: rgb(255, 255, 255); display: flex; align-items: center; padding: 1.5rem 2rem; margin: 0px 0.5rem; flex-wrap: wrap; border: 1px solid rgb(51, 51, 51); transition: all 0.4s ease 0s; } .skill:hover { transform: translate(0, -7px); background-color: rgb(120, 241, 235); color: #fff; } .skill-icon { font-size: 2.5rem; margin: 0 10px; } .skill-title { display: flex; flex-direction: column; align-content: center; } .icons { text-align: center; font-size: 2rem; } .skill-name { font-weight: bold; color: #3f464d; text-align: center; padding: 1rem 0.5rem; } .skill-des { font-size: 0.9rem; color: #3f464d; line-height: 20px; word-break: break-all; } /* coding */ .coding { width: 100%; margin-top: 2rem; } .coding-title-container { width: 100%; display: flex; justify-content: space-between; align-items: center; } .coding-title { font-size: 1.3rem; font-weight: bold; color: #3f464d; } /* arrow */ .slide-prev { font-size: 2rem; cursor: pointer; } .slide-next { font-size: 2rem; cursor: pointer; color: rgb(224, 222, 222); } .slide-prev-hover:hover { transition: transform 0.5s; transform: translate(-2px); } .slide-next-hover:hover { transition: transform 0.5s; transform: translate(2px); } .arrow-container { display: flex; } .coding-list { display: flex; list-style: none; padding: 1rem 0; margin: 0; overflow: none; } .coding-card { width: 150px; height: 150px; box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); border-radius: 8px; margin: 0 13px; transition: 0.4s; flex-shrink: 0; } .coding-card:hover { box-shadow: 10px 10px 10px 0px rgba(25, 42, 70, 0.2); transform: translate(0, -7px); } .coding-img { max-width: 150px; border-radius: 10px; height: 150px; } /* coding ends */ /* footer */ li { cursor: pointer; } footer { border-top: 1px solid #e4e4e4; background-color: #f8f9fa; padding: 1rem 0; margin: 1rem 0; } .footer-message { font-weight: bold; margin: 0.4rem 0.5rem; color: #545e6f; } .footer-submessage { font-weight: lighter; margin: 0.8rem 0.5rem; color: #545e6f; } .footer-submessage span { color: #2186c4; font-weight: 900; } /* back to top */ #backtotop { background-color: rgb(47, 48, 89); width: 40px; height: 40px; text-align: center; border-radius: 20px; position: fixed; bottom: 30px; right: 30px; transition-property: background-color, opacity, visibility; transition-duration: 0.3s, 0.5s, 0.5s; opacity: 0; visibility: hidden; z-index: 99999; } #backtotop::after { content: "\f106"; font-family: FontAwesome; font-weight: 900; font-size: 1.5rem; line-height: 40px; color: #fff; } #backtotop.show:hover { cursor: pointer; background-color: rgb(120, 241, 235); } #backtotop.show { opacity: 1; visibility: visible; background-color: rgb(47, 48, 49); } @media only screen and (min-width: 1200px) { .inner{ max-width: 1200px; } } @media only screen and (max-width: 980px) { .head-container .head-brand{ font-size: 0.8em; } .head-container nav .navi{ font-size: 0.5em; font-weight: lighter; } .title-container { display: none; } .skill-container { display: none; } footer { font-size: 0.7rem; word-break: keep-all; } } main.js const backToTop = document.getElementById('backtotop'); const checkScroll = () => { let pageYOffset = window.pageYOffset; if (pageYOffset !== 0) { backToTop.classList.add('show'); } else { backToTop.classList.remove('show'); } } const moveBackToTop = () => { if (window.pageYOffset > 0) { window.scrollTo({top: 0, behavior: "smooth"}) } } window.addEventListener('scroll', checkScroll); backToTop.addEventListener('click', moveBackToTop); arrow.js // arrow function transformNext(event) { const slideNext = event.target; const slidePrev = slideNext.previousElementSibling; const classList = slideNext.parentElement.parentElement.nextElementSibling; let activeLi = classList.getAttribute('data-position'); const liList = classList.getElementsByTagName('li'); if (Number(activeLi) 0) { activeLi = Number(activeLi) + 173; slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click', transformPrev); if (Number(activeLi) === 0) { slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-next-hover'); slideNext.removeEventListener('click', transformNext); } } classList.style.transition = 'transform 1s'; classList.style.transform = 'translateX(' + String(activeLi) + 'px)'; classList.setAttribute('data-position', activeLi); } function transformPrev(event) { const slidePrev = event.target; const slideNext = slidePrev.nextElementSibling; const classList = slidePrev.parentElement.parentElement.nextElementSibling; let activeLi = classList.getAttribute('data-position'); const liList = classList.getElementsByTagName('li'); if (classList.clientWidth liList.length * 173 + Number(activeLi))) { activeLi = Number(activeLi) - 173; if (classList.clientWidth > (liList.length * 173 + Number(activeLi))) { slidePrev.style.color = '#cfd8dc'; slidePrev.classList.remove('slide-prev-hover'); slidePrev.removeEventListener('click', transformPrev); } slideNext.style.color = '#2f3059'; slideNext.classList.add('slide-next-hover'); slideNext.addEventListener('click', transformNext); } classList.style.transition = 'transform 1s'; classList.style.transform = 'translateX(' + String(activeLi) + 'px)'; classList.setAttribute('data-position', activeLi); } const slidePrevList = document.getElementsByClassName('slide-prev'); for (let i = 0; i slidePrevList.length; i++) { let classList = slidePrevList[i].parentElement.parentElement.nextElementSibling; let liList = classList.getElementsByTagName('li'); if (classList.clientWidth liList.length * 173)) { slidePrevList[i].classList.add('slide-prev-hover'); slidePrevList[i].addEventListener('click', transformPrev); } else { const arrowContainer = slidePrevList[i].parentElement; arrowContainer.removeChild(slidePrevList[i].nextElementSibling); arrowContainer.removeChild(slidePrevList[i]); } }