173만명의 커뮤니티!! 함께 토론해봐요.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의 응용하다 막히는 부분이 있어 질문 드립니다. 이 강의에 부분을 메뉴에서도 활용 할 수 있을것 같아 아래와 같이 만들어 보았습니다. HTML <header> <div class="gnb"> <div class="search_menu"> <div class="dropdown"> <div class="nav1 title">MENU1-1</div> <ul class="sub_nav1 sub_nav"> <li><a href="#none">MENUI1-1</a></li> <li><a href="#none">MENUI1-2</a></li> <li><a href="#none">MENUI1-3</a></li> <li><a href="#none">MENUI1-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav2 title">MENU2-1</div> <ul class="sub_nav2 sub_nav"> <li><a href="#none">MENU2-1</a></li> <li><a href="#none">MENU2-2</a></li> <li><a href="#none">MENU2-3</a></li> <li><a href="#none">MENU2-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav3 title">MENU3-1</div> <ul class="sub_nav3 sub_nav"> <li><a href="#none">MENU3-1</a></li> <li><a href="#none">MENU3-2</a></li> <li><a href="#none">MENU3-3</a></li> <li><a href="#none">MENU3-4</a></li> </ul> </div> </div> </div> </header> CSS @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); * { padding: 0; margin: 0; list-style: none; font-size: 10px; } a{ text-decoration: none; } header .search_menu { background-color: #9c9388; display: flex; } header .selectbox { position: relative; border-right: 1px solid #c9c1b7; } header .selectbox:last-child{ border:0; } header .selectbox .select{ width: 88px; height: 35px; padding:10px 12px; font-size: 1.2rem; } header .selectbox:last-child .select { width: 100px; } .dropdown { width: 8.4rem; cursor: pointer; position: relative; border-right: 1px solid #c9c1b7; } .nav1, .nav2, .nav3 { background-size: 9px; background-color: #9c9388; color: #fff; padding: 1.2rem 1rem;} .nav1::after, .nav2::after, .nav3::after{ content: '\f107'; font-family: fontawesome; position: absolute; right: 10px; font-size: 12px; line-height: 14px; } .sub_nav1, .sub_nav2, .sub_nav3 { position: absolute; list-style: none; padding:0; margin: 0; left: 0; top:100%; width: 100%; display: none; z-index: 100; } .sub_nav1 li a, .sub_nav2 li a, .sub_nav3 li a { color: #fff; display: block; padding: 7px; background: #9c9388; border-bottom: 1px solid #aaa; } .sub_nav1 li a:last-child, .sub_nav2 li a:last-child, .sub_nav3 li a:last-child { border: none; } JS 1 (정상작동) (개별적으로 class를 모두 지정하였습니다.) $('.menu li').click(function(){ $(this).children('.sub_menu').slideDown() }) $('.menu li').click(function(){ $(this).children('.sub_menu').slideUp() }) $('.nav1').click(function(){ $('.sub_nav1').stop().slideToggle() $('.sub_nav2').stop().slideUp() $('.sub_nav3').stop().slideUp() $(this).find('>ul').toggle() }) $('.sub_nav1 li').click(function(){ $(this).parent().stop().slideUp() $('.nav1').text($(this).text()) }) $('.nav2').click(function(){ $('.sub_nav2').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav3').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav2 li').click(function(){ $(this).parent().stop().slideUp() $('.nav2').text($(this).text()) }) $('.nav3').click(function(){ $('.sub_nav3').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav2').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav3 li').click(function(){ $(this).parent().stop().slideUp() $('.nav3').text($(this).text()) }) JS 2 (문제의 JS) (JS1와 같은 매커니즘 코드를 줄여 작성했습니다.) //메뉴 토글 $('.title').click(function(){ $(this).siblings('.sub_nav').slideUp() $(this).next().stop().slideToggle() }) //메뉴 text 변경 $('.sub_nav li').click(function(){ $(this).parent().stop().slideUp() $(this).parent().siblings('.title').text($(this).text()) }) 이렇게 만들어서 메뉴1-1을 누르면 2-1과 3-1 이 들어가야하는데 3개가 모두 개별적으로 펼쳐집니다. JS 1 처럼 class를 모두 직접 지정하면 정상적으로 되는데 너무 코드가 지저분해서 간단하게 지정을 하려고 작동을 확인 한 뒤 JS 2를 만들었는데 메뉴 text 변경 되는건 잘 되는데 메뉴 토글에서 막혔습니다. $(this).siblings('.sub_nav').slideUp() 이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.
kio4545
2023-06-30T06:06:26.624Z
댓글 2
좋아요 1
조회수 581
미해결
웹 애니메이션을 위한 GSAP 가이드 Part.01
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d 노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. .. 제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠... 진도를 나갈 수가 없어요. ㅠ.ㅠ 확인부탁드립니다.
HTML/CSS javascript 인터랙티브-웹 gsap
Stella
2023-06-29T11:32:17.239Z
댓글 1
좋아요 1
조회수 738
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요. 판다님 강의 열심히 듣고 있는 수강생입니다! 결과 부분 진행중인데요~ setTimeout안에 select를 넣어서 qIdx번째 질문에서 클릭한 답이 select 배열데이터에 담기는데 어째서 클릭한게 idx로 담기게 되는걸까요...? ㅠ button을 클릭했을 때 addEventListener로 다음 질문으로 넘어가는건 알겠는데 클릭한 답변이 왜 idx에 담기게 되는지 잘 이해가 안되어서요 ㅜㅜ 그리고 button을 html에 안만들고 js에서 createElement로 만드신 이유가 따로있을까요..?
HTML/CSS javascript bootstrap
qp40202
2023-06-29T07:06:22.784Z
댓글 1
좋아요 0
조회수 413
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. 강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요 검색창에 알파벳치면 확장을 가져오는 동안 오류가 발생했습니다.xhr failed 라는 창이 뜨고 엑스 표시로 검색을 해도 강사님처럼 검색이안됩니다 ㅠㅠ뭐가 잘못일까요 ...???
jkjk7088
2023-06-28T12:18:09.916Z
댓글 3
좋아요 1
조회수 430
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
유튜브에도 웹디기능사 합격하기 영상이있는데 인프런강의랑 머가다른지요...? 인프런보다 짧아보이기는 한데 정확히 뭐가 다른지 선생님께 여쭤보고싶어서요 ,,,
jkjk7088
2023-06-28T12:10:08.673Z
댓글 1
좋아요 1
조회수 337
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 다 완성 한 뒤에 그 밑에 div를 이어 붙이려고 하는데 position: absolute; 를 사용한 tab-content 가 공중으로 떠서 영역이 이미지처럼 이렇게 잡힙니다. 다음 div를 일반적인 block 처럼 tab-content 까지 끝난 맨 밑에 이어져서 영역을 잡으려면 어떻게 해야할까요????
kio4545
2023-06-28T05:20:33.202Z
댓글 1
좋아요 1
조회수 425
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
포트폴리오 다 만들고 현재 구직 중인데 복장에 대해서 준비를 안 했는데 면접 복장에 관해서 정보도 적고 그래서 여기다 한번 질문해 봅니다! 검은 슬랙스 + 티셔츠 정장 청바지 + 티셔츠 그 외
2023-06-27T15:02:42.464Z
댓글 1
좋아요 1
조회수 766
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A타입</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">sub-menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">sub-menu2</a> <div class="sub-menu"> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> </div> </li> <li> <a href="#none">sub-menu3</a> <div class="sub-menu"> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> </div> </li> <li> <a href="#none">sub-menu4</a> <div class="sub-menu"> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt=""></a> <a href="#none"><img src="images/slide-02.jpg" alt=""></a> <a href="#none"><img src="images/slide-03.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> </div> </div> </div> <div class="gallery"> <div class="btn"> 갤러리 </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt=""></a> <a href="#none"><img src="images/gallery-02.jpg" alt=""></a> <a href="#none"><img src="images/gallery-03.jpg" alt=""></a> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. <br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, <br> 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.<br> </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { color: #000; font-size:15px; background-color: #fff; margin:0; } a { text-decoration: none; color:inherit; } .container {width :1200px; border:1px solid #000; margin:auto;} header {height:100px; border:1px solid red; position:relative;} .slide {height:300px;} .items {height:250px;} footer {height:100px;} /* header */ header > div { height:100px; } .header-logo { border:1px solid #000; width:200px; float:left; } .navi { /* border:1px solid #000; */ width:600px; float:right; margin-right:20px; margin-top:55px; } .menu { } .menu li { list-style: none; float:left; width:25%; } .menu li > a { display: block; padding:5px; background-color: #fff; text-align: center; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; } .sub-menu a { display:block; padding:5px; background-color: #fff; text-align: center; } .sub-menu a:hover { background-color: #000; color:#fff; } /* slide */ .slide { position:relative; overflow:hidden; } .slide > div { font-size: 0; width:3600px; position:absolute; top:0; left:0; float: left; animation:slide 10s linear infinite; } @keyframes slide { 0% {left:0;} 30% {left:0;} 35% {left:-1200px;} 65% {left:-1200px;} 70% {left:-2400px;} 95% {left:-2400px;} 100% {left:0;} } /* items */ .items > div { height:250px; float:left; box-sizing: border-box; } .news { width:400px; border:1px solid #000; } .btn { display: inline-block; padding:5px; border: 1px solid #000; width:100px; text-align: center; } .tab1 {} .tab1 a {display:block; padding:5px;} .tab1 a em { width:70%; float:left; font-style:normal; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tab1 a b { width:30%; float:right; } .gallery { width:400px; border:1px solid red; } .tab2 { text-align: center; } .tab2 a {} .tab2 img { width:120px; } .shortcut { width:400px; border:1px solid green; } /* footer */ footer > div { height:100px; float:left; box-sizing:border-box; } .footer-logo { width:200px; background-color: #000; } .copyright { width:800px; background-color: aqua; } .sns { width:200px; background-color: green; } /* modal */ .modal{ position:absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); width:100%; height:100%; display: none; } .modal-content { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: #fff; height:350px; } .modal-content a { display: block; padding:20px; float:right; border:1px solid #000; } 이미지슬라이드가 1200*300 이 아니라 정사각형으로 나오는데 원인을 모르겠어서 문의합니다^^;;
hyungwoo Choi
2023-06-27T10:45:51.718Z
댓글 1
좋아요 1
조회수 205
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
배너 슬라이드 기능만 잘 되지 않습니다. 최신 버전 강의 따라 하였습니다....
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
밍또
2023-06-27T08:05:29.603Z
댓글 2
좋아요 0
조회수 426
해결됨
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
안녕하세요 선생님 강의를 따라하는 도중 제가 실수로 port번호를 입력하지 않아 수정 후 다시 git에 push를 하고 새로 업데이트된 내용을 적용시키기위해 PuTTY에서 git pull을 하였습니다. 그런데도 마커가 뜨지 않아서 브라우저 개발자도구를 살펴보니 수정한 port번호가 추가 되어있지 않더라구요 ㅠㅠㅠ 이럴때는 어떤방법을 시도해보아야하나요..?
HTML/CSS javascript aws git mysql rest-api github
didwldn97
2023-06-27T02:20:32.447Z
댓글 2
좋아요 0
조회수 547
미해결
처음 만난 리액트(React)
module를 지웠다가 깔아봐도 계속 이 오류가 뜨네요.,..
택기
2023-06-26T14:45:27.969Z
댓글 1
좋아요 0
조회수 590
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
이전 메인페이지가 뜨지 않는다는 질문과 답변들을 통해 App.js파일과 index.js 파일 상단에 import React from 'react'; 를 넣기도 해보고 node와 npm 삭제 > 재설치 후 진행해 보아도 메인페이지에 글자가 뜨지 않아 질문드립니다ㅜㅜ 또한 각 파일의 vscode내 터미널 로그를 보아도 딱히 에러가 보이지 않아 문의드립니다..!
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
diane_kim
2023-06-26T14:14:27.608Z
댓글 2
좋아요 0
조회수 272
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
이전 모바일 웹 퍼블리싱 figma를 수강했는데, 이번 강의에서는 알면 넘어가도 된다는 내용이 없어서요 이번 강의 figma에서 새로 쓰는 기능이 있는지, 아니면 html 프레임 잡는거부터 바로 시작해도 충분할까요?
HTML/CSS javascript sass jquery scss
정혁
2023-06-26T11:40:21.261Z
댓글 1
좋아요 1
조회수 455
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
fly.io에 server 프로젝트를 deploy 단계까지 마쳤다. web 프로젝트까지 배포가 완료 되어 모든 동작이 잘 이뤄지고 있다. 하지만, 일정 시간이 지나면 자동으로 fly.io에 배포된 DB가 초기화가 된다. 초기화가 된 것인지, local의 데이터가 자동 업로드 되면서 덮어씌여진 것인지는 잘 모르겠다. 이전 질문의 답변을 보면, Commit을 하면서 fly.io가 자동으로 덮어씌여진다는 것을 보았다. -> 하지만, 실험 결과 Commit을 따로 하지 않아도 초기화가 된다. 만약 git과 연관이 있다면 6-1. 배포 이후 별다른 작업을 하지 않았지만, 일정시간이 지나면, vercel와 같이 자동으로 git의 repository 최신 내용 바탕으로 업데이트 되어, git에 이미 올라가 있던 DB가 fly.io에 반영이 되는것인가가 궁금합니다. 6-2. 또한, 그렇다면 애초에 vercel은 레포지토리 주소를 참고하여 배포하였다면, fly.io는 그저 플랫폼 로그인 수단으로만 git을 연동하였는데, 최신 커밋을 참고하는 기능이 있는지도 궁금합니다. 결론적으로 현재 반복적으로 DB가 초기화 되는 현상을 고치고 싶습니다. 추가적인 실험 결과, 로컬의 nodemon server.js가 돌고 있는 server 프로젝트를 종료를 하여도, 일정 시간이 지나면 fly.io의 DB가 초기화 되는 것으로 보아, server의 내용이 바뀌면서 자동으로 로컬 내용이 fly.io로 넘어가는 것도 아닌 것 같습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
밍또
2023-06-26T11:31:22.147Z
댓글 2
좋아요 0
조회수 371
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
<img src="images/icons/logo.png" /> 만으로 사진이 불러와 지는데요 엄밀히 따지면 images 파일은 public 폴더 아래 있으니 <img src="../public/images/icons/logo.png" /> 처럼 상위 폴더로 이동 후 public에서 images에 접근할 수 있는 것 아닌가요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-06-26T04:29:15.170Z
댓글 3
좋아요 0
조회수 767
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
a:link, a:visited, a:active { text-decoration: none; color: #3f464d; } [모던HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기4] 6:00 부분에서 text-decoration 등 중복되는 설정값이 여러 가상클래스에 적용이 되는데 이런식으로 한번에 써도 되나요 ?
hanyn
2023-06-25T08:40:43.208Z
댓글 1
좋아요 0
조회수 327
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
독학으로 웹디기능사실기 유튜브보고 공부하고 덜공부한상태로보러갔다가 왔는데 요새는 비주얼스튜디오코드로 시험많이보고 브라켓이 잘안깔려있다는 시험장도있다고 해서 그러는데 이강의도 브라켓으로 하는데 비주얼스튜디오로 연습해도 문제없을까요 ?
jkjk7088
2023-06-24T12:35:14.726Z
댓글 1
좋아요 1
조회수 195
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
destructuring을 사용하지 않고 const로 time과 setTime을 정의해서 해봤는데요, 이때는 브라우저에서 클릭을 해도 0초에서 1초로 바뀌지 않습니다. 어떤 부분이 문제인가요? React.useState(0) 뒤에 인덱스 값을 잘못 붙인 건가요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-06-24T09:25:01.628Z
댓글 2
좋아요 0
조회수 313
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
소괄호를 붙여 해결은 했습니다만, return 뒤에 소괄호를 붙이지 않았을 때 unreachable-code라며 코드가 투명하게 보이고 react app 사이트에도 반영되지 않았는데요 소괄호가 필수인지 궁금합니다 참고로 return직후 세미콜론은 저장했더니 자동으로 붙었습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-06-24T08:01:38.684Z
댓글 2
좋아요 0
조회수 439
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
버튼을 한 번씩 누를 때마다 콘솔창에 콘솔로그가 2번씩 찍히는데 왜 이런 건가요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
2023-06-24T07:58:14.797Z
댓글 2
좋아요 0
조회수 967
