게시글
질문&답변
2022.03.23
슬릭슬라이더 크롬에서 안 나옴.
너무 감사드립니다.ㅜㅜ 확인 해보니, 바로 원인이 적혀있더라구요 https 에스를 빼먹어서였어요 크롬에서도 정상작동합니다, 콘솔확인할 생각을 못했네요 감사합니다!!!!!!
- 0
- 2
- 202
질문&답변
2022.03.23
라이트박스...아무리해도 안됩니다.
DOCTYPE html > html lang = "ko" > head > meta charset = "utf-8" /> title > Blake's Portfolio title > 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 Portfolio a > div > nav > div class = "navi" > a href = "#" > about a > div > div class = "navi" > a href = "#" > skill a > div > div class = "navi" > a href = "#" > coding a > div > div class = "navi" > a href = "#" > mobile a > div > div class = "navi" > a href = "#" > website a > 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" > HTML div > 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" > CSS div > 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" > jQuery div > 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" > Mobile div > 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 Web div > 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 & Animation div > 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-Ui div > 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 & Navigation div > 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 ]); } }
- 1
- 2
- 169