묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
3분 쯤 catch함수에 console.error가 안되네요
타이핑은 똑같이 했습니다.. catch함수 빼면 나머지는 동작됩니다
-
미해결처음 만난 리액트(React)
목소리 너무 좋습니다
마음이 안정 됩니다 너무 설명도 잘하고 쉽고 유료강의보다 5천억만배 최강으로 최고 입니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
span텍스트 아래로 안가져요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D-4</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">menu1</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu2</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu3</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu4</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-images"> <div class="slide-images-inner"> <a href="#"><img src="images/slide-d-01.jpg" alt=""></a> <a href="#"><img src="images/slide-d-02.jpg" alt=""></a> <a href="#"><img src="images/slide-d-03.jpg" alt=""></a> </div> </div> </div> <div class="banner"> <a href="#"><img src="images/banner-01.png" alt="banner-01"></a> <span>배너1</span> <a href="#"><img src="images/banner-02.png" alt="banner-02"></a> <span>배너2</span> <a href="#"><img src="images/banner-03.png" alt="banner-03"></a> <span>배너3</span> <a href="#"><img src="images/banner-04.png" alt="banner-04"></a> <span>배너4</span> <a href="#"><img src="images/banner-05.png" alt="banner-05"></a> <span>배너5</span> <a href="#"><img src="images/banner-06.png" alt="banner-06"></a> <span>배너6</span> <a href="#"><img src="images/banner-07.png" alt="banner-07"></a> <span>배너7</span> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#">외국인과 영어로 네이티브처럼 대화하는 노하우!<b>2022.08.09</b></a> <a href="#">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> </div> </div> <div class="gall"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#"><img src="images/gallery-01.png" alt="images/gallery-01"></a> <span>갤러리1</span> <a href="#"><img src="images/gallery-02.png" alt="images/gallery-02"></a> <span>갤러리2</span> <a href="#"><img src="images/gallery-03.png" alt="images/gallery-03"></a> <span>갤러리3</span> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#">기업소개 제휴 및 입점 문의</a> <span>ㅣ</span> <a href="#">이용약관</a> <span>ㅣ</span> <a href="#">개인정보처리방침</a> <span>ㅣ</span> <a href="#">이메일무단수집거부</a> <span>ㅣ</span> <a href="#">사이트맵</a> <span>ㅣ</span> <a href="#">인재채용</a> <span>ㅣ</span> <a href="#">기업소개 제휴 및 입점 문의</a> </div> <div class="copy"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장<br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> <div class="family-site"> <select> <option value="">family site</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> </p> <a class="close-modal" href="#">닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom4.js"></script> </body> </html>@charset "utf-8"; body{ background-color: #fff; color: #333; margin: 0; } a{ text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content>div{ } .left{ width: 200px; } .right{ flex: 1; } header{} header>div{ } .header-logo{ height: 100px; padding-top: 10px; box-sizing: border-box; } .navi{ height: 400px; width: 90%; margin: auto; } .menu{ padding: 0; } .menu li{ list-style: none; } .menu li>a{ width: 94%; border: 1px solid #000; display: inline-block; padding: 5px; margin: auto; text-align: center; transition: 0.5s; } .menu li>a:hover{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; border: 1px solid #000; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } .slide{ height: 400px; position: relative; overflow: hidden; } .slide-images{ height: 400px; } .slide-images-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top:0} 30%{top:0} 35%{top:-400px} 65%{top:-400px} 70%{top:-800px} 95%{top:-800px} 100%{top:0} } .slide-images-inner a{ } .slide-images-inner img{} .banner{ height: 150px; display: flex; align-items: center; } .banner a{ margin: auto; display: block; } .banner a img{ width: 120px; } .banner a img span{ } .items{ height: 250px; display: flex; } .items>div{ height: 250px; flex: 1; } .news{} .gall{} .tab-inner{} .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; width: 150px; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; } .tab1{ border: 1px solid #000; height: 168px; width: 98%; } .tab1 a{ width: 95%; margin: auto; display: block; border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ font-weight: normal; float: right; } .tab2{ width: 98%; border: 1px solid #000; height: 168px; display: flex; } .tab2 a{ margin: auto; } .tab2 a img{ width: 120px; display: inline-block; } .tab2 span{ display: block; } footer{ display: flex; height: 100px; align-items: center; } footer>div{ } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content>div{ display: flex; align-items: center; height: 50px; } .footer-link{ } .footer-link a:hover{ text-decoration: underline; color: skyblue } .copy{} .family-site{ text-align: center; width: 230px; } .modal{ background-color: #000; top: 0; position: absolute; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .modal-content{ position: absolute; background-color: #fff; width: 600px; padding: 20px; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h3{ background-color: black; padding: 10px; color: #fff; } .modal-content p{} .modal-content a{ border: 1px solid #000; padding: 5px; float: right; }$('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결따라하며 배우는 HTML, CSS
창이 일정크기 이상 줄어들지 않아요
반응형으로 썸네일 그리드가 잘 변경되는지 확인하고 싶어서 이리저리 창 크기를 줄여봤는데 한 30~40퍼센트 이하로 줄어들지 않아요. 그리고 50퍼 정도 크기로 줄여도 1fr 1fr 1fr 형태가 아니라 계속 4개로 유지됩니다. 도대체 뭐가 문제인지 모르겠어서 소스코드 다운받은 그대로 작동시켜봤는데도 똑같네요... 뭐가 문제일까요?
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
requestanimationframe 성능관련 궁금증
안녕하세요 좋은 강의 잘 참고해서 재밌게 만들어보고있습니다. ^^requestanimationframe을 사용해서 애니메이션이 부드럽게 잘 이동합니다만애니메이션 종료를 따로 설정해주지 않으면 renderGame()은 무한히 반복될텐데 성능에 문제가 없을까요?bulletComProp.arr와 allMonsterComProp.arr의 경우 충돌하거나 사라질때 배열에서 삭제하기때문에 순회할게 없어 동작이 안된다고하더라도 hero.keyMotion 혹은 setGameBackground는 console로 찍어보니 값이 무한히 반복해서 성능에 문제가 되지 않을까 고민해보게 되네요답변주시면 감사하겠습니다정말 감사합니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
레이아웃 B타입 만들기 footer-inner 작동오류
index.html<div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> style sheet.footer-inner{ background-color: beige;}footer{ border: 1px solid green; width: 1200px; margin: auto;}footer > div { height: 100px; box-sizing: border-box; float: left;}.footer-logo{ border: 1px solid pink; width: 200px;}.copyright{ width: 1000px;}.copyright > div { border: 1px solid black; height: 50px; } footer-inner 부분만 먹히지 않아요... background-color를 줘도 실행이 안됩니다ㅠㅠ
-
미해결처음 만난 리액트(React)
== 와 ===
const post = data.find((item) => { return item.id == postId; });이 코드에서 왜 == 를 ===로 바꿔줬을 때는 data를 찾지 못하는 걸까요?postId 와 item.id 모두 int 값 아닌가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
전체레이아웃 E형 _ 브라우져 가로스크롤 생성이 됩니다.
안녕하세요 강좌를 듣고 큰 도움을 얻고 있습니다. 강의 듣고 따라 하는중 궁금사항이 있어 문의드립니다. - 전체레이아웃 E형 강의 듣고 따라 하여 모두 정상적으로 잘 레이아웃이 작성되었습니다. ( 강좌명 : E유형(HTML 전체 레이아웃 제작 with Flex) – E1) 그런데 , 브라우져의 세로 스크롤이 생성됩니다. 세로 스크롤을 안생기게 하려면 어떻게 해야 할까요?
-
미해결컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
command 커서
수업 내용중에 맥북은 command를 누르고 커서가 들어갈 곳을 누르면 여러곳을 한번에 수정할 수 있다고 하셨는데 저는 여전히 하나하나 수정해야 해야하길래 혹시 단축기 수정이 필요한걸까요 ? 아니면 제가 어떤걸 놓치고 있을까요 ㅠㅠㅠ감사합니다
-
미해결처음 만난 리액트(React)
useContext hook
useContext hook 을 사용할때 만약 랜더링이 무거운 작업이라면 최적화를 시켜줘야한다고 하셨는데 여기서 말하는 최적화란 무엇일까요? 변수에 담아서 데이터를 사용하는게 최적화 일까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
"세팅 제이슨" 질문 보고왔는데 안되서 질문드립니다.
설정 창에 검색하니까 settings.json 이 안나오네요 ㅠㅠ 어떡하죠 편집이 안되네요 윈도우라 ctrl shift p 누르면 settings.json은 나와요
-
미해결자바스크립트 : 기초부터 실전까지 올인원
타임즈 render 부분 질문
안녕하세요! 타임즈 뉴스 만들기 부분에서 render 함수 짜고 있는데 자꾸 map 관련 오류가 뜹니다... 콘솔에 아래와 같이 찍혀요... 데이터만 불러오면 자꾸 같은 오류가 나서 렌더링이 잘 안되는데 어떻게 해결할 수 있나요? main.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')let news = [] const getLastNews = async () => { let url = new URL('https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=10' ); let header = new Headers({"x-api-key" : "TXFw8gmdafTvdz_B53fry7i7yuJesOf5fWWhu5EZdyQ", }); let response = await fetch(url,{ headers:header }); let data = await response.json(); news = data.articles render() }; const render = () => { let newsHTML = ""; newsHTML = news.map((news) => { return `<div class="row news"> <div class="col-lg-4"> <img class="news-image" src="${news.media}"/> </div> <div class="col-lg-8"> <h2>${news.title}</h2> <p> 내용 </p> <div> 출처 </div> </div> </div>`; }).join(''); document.querySelector('#news-board').innerHTML = newsHTML; } getLastNews()
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
nav 태그
안녕하세요 강사님 질문이 있어 질문드립니다.강의 1분 30초경에 nav 태그를 설명하시면서 하나의 html 문서에 여러개의 nav 태그가 오는것은 시멘틱 태그 취지에 맞지 않다고 설명해주셨는데요mdn 사이트에 nav 태그를 검색해보면<nav> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 <nav> 태그를 가질 수 있습니다. 이럴 때 aria-labelledby를 사용해 접근성을 향상할 수 있습니다.이렇게 내용이 나오는데요 혼란이 있어 질문드리게 되었습니다. 감사합니다.
-
해결됨[코드캠프] 시작은 프리캠프
border: none과 0px의 차이
강의에서는 none이라고 해주셨는데한번 0px로 해보니까 차이가 없더라구요 (육안으로는 차이 발견 못함)혹시 0px이 아닌 none로 하는 이유가 있나요?iframe은 네모난 aqua 영역 전부입니다~
-
미해결인터랙티브 웹 개발 제대로 시작하기
event 위임 관련해서 질문있습니다!
여기서 와일문을 돌리면 점점 큰 범위로 menu-btn이라는 클래스가 있는지 찾아가는 게 되는건가요?예를 들어 버튼안에 버튼, 그안에 버튼이렇게 있다면 내가 제일 안쪽에 있는 버튼을 클릭했을 때에, 제일 안쪽의 버튼, 중간버튼, 제일 겉에 있는 버튼 이런 순서로 찾아가게 되는 건지가 궁금합니다 영상 너무 잘보고 있습니다 ㅠ 좋은 강의 감사해요!!
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
html{}
style 태그 내부에서 html { }을 하셨는데, 어떤 의미인가요? html 문서 전체를 선택한 건가요? 그렇다면 *{}와는 어떤 차이가 있나요?
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
class와 id
CSS에서 id 선택자는 문서에서 하나만, class 선택자는 문서에서 여러개를 선택 가능하다고 하셨는데요! id 선택자가 따로 있는 이유는 무엇인가요? (모두 class로 선택하면 되는 것이 아닌가 해서 여쭤봅니다!) 감사합니다!
-
미해결처음 만난 리액트(React)
빌드 불가.. ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. node가 V18.14.2 버젼이고, npm이 9.5.0 버전인데 zsh: killed npx create-react-app ReactTest 라고 뜹니다 ㅠㅠ
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
제출하기 버튼
<input type="submit" value="제출하기" /> <button type="submit">제출하기</button>위의 두 줄의 차이는 무엇일까요?
-
미해결따라하면서 배우는 웹애플리케이션 만들기
bitnami WAMP 서비스가 종료되었다고 합니다.
아무리 검색해도 WAMP를 대체할 수 있는 건 안 나오는데그럼 아파치, MySQL, PHP를 다 따로 설치하는 방법밖에 없을까요...?
