인프런 커뮤니티 질문&답변
작성한 질문수
라이트박스...아무리해도 안됩니다.
작성
·
240
1
선생님 ㅜㅜ이 3가지 cdn넣고 말씀주신대로 data-alt="iframe" 해도 나오질 않습니다,,, 구글링해보니 어떤 사람은 iframe앞에 data-lightbox 이렇게 적으라던데
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
그렇게 해보아도 전혀 안 나오네요 ㅜㅜ문제가 뭘까요
답변 2
0
Youmi Choi
질문자
<!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" />
<!-- fabicon -->
<link rel="icon" href="img/blake.ico" />
<!-- iphone fabicon -->
<link rel="apple-touch-icon" href="img/blake.ico" />
<!-- ie fabicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/blake.ico" />
<!-- CSS Reset -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- https://fontawesome.com/start -->
<script src="https://kit.fontawesome.com/f1def33959.js" crossorigin="anonymous"></script>
<!-- Spoca Han Sans Neo: https://spoqa.github.io/spoqa-han-sans/ko-KR/ -->
<link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<!-- slick slider -->
<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>
<!-- main img -->
<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>
<!-- skill -->
<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>
<!-- coding -->
<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 -->
<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>
<!-- jquery cdn -->
<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>
<!-- wow.js file link -->
<script src="/js/wow.min.js"></script>
<!-- wow.js -->
<script>
new WOW().init();
</script>
<script>
wow = new WOW(
{
boxClass: 'wow',
offset: 200,
mobile: true,
live: false
}
)
wow.init();
</script>
<!-- slick slider js -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- slick slider -->
<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]);
}
}
0
