묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨문제해결을 통한 웹프로그래밍 입문
공지
강좌 운영이나 강의 내용에 관해 궁금한 점이 있으면 자유롭게 나누어주세요.교수자, 수강생 누구나 글쓰기와 댓글 쓰기가 가능합니다.
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
퍼블리셔 코딩테스트 질문입니다.
퍼블리셔로 면접을 보게 되었는데 면접 끝나고 코딩 테스트를 본다고 연락을 받았습니다. js만 공부하면 될까요? 어떻게 준비하는 게 좋을지 질문드립니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
Brackets 다운르도는 했지만, 에밋 설치에서 문제가 발생했습니다.
현재 에밋을 설치하려 했지만 지원이 종료가 되서 그런가요? 검색 창이 비활성화가 되어 있고, 파일을 넣으라고 나와있습니다! 하지만 파일이 없어서 현재 강의를 진행하지 못하고 있습니다.
-
미해결쉽고 빠르게 만드는 다양한 이미지 이펙트!
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
ggang_effect.jsfunction ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition-delay를 어느곳에 주는냐에 따라 차이가 있는데 왜그런걸까요..?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Flex 레이아웃 이미지 어코디언 네비게이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="gallery"> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> </ul> </body> </html> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; } a { text-decoration: none; color:#fff; } .gallery{ list-style: none; margin:0; padding:0; height: 100vh; display: flex; } .gallery li{ flex:1; background:center no-repeat; border-right:3px solid #000; position:relative; overflow: hidden; transition:0.5s; } .gallery li:last-child{ border-right:none; } .gallery li:nth-of-type(1){background-image: url(images/artistic-image-01.jpg);} .gallery li:nth-of-type(2){background-image: url(images/artistic-image-02.jpg);} .gallery li:nth-of-type(3){background-image: url(images/artistic-image-03.jpg);} .gallery li:nth-of-type(4){background-image: url(images/artistic-image-04.jpg);} .gallery li:nth-of-type(5){background-image: url(images/artistic-image-05.jpg);} .gallery li .content{ position:absolute; width: 100%; background-color:#000; height: 250px; left:0; bottom:-300px; color:#fff; text-align: center; padding:20px; padding-top: 40px; box-sizing: border-box; transition:0.5s; } .gallery li .content:before{ content:''; position:absolute; width: 100%; height: 50px; top:0; left:0; background-color:#000; transform: rotate(-3deg) scale(1.3); transform-origin: left bottom; } .gallery li:hover{ flex:3; filter: grayscale(1); } .gallery li:hover .content{ bottom:0; transition-delay: 0.5s; } transition-delay:0.5s를 .gallery li .content와 .gallery li:hover .content 중 어느쪽에주느냐에 따라 차이가 있는데 왜 그런걸까요...ㅠㅠ .gallery li .content에 주면 li에 마우스가 벗어날때 .content박스가 사라지는것까지 보여버리는데(.gallery li:hover .content에 주면 문제없이 잘 작동됩니다.) .gallery li .content와 .gallery li:hover .content에 각각transition-delay를 주는게 어떤 차이때문에 다르게 보이는지알고싶습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
css full reload 문제가 발생하여 질문드립니다!
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <div class="awards-inner"> <div class="about-awards"> <div class="about-heading"> <!-- 이런식으로 부모요소로 묶기 --> <h2>2024 <br>Architecture Awards <br>Winner</h2> <hr class="bar"> <p> The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome. </p> <!-- 새창에서 띄우기 타겟 블랭크 --> <a href="https://architectureprize.com/" target="_blank">View the awards</a> </div> </div> <div class="victory-jump"> <img src="/images/victory-jump.png"> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <div class="location-inner"></div> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <!-- 스크롤 부분 --> <a href="#" class="gototop"><img src="images/gototop.png"></a> <!-- 폰트어썸 아이콘부분 --> <a href="#" class="btn-hiring"><i class="fa fa-commenting"></i> Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> * pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; } .gnb-inner { /*border: 1px solid #000;*/ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; /* 앞 px상하,뒤 px좌우 */ padding: 10px 20px; border-radius: 20px; /* 가로,세로,퍼짐정도 */ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } /* 버튼이 눌리는 느낌 */ .btn-hiring:active { transform: scale(0) } /* ################### Section : awards-winner ################### */ .awards-inner { height: 100%; border: 1px solid #ddd; } .awards-inner > div { border: 1px solid #000; float: left; width: 50%; height: 100%; position: relative; } .about-awards { background-color: #1a1f24; color: #fff; } .about-heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } .victory-jump { background-color: #fff; } .victory-jump img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; }선생님께서 올려주신 비쥬얼스튜디오 full reload 해결 방법 강의를 듣고 적용시킨 후 작업 중이였는데 갑자기 코딩 시 최상단으로 올라가는 현상이 발생합니다.설정을 다시 확인하고 익스텐션에서 open sever를 재설치하였음에도 해결되지 않아서 질문드립니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
태그는 어떻게 골라서 사용하나요?
<ul class="menu"> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> </ul>이런 태그는 어떤기준으로 선택해야할까요??직접 만들어보려고 하면 막상 태그를 어떤걸 지정해야할지 모르겠습니다.서브메뉴 4가지를 저는 한번더 ul 자식요소로 li와 함께 a태그를 같이 쓸줄알았는데 간단하게 div로 묶고 a태그를 사용하시고상위 메뉴 두개만 li를 사용하셨는데이런 태그선택의 기준이 궁금합니다. 혼자 만들어도 막상 강의랑 다르니까 헷갈리네요 ㅠ꼭 리스트목록이라고 ul이나 ol을 사용할 필요가 없는건가요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
파일 내 index.html에 대한 오류
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="/js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="/js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="./js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- Smooth scrolling --> <!-- <script src="./js/jquery.scrollTo.min.js"></script> --> <!-- custom js＆css --> <script src="./custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>>/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; $(function() { /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) // 중복되는 선택자 콤마로 이어감 $('section, .menu a').click(function(){ // 모바일에서 여백 섹션을 눌렀을 때 서브메뉴가 안으로 들어감 $('.gnb').removeClass('active') }) // // Smooth Scrolling // $('.menu a').click(function(e){ // // ||:쉬프트 +원표시 0.9초동안 슬라이딩 // $.scrollTo(this.hash || 0, 900); // })/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } 비쥬얼 스튜디오 오픈 서버로는 현재까지 작업 내용이 잘 표시되지만 폴더내에서 index 클릭 시 메인페이지 이미지가 표시 되지 않고 모바일로 변경시 사진과 같은 오류 문구와 함께 햄버거 버튼에 적용했던 효과들이 작동되지않습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <script src="./js/custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') }) })대상이 수동으로 처리되어 수동 이벤트 수신기 내부의 Default를 방지할 수 없습니다라는 문구가 뜹니다.말씀해주신대로 active 클래스를 지우고 다시 작성해보고커스텀 js의 문법도 맞추었는데 햄버거 버튼에 마우스 클릭 시 X표시로 변경되지 않습니다 ㅠㅠ 계속 똑같은 질문 드려 죄송합니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <script src="./js/custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>$(function() { /* Trigger */ $('.trigger').cli(function(){ $(this).toggleClass('active') }) })/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }햄버거 버튼이 x로 바뀌지 않습니다 ㅠㅠ
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }아까 질문드렸던 수강생입니다 추가하여 업로드 하였습니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
& History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div>@media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };위 코드 적용시 이렇게 임시 보더 박스가 표기 되지 않습니다 ㅠㅠ
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
실수로 style.css를 지워버렸습니다...
실수로 style.css파일을 지워서 다시 만들려고 style.scss에 watch sass를 눌렀는데 css파일이 다시 생기지가 않아요.. 해결 방법이 없을까요...? ㅠㅠ
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
웹디자인기능사 실기 감점 요인 질문!
강사님. 완벽히 준비하지 못했지만 월요일에 시험 치르고 왔습니다.ㅎㅎ ㅠㅠ아마 완벽히 준비를 못해서 불안한 마음에 이 글 남기는게 더 크지 싶습니다^^;;;이번으로 자격증 취득이 끝이 나야 할텐데요...ㅠㅠ포토샵 실습을 못해서 학생 때, 잠깐 포토샵 사용한 기술로 사진 크기 줄이는거만 어찌저찌 해서 5mb 이하로 용량 맞춰서 제출했네요.ㅠㅠ(실격 안 당하려고 무진장 애썼다능...) 제가 어떤 시험이든 준비하는 스타일이 합격선 이상으로 준비해서(모든 유형 마스터, 다 완성가능해야함) 시험을 치러야 마음이 편한 인간 부류인데...ㅋㅋㅋ이 시험은 아무리 강의를 본들, 코드 작성을 따라보고 친들, 이거는 제 스스로가 유형별로 만들어보지 않으면 시험합격하긴 어렵더라구요. 그리고 공부법도 시험친후 파악했구요ㅋㅋㅋ ㅠㅠ60점만 넘으면 되긴 하는데... 강사님처럼 완벽하게 하진 못했구요.ㅠ메뉴 마우스 오버 시에 색 바뀌는거랑 메뉴 마우스 올리면 배경이랑 서브메뉴 나오면서 주메뉴하고 서브메뉴 같은 색으로 바뀌게끔 작성하고 나오긴 했는데...ㅠ 감점 있을까요?ㅠㅠ그리고 나머지 배너, 공지사항 갤러리도 허접하게 했지만 그래도 하고는 나왔습니다.ㅠ슬라이드는 그래도 하고 나오긴 했어요. 문제는 이미지 용량을 무지 줄여서 좀^^;; 이것도 감점사유가 되나요?ㅠㅠ암튼...ㅠㅠ 어떤것들이 감점 요인으로 작용할까요?ㅠㅠ 넘 불안해요.이번으로 끝내고 싶은 마음이 간절하다보니 이렇게 글 남깁니다.아무튼 이런 좋은 강의 만들어주셔서 감사하고, 좋은 결과 나오면 다시한번 더 글 남기도록 할게요:)오늘도 좋은 하루 보내세요.ps) 참고로 a2 유형이었고, 아! 그리고 팝업도 하고 나왔습니다! 완벽히 준비하지 못해서 느낌이 애매하다 보니...ㅋ 글 작성하면서는 결과가 나쁘지는 않을 것 같은데... ㅜㅜ 그래도 이게 결과라는게 불확실하다보니까...ㅠ 감점이 어떻게 들어가는지 궁금하네요. 그리고 유형별로 슬라이드 내용을 포토샵으로 하면 안되는 유형도 있더라구요.아! 마지막으로 이건 건의사항인데요^^;;; 저희 강의에서 요약정리로 슬라이드 css, javascript 사용해서 보여주셨잖아요~ 메뉴도 유형별로 정리하는것도 나쁘지 않을 것 같습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
퍼블리싱 실전1 예제파일 다운로드
예제파일 어디서 다운 받을수 있나요? (구매는 완료함)
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
position 질문
header h1{width: 200px; height: 40px; margin: 30px 0;} header .gnb {width: 180px; height: 200px; margin: 0 auto; background: #0660da;} header .gnb li{height: 50px; line-height: 50px; text-align: center; font-size: 20px;} header .gnb li .lnb{width: 0px; position: absolute; transition: 0.3s; height: 50px; background: rgba(0,188,228,0.9); left: 190px; top: 100px; overflow: hidden; z-index: 10;} header .gnb li:hover{background: #0c4ba0;} header .gnb li a{color: #fff; display: block;} header .gnb:hover li .lnb{width: calc(100% - 190px); } header .gnb li .lnb li{float: left; font-size: 18px;} header .gnb li .lnb li a{padding: 0 20px;} header .gnb li:nth-child(2) .lnb{top: 150px;} header .gnb li:nth-child(3) .lnb{top: 200px;} header .gnb li:nth-child(4) .lnb{top: 250px;}position relative는 안적었는데 그럼 부모기준으로 .gnb li가 부모로 자동지정되는건가요? 참고로 D3 유형입니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 이미지 포토샵 질문
D,E,F타입의 경우 슬라이드 영역이 유동형인데포토샵에서 창 크기를 어느정도로 해야할까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 작동은 되는데 오류창이 떠요 ㅠㅠ
모달창 열리는거는 문제 없는데 닫기 누르면 이 창이 떠요. 닫히는 코드에 문제나 오타가 있다기에는 뒤로가기 누르면 또 제대로 닫혀 있어요.. 이전에는 공지사항 갤러리 탭 메뉴할때도 갤러리 누르면이 창이 떠서 뒤로가기 누르면 또 갤러리 탭이 제대로 실행되어있더라구요.. 다시 공지사항 누르면 저 오류창은 안뜨구요. 제이쿼리가 작동은 되는데 중간에 이 창이 뜨는 이유를 모르겠어요 ㅠㅠ 크롬으로 연결해도 똑같이 뜨네요 ㅠㅠ
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
건의사항
강사님. 오늘도 수고 많으십니다:)다름이 아니라 지금 연습을 하고 있습니다만, 업로드된 코드들A유형부터 F유형까지 수정 점검 한번 부탁드립니다.^^;;분명 강의 업로드나 수업자료 등 강사님 계획이 있으셨을 듯 한데...^^;; 시험이 얼마 안남은지라 급하게 제가 요청드려서 죄송합니다.ㅠㅠ 제가 고치면서 하고는 있는데 유형별로 A1부터 F4까지 중간 중간 수정이 필요할듯해서요. 코드들 확인 부탁드립니다.오늘도 좋은 하루 되시길 바라며, 오늘도 열공하러 갑니다. 좋은 강의 감사합니다.
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
D2유형 슬라이드 질문있습니다.
강사님. 혹시 슬라이드 사진 E유형처럼 100%로 보이게 어떻게 하면 되는건가요?ㅠㅠ 코드 부탁드립니다.
