172만명의 커뮤니티!! 함께 토론해봐요.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
prevAll속성은 잘 들어가지는데 그 다음에 넣은 nextAll 속성이 동작을 안하네요.. 코드도 다 똑같이 넣고 오타도 없는데 어디를 수정해야하나요...?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>푸른마을</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li><a href="#none">OnSale</a></li> <li><a href="#none">기획전</a></li> <li><a href="#none">푸른마을 레시피</a></li> <li><a href="#none">매장안내</a></li> <div class="sub-back"> <div class="mega-menu"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner2"></a> <a href="#none"><img src="images/banner-03.jpg" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.jpg" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우<b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"><span>체스키크룸로프성</span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"><span>럭셔리 범선 선셋</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"><span>거제 바람의언덕</span></a> <a href="#none"><img src="images/gallery-04.jpg" alt="gallery4"><span>연천 덴마크 가평</span></a> <a href="#none"><img src="images/gallery-05.jpg" alt="gallery5"><span>담양 메타프로방스</span></a> <a href="#none"><img src="images/gallery-06.jpg" alt="gallery6"><span>잘츠카머쿠트</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">회사소개</a> <a href="#none">찾아오시는길</a> <a href="#none">개인정보처리방침</a> <a href="#none">이용약관</a> <a href="#none">고객지원</a> <a href="#none">제휴문의</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> 주요 작업 내용은 아래와 같습니다.<br> <br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<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 { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; background-color: #fff; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-back { background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 100%; width: calc(100vw - 208px); z-index: 1000; display: none; } .mega-menu {} .sub-menu { height: 32px; display: flex; align-items: center; gap: 15px; margin-left: 15px; } .sub-menu a { padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #000; } .spot-menu { height: 50px; text-align: center; } .spot-menu a { color: blue; } .spot-menu a:hover { text-decoration: underline; } .slide { position: relative; } .slide > div { /* border: 1px solid blue; */ } .slide-image { height: 400px; } .slide-image-inner { font-size: 0; height: inherit; overflow: hidden; position: relative; } .slide-image-inner a { height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; visibility: visible; } 35% { opacity: 1; } 40% { opacity: 0; visibility: hidden; } 100% { opacity: 0; } } .banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .banner a img { width: 150px; border-radius: 10px; margin: 5px 0; } .items {} .items > div { /* border: 1px solid green; */ } .shortcut { height: 200px; display: flex; align-items: center; justify-content: space-around; } .shortcut .shortcut-image { height: 150px; border-radius: 30px; } .news-gallery { height: 250px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-right: -6px; margin-bottom: -1px; background-color: #ccc; } .btn a.active { background-color: #fff; } .tabs {} .tab1 { /* display: none; */ border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; padding-right: 50px; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 10px; display: none; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 130px; border-radius: 10px; margin: 0 55px; } .tab2 a span { display: block; } footer { display: flex; height: 120px; align-items: center; } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 15px; } .footer-link {} .copyright {} .footer-link a { color: blue; } .footer-link a::after { content: "|"; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .modal { background-color: #00000060; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } .modal-content h2 { text-align: center; } $('.menu').mouseenter(function(){ $('.sub-back').stop().fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').stop().fadeOut() }) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
ㅠㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이번 2023년 1차 실기 시험 준비하면서 강의를 듣고 너무 도움이 많이 됐고 덕분에 시험도 잘 마무리 할수 있었습니다 DE 타입이 나올까 조마조마했지만 다행이 A타입이 나왔습니다 제자리뿐만 아니라 감독관님자리에서도 모든 기능이 구현되고 탭키도 작동하고 하는걸 확인까지 했습니다 왼쪽 슬라이드/ 메뉴슬라이드다운/ 모달레이어팝업 / 전체레이아웃 ( 모든 배치 완료 세밀한 조정에서 부족하지만 처음 봤을때 다 제자리에 위치해 있었습니다 ) 모든 기능이 다 구현이 되고 레이아웃도 됐는데요 근데 어디서 잘못을 해야 54점이 나올까요?? 답답한 마음에 글 남겨 봅니다 모든 기능이 구현되는데 뭘 잘못을 해야 48점을 감점 받는걸까요 ㅠㅠ
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
알려주신 수업예제로 웹사이트 만들어도 되는건가요?
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
너무 좋은강의를 볼 수 있게 해주셔서 너무 감사합니다! 한가지 궁금한게 있어서요! 결과페이지에 공유하기 버튼 옆에 결과페이지별로 다른 외부 링크로 넘어가도록 적용시키고 싶은데 어떻게 해야할지 감이 안옵니다..
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요. input type submit 관련 질문입니다. input 태그를 써서 type 속성을 줘서 submit 하는것과 button 태그를 쓰는것과 차이점이 있나요?? 둘다 별반 차이는 없을거 같긴한데, 시맨틱태그를 고려한다면 button 태그를 쓰는게 괜찮을거 같아서 궁금해서 질문드립니다!
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요, "CSS Flex와 Grid 제대로 익히기" 강의 및 "인터렉티브 웹개발 제대로 시작하기" 강의를 듣고 예제를 응용 중 다음과 같은 질문사항이 생겼습니다. "3D 보드게임판" 예제에 보면 초기에 "starting" 애니메이션 지정을 통해 카메라 앵글을 돌려주는데 forwards 속성을 사용하여 마지막 프레임에서 멈추게 하는 것은 이해를 하였습니다. 여기에 더 나아가 "전진! 3D 스크롤" 예제에 나오는 방향키 액션으로 앵글을 돌리는 액션을 추가해보고 싶어 코드를 수정하였는데요. 질문은 위 starting 애니메이션 지정을 빼면 방향키 이벤트 키로 앵글을 서서히 누른만큼 돌아가게 만들기는 했는데, starting 애니메이션 지정만 넣으면 방향키 이벤트가 먹통이 되는 것을 확인하였습니다. 이리저리 알아본 바로는 애니메이션의 forwards 속성에 의해 이후 rotate() 가 적용이 안되는 것처럼 보이는데, "animationFillMode" 속성을 통해 "none" 이나 "backwards" 를 주면 방향키 이벤트가 정상작동 하지만, starting 으로 이미 돌아간 앵글에서 첫 프레임으로 "짠" 하고 되돌아가고 방향키 이벤트가 먹는 것처럼 되어 자연스럽지가 않아 보이는데 이를 해결하는 방법이 있을까요?
미해결
처음 만난 리액트(React)
왜 처음부터 에러가나는지 모르겠어요..
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
코드가 잘못 됐나요.. 상품 목록이 나오질 않네요.. #1 vsCode <html> <head> <title>TerretAccompany</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="header"> <div id="header-area"> <img src="images\icons\logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images\banners\banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get("https://2007f5d2-9d8b-49f0-8b70-032507e17d79.mock.pstmn.io") .then(function (result) { console.log("통신 결과 : ", result); const products = result.data.products; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img"' + 'src="' + product.imageUrl + '" />' + "</div>" + '<div class="product-contents">' + "<!-- text를 넣을때 많이 씀 -->" + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; }) .catch(function (error) { console.error("error 발생 : ", error); }); </script> </html> #2 postman { "products" : [ { "name": "농구공", "price": 500000, "seller": "조던", "imageUrl": "images/products/basketball1.jpeg" }, { "name": "축구공", "price": 600000, "seller": "메시", "imageUrl": "images/products/soccerball1.jpg" }, { "name": "키보드", "price": 300000, "seller": "그랩", "imageUrl": "images/products/keyboard1.jpg" } ] }
미해결
안녕하세요 현재 파이썬을 공부중인 학생입니다. 이전까지는 태그의 값을 텍스트로 출력하고 있었는데 태그안에 속성값을 텍스트로 출력할일이 생겨서 여러 방면으로 검색 및 시도를 해보고 있는데 잘 안되네요 여기서 data-taitle="BLACK(99)" 의 BLACK(99) 를 텍스트로 출력하고 싶습니다. 어떻게 하면 될까요? #python
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요. item p span 에 float left 와 right 주신것과 .progress에 대한 질문입니다. item p 에 .item p { display: flex; justify-content: space-between; align-items: center; } 하면 span 에 float left right 를 한것과 같은 레이아웃이 만들어지긴 하는데, float 를 사용하신것은 혹시 크로스브라우징 때문에 사용하신걸까요? can i use 를 살펴보면 메이져 브라우저들은 거의 flex 를 지원하는데 IE 에서는 지원을 안하는 버전도 있고, prefix 를 사용해야 하는 버전도 있더라구요. 크로스브라우징을 생각하면 flex 보다 float 를 사용하는것이 맞긴하지만, 이미 서비스가 종료된 IE까지 생각해야 하는것이 맞는것인지 고민이 되네요... html tag 중에 progress 라는 tag 가 있는것으로 알고 있습니다. progress 라는 태그 대신에 div 를 사용하신 이유가 있을까요?혹시 커스텀 css 를 입히기 힘든 태그일까요...? input type=checkbox 같은 경우도 css 를 입히기 힘들기 때문에 div 같은 영역을 커스텀 입힌다고 하더라구요. 위같은 경우들처럼 input type checkbox 나 <progess> 를 사용하지 않고 div 같은 영역으로 커스텀을 입히면 웹접근성에 저해되지는 않나요?? 웹접근성이나 시맨틱 태그때문에 태그 하나 사용하는거에 고민이 되네요....
해결됨
쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
강사님 lounge에 자세히보기로 이동하는 a태그는 div class: btn-view 태그로 한번 감싸서 사용해했는데 플래그십 스토어 스파에서(강의 4분 34초)는 div로 감싸지 않고 그냥 a태그를 사용하는 이유가 있을까요?? 같은 페이지 이동 버튼인데 div로 한번 더 감싸는 이유가 따로 있는지 궁금합니다!
해결됨
쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
10분 40초쯤에 recomm_list li에 중앙 정렬을 위해 padding값을 주는 것 같은데 padding : 34px 35px 0 으로 어떻게 계산되는건지 궁금해요! 혹시 다른 방법으로 정렬을 할 수 없을까요??
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
두개 사진에 태그들이 조금 다른데 어떤걸로 외우면되나요
미해결
퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
궁금한점이 있습니다. 취업시 포트폴리오를 작성한 것을 제출할 때 프로젝트 배포한것을 계속 유지한체 링크를 포폴에 올려줘야나요 아니면 배포했을 때 모습을 이미지로 보여주는 건가요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요. <script> 태그를 넣는 위치에 대해 질문드립니다. <script> 태그를 </body> 바로 위에 넣어야 <body> 태그 안에 있는 html 내용들이 전부 파싱 된 이후에 script 가 실행된다고 하셨는데, 그렇다면 </head> 바로 위에 넣고 나서 script 태그의 속성으로 defer 를 넣으면 <body> 태그 안에 있는 html 내용들이 전부 파싱될때까지 <script> 태그 내용들이 실행을 기다렸다가 <body> 태그 안에 있는 html 내용들이 전부 파싱된 후에 실행된다고 알고 있는데, defer 속성을 쓰고, </head> 바로 위에 script 태그를 넣으면 안되는걸까요? 2번 방법을 쓰게 된다면 아마 즉시실행함수를 만들어야 하는거 같은데, defer 속성을 쓰게 되면 즉시실행함수를 굳이 만들지 않아도 될것 같은데 defer 속성을 쓰면 안되는건가 해서 궁금해서 질문 드립니다!!
미해결
따라하면서 배우는 웹애플리케이션 만들기
강의보면서 따라하다가 새로고침을 하면 꼭 이런 페이지가 발생합니다. " 페이지가 작동하지 않습니다. 현재 localhost 에서 요청을 처리할 수 없습니다. HTTP ERROR 500" 완전 초보이다보니..아무리 봐도 어디를 고쳐야할지 모르겠어요 ㅜㅜ 도움 요청 드립니다
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<div class="container"> <ul class="navi"> <li><a href="#none" data-text="ABOUT">ABOUT</a></li> <li><a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a></li> <li><a href="#none" data-text="CLASS">CLASS</a></li> <li><a href="#none" data-text="LOCATION">LOCATION</a></li> </ul> </div> .navi li a{ font-size: 4em; text-decoration: none; color:#fff; position:relative; } .navi li a:before{ content : attr(data-text); position: absolute; color:yellowgreen; top:0; left:0; width:0; overflow:hidden; } 위의 코드에서 왜 overflow:hidden을 주어야 비포에 width가 적용되는지 궁금합니다. overflow:hidden을 주지않고 position:absolute만 있을때 absolute는 요소를 inline block으로 바뀐다고 알고 있는데 F12개발자도구에서는 before가 inline요소라고 나오는 이유도 궁금합니다. 제 독학길에 한줄기 빛이신 선생님 항상 감사합니다~!
