172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 강력한 CSS
마지막 프로젝트에서 12개의 이미지를 넣어서 보기 좋은데 헤더부분과 푸터부분이 있을때 이미지가 1개나 2개만 있으면 푸터부분이 위로 올라와서 붙어버려 보기 이상한데 혹시 이럴때는 어떻게 해줘야하나요? 강제로 사이즈를 주면 아이템으 그 사이즈 이상이면 푸터를 침범하게되고 여러가지 해봤는데 이상적인 방법이 있을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
타이핑은 똑같이 했습니다.. catch함수 빼면 나머지는 동작됩니다
미해결
처음 만난 리액트(React)
마음이 안정 됩니다 너무 설명도 잘하고 쉽고 유료강의보다 5천억만배 최강으로 최고 입니다
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
강사님 안녕하세요 :) 유익한 강의 잘 듣고 있습니다! 학습 중 궁금한 점이 있어서 질문드립니다. 강사님께서 DFS문제 외에도 코드 시작 부분에 이 코드를 작성하실 때가 종종 있는데 혹시 강사님의 사용 기준이 있는지 궁금합니다. ex) [섹션 8] 회장뽑기(플로이드-와샬) 사용 O vs 위상정렬(그래프 정렬) 사용 X
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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을 사용해서 애니메이션이 부드럽게 잘 이동합니다만 애니메이션 종료를 따로 설정해주지 않으면 renderGame()은 무한히 반복될텐데 성능에 문제가 없을까요? bulletComProp.arr와 allMonsterComProp.arr의 경우 충돌하거나 사라질때 배열에서 삭제하기때문에 순회할게 없어 동작이 안된다고하더라도 hero.keyMotion 혹은 setGameBackground는 console로 찍어보니 값이 무한히 반복해서 성능에 문제가 되지 않을까 고민해보게 되네요 답변주시면 감사하겠습니다 정말 감사합니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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 값 아닌가요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 강좌를 듣고 큰 도움을 얻고 있습니다. 강의 듣고 따라 하는중 궁금사항이 있어 문의드립니다. - 전체레이아웃 E형 강의 듣고 따라 하여 모두 정상적으로 잘 레이아웃이 작성되었습니다. ( 강좌명 : E유형(HTML 전체 레이아웃 제작 with Flex) – E1) 그런데 , 브라우져의 세로 스크롤이 생성됩니다. 세로 스크롤을 안생기게 하려면 어떻게 해야 할까요?
미해결
컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
수업 내용중에 맥북은 command를 누르고 커서가 들어갈 곳을 누르면 여러곳을 한번에 수정할 수 있다고 하셨는데 저는 여전히 하나하나 수정해야 해야하길래 혹시 단축기 수정이 필요한걸까요 ? 아니면 제가 어떤걸 놓치고 있을까요 ㅠㅠㅠ 감사합니다
미해결
처음 만난 리액트(React)
useContext hook 을 사용할때 만약 랜더링이 무거운 작업이라면 최적화를 시켜줘야한다고 하셨는데 여기서 말하는 최적화란 무엇일까요? 변수에 담아서 데이터를 사용하는게 최적화 일까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
설정 창에 검색하니까 settings.json 이 안나오네요 ㅠㅠ 어떡하죠 편집이 안되네요 윈도우라 ctrl shift p 누르면 settings.json은 나와요
해결됨
직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피
GetText 사용법이 감이 잘 안오네요 while과 state없이 GetText()를 실행하면 텍스트 출력이 안되네요.. 파이썬에서 정확한 문법 정의가 어떻게 되는지요?
해결됨
한국인이 좋아하는 속도로 때려넣는 파이썬
문서 정리 자동화 소프트웨어 만들기 압축 파일에 직원 정보라는 파일이 들어있지 않네요 ㅠ
미해결
자바스크립트 : 기초부터 실전까지 올인원
안녕하세요! 타임즈 뉴스 만들기 부분에서 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의 모든 것
안녕하세요 강사님 질문이 있어 질문드립니다. 강의 1분 30초경에 nav 태그를 설명하시면서 하나의 html 문서에 여러개의 nav 태그가 오는것은 시멘틱 태그 취지에 맞지 않다고 설명해주셨는데요 mdn 사이트에 nav 태그를 검색해보면 <nav> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 <nav> 태그를 가질 수 있습니다. 이럴 때 aria-labelledby 를 사용해 접근성을 향상할 수 있습니다. 이렇게 내용이 나오는데요 혼란이 있어 질문드리게 되었습니다. 감사합니다.
해결됨
[코드캠프] 시작은 프리캠프
강의에서는 none이라고 해주셨는데 한번 0px로 해보니까 차이가 없더라구요 (육안으로는 차이 발견 못함) 혹시 0px이 아닌 none로 하는 이유가 있나요? iframe은 네모난 aqua 영역 전부입니다~
미해결
인터랙티브 웹 개발 제대로 시작하기
여기서 와일문을 돌리면 점점 큰 범위로 menu-btn이라는 클래스가 있는지 찾아가는 게 되는건가요? 예를 들어 버튼안에 버튼, 그안에 버튼 이렇게 있다면 내가 제일 안쪽에 있는 버튼을 클릭했을 때에, 제일 안쪽의 버튼, 중간버튼, 제일 겉에 있는 버튼 이런 순서로 찾아가게 되는 건지가 궁금합니다 영상 너무 잘보고 있습니다 ㅠ 좋은 강의 감사해요!!
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
style 태그 내부에서 html { }을 하셨는데, 어떤 의미인가요? html 문서 전체를 선택한 건가요? 그렇다면 *{}와는 어떤 차이가 있나요?
