묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
certbot 실행 오류
안녕하세요 선생님certbot 설치 후 실행을 하면 오류가 납니다.어디서부터 다시 해봐야하는지 모르겠습니다 오류내용Challenge failed for domain hahahagood.shophttp-01 challenge for hahahagood.shopCleaning up challengesSome challenges have failed.IMPORTANT NOTES: - The following errors were reported by the server: Domain: hahahagood.shop Type: dns Detail: no valid A records found for hahahagood.shop; no valid AAAA records found for hahahagood.shoproot@ip-172-31-46-56:/home/ubuntu#
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(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()이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. ..제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠...진도를 나갈 수가 없어요. ㅠ.ㅠ확인부탁드립니다.
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
select 부분이 이해가 안가서 질문드립니다 ㅠ
안녕하세요. 판다님강의 열심히 듣고 있는 수강생입니다!결과 부분 진행중인데요~setTimeout안에 select를 넣어서qIdx번째 질문에서 클릭한 답이 select 배열데이터에 담기는데어째서 클릭한게 idx로 담기게 되는걸까요...? ㅠbutton을 클릭했을 때 addEventListener로 다음 질문으로 넘어가는건 알겠는데클릭한 답변이 왜 idx에 담기게 되는지 잘 이해가 안되어서요 ㅜㅜ그리고 button을 html에 안만들고 js에서 createElement로 만드신 이유가 따로있을까요..?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요
■ 질문 남기실 때 꼭! 참고해주세요.강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요검색창에 알파벳치면 확장을 가져오는 동안 오류가 발생했습니다.xhr failed 라는 창이 뜨고 엑스 표시로 검색을 해도 강사님처럼 검색이안됩니다 ㅠㅠ뭐가 잘못일까요 ...???
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
유튜브에도 웹디기능사 합격하기 영상이있는데
유튜브에도 웹디기능사 합격하기 영상이있는데 인프런강의랑 머가다른지요...? 인프런보다 짧아보이기는 한데 정확히 뭐가 다른지 선생님께 여쭤보고싶어서요 ,,,
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
:target 가상클래스 HTML+CSS 탭 메뉴 콘텐츠 질문드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 다 완성 한 뒤에 그 밑에 div를 이어 붙이려고 하는데position: absolute; 를 사용한 tab-content 가 공중으로 떠서 영역이 이미지처럼 이렇게 잡힙니다.다음 div를 일반적인 block 처럼 tab-content 까지 끝난 맨 밑에 이어져서 영역을 잡으려면 어떻게 해야할까요????
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
면접 복장 질문입니다
포트폴리오 다 만들고 현재 구직 중인데 복장에 대해서 준비를 안 했는데 면접 복장에 관해서 정보도 적고 그래서 여기다 한번 질문해 봅니다! 검은 슬랙스 + 티셔츠정장청바지 + 티셔츠그 외
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
이미지 슬라이드가 1200*300으로 나오지 않고 정사각형으로 표현이 됩니다
<!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 이 아니라정사각형으로 나오는데 원인을 모르겠어서 문의합니다^^;;
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다 잘되는데 배너 슬라이드가 안돼요
배너 슬라이드 기능만 잘 되지 않습니다.최신 버전 강의 따라 하였습니다....
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
PuTTY git pull orgin main 적용안됨..?
안녕하세요 선생님강의를 따라하는 도중 제가 실수로 port번호를 입력하지 않아 수정 후 다시 git에 push를 하고새로 업데이트된 내용을 적용시키기위해PuTTY에서 git pull을 하였습니다.그런데도 마커가 뜨지 않아서 브라우저 개발자도구를 살펴보니 수정한 port번호가 추가 되어있지 않더라구요 ㅠㅠㅠ 이럴때는 어떤방법을 시도해보아야하나요..?
-
미해결처음 만난 리액트(React)
styled-components 설치 문제
module를 지웠다가 깔아봐도 계속 이 오류가 뜨네요.,..
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의 5분경 내용인 "메인 페이지" 글자가 뜨지 않습니다.
이전 메인페이지가 뜨지 않는다는 질문과 답변들을 통해 App.js파일과 index.js 파일 상단에 import React from 'react'; 를 넣기도 해보고 node와 npm 삭제 > 재설치 후 진행해 보아도 메인페이지에 글자가 뜨지 않아 질문드립니다ㅜㅜ또한 각 파일의 vscode내 터미널 로그를 보아도 딱히 에러가 보이지 않아 문의드립니다..!
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
이전 figma강의를 수강했으면 생략해도 충분할까요?
이전 모바일 웹 퍼블리싱 figma를 수강했는데,이번 강의에서는 알면 넘어가도 된다는 내용이 없어서요 이번 강의 figma에서 새로 쓰는 기능이 있는지, 아니면 html 프레임 잡는거부터 바로 시작해도 충분할까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
따로 커밋을 하거나 재배포를 하지 않았는데, DB가 자동으로 초기화 됩니다.
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로 넘어가는 것도 아닌 것 같습니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
왜 src폴더 위치에서 images가 불러와 지는 지 모르겠습니다
<img src="images/icons/logo.png" /> 만으로 사진이 불러와 지는데요 엄밀히 따지면 images 파일은 public 폴더 아래 있으니<img src="../public/images/icons/logo.png" /> 처럼 상위 폴더로 이동 후 public에서 images에 접근할 수 있는 것 아닌가요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
같은 css 값일 때
a:link, a:visited, a:active { text-decoration: none; color: #3f464d; } [모던HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기4] 6:00 부분에서 text-decoration 등 중복되는 설정값이 여러 가상클래스에 적용이 되는데 이런식으로 한번에 써도 되나요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강의가 블라켓으로수업하신다고하는데 비주얼스튜디오로 연습해도되는건가요 ?
독학으로 웹디기능사실기 유튜브보고 공부하고 덜공부한상태로보러갔다가 왔는데 요새는 비주얼스튜디오코드로 시험많이보고 브라켓이 잘안깔려있다는 시험장도있다고 해서 그러는데 이강의도 브라켓으로 하는데 비주얼스튜디오로 연습해도 문제없을까요 ?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
destructuring 사용하지 않았을 때는 어떻게 코드를 작성해야 하나요?
destructuring을 사용하지 않고 const로 time과 setTime을 정의해서 해봤는데요, 이때는 브라우저에서 클릭을 해도 0초에서 1초로 바뀌지 않습니다. 어떤 부분이 문제인가요?React.useState(0) 뒤에 인덱스 값을 잘못 붙인 건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
return 후 소괄호가 필수인가요
소괄호를 붙여 해결은 했습니다만, return 뒤에 소괄호를 붙이지 않았을 때 unreachable-code라며 코드가 투명하게 보이고 react app 사이트에도 반영되지 않았는데요 소괄호가 필수인지 궁금합니다참고로 return직후 세미콜론은 저장했더니 자동으로 붙었습니다.