172만명의 커뮤니티!! 함께 토론해봐요.
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
slick.min.js 에서 JQuery is not defined 에러가 발생합니다. 개발자 도구를 통해 확인해 보니 나타납니다. slick.min.js 는 1.8.1 CDN 을 링크했습니다. 부트스트랩5 에서는 바닐라js 를 쓴다고 하셨었는데.. JQuery 도 사용하나요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에 나오는 노션 링크는 어디에서 확인할 수 있나요?
미해결
따라하며 배우는 HTML, CSS
코드에서는 Position : fixed; Left : 0; Bottom : 0; 으로 주셨는데, 저는 이렇게 하니까 사이드바가 아래에 붙어요. Bottom 0을 삭제하니까 강의처럼 위쪽에 붙어있어요. 선생님 강의에서는 bottom 0을 줬는데 어떻게 위에 있는거죠? 그리고 색상코드는 6자리 알파벳, 숫자로만 나타낸다고 알고 있는데 212121FF는 뭔가요? 그냥 212121과 다른 점이 뭔지 궁금합니다.
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요 선생님, 같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
터미널에 이렇게만 뜨는데 어떻게 해야할까요? 화면에 잘린 하단에도 특별한건 없습니다
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
지금은 마커만 눌르면 해당 정보만 보이는데, 마커를 눌렀을때 html안에 해당 음식점의 상세 페이지 정보를 만들어보려고 하는데.. 너무 막막해서요.. 이럴때는 어찌해야 할지 조금 말씀 부탁드려도 될까요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
원핫 인코딩 코드에서 괄호 안에 [cols]를 쓸 때와 columns=cols를 쓸 때의 차이가 궁금합니다. 3-4 Feature engineering에서와 3-6 Regression에서 작성법이 달라서요. 3-6 Regression에서는 train[cols]로 썼더니 에러가 나네요ㅠ # 3-4 Feature engineering c_train[col] = le.fit_transform(c_train[col]) c_test[col] = le.transform(c_test[col]) # 3-6 Regression train = pd.get_dummies(train, columns=cols) test = pd.get_dummies(test, columns=cols)
해결됨
[코드캠프] 시작은 프리캠프
피그마에서는 번호와 곡명이 붙어 있어 밑에 노래 제목들이 깔끔하게 정렬되어있는데 수업시간에서는 곡명과 번호를 붙이지 않더라구요 이부분은 어떻게 해야 할까요? 강의에서 보면 따로 th부분을 제어하지 않던데, 4개의 열이 차지하는 공간은 어떻게 지정이 되는건지 원리가 궁금합니다!
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.
해결됨
처음 만난 리액트(React)
안녕하세요 선생님 현재 chapter_03 진행 중인데요, jsx 실습 진행중인데, 제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
B유형 세로슬라이드 실습중에 오류가 있어 문의 드립니다. 마크업은 다 맞는 것 같은데 아예 움직이지를 않아요... 오늘 시험인데 갑자기 안되서 너무 속상합니다ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹디자인기능사(유형B)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </div> </body> </html> @charset "utf-8"; body { margin: 0; } .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid #000; height: 300px; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .sns { width: 200px; } /* Slide */ .slide { position: relative; height: 300px; font-size: 0; } .slide-items { position: absolute; top: 0; left: 0; } .slide-item {} /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
해결됨
[코드캠프] 시작은 프리캠프
선생님과 똑같이 코드를 입력했는데 계속해서 정의되지 않은 단어라고 뜨면서 코드가 실행되지 않습니다. 이부분에서 뭐가 문제인지 잘 모르겠는데 알려주시면 감사하겠습니다
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
const {studentName} = req.query; const {studentIdx} = req.params; 여기서 req.query와 req.params의 차이가뭔가요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
들어가서 찾아보고 싶은게 있는데 새소식에 없어져서요..
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. 우측고정 네비게이션에서 'Sub-menu' 부분에 높이 200px을 줬는데 크기 늘어나지 않아 문의 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>C2_세로슬라이드, 네비(왼쪽개별우측고정)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a class="open-modal" href="#none">협회소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">명인</a> <a href="#none">오시는길</a> </div> </li> <li> <a href="#none">행사안내</a> <div class="sub-menu"> <a href="#none">요리경연대회</a> <a href="#none">전시참가</a> <a href="#none">참가신청</a> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">레시피</a> </div> </li> <li> <a href="#none">회원마당</a> <div class="sub-menu"> <a href="#none">Q&A</a> <a href="#none">사진갤러리</a> <a href="#none">공지사항</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"></div> <div class="footer-content"> <div class="sns"></div> <div class="family-site"></div> </div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container { display: flex; } .container > div { border: 1px solid #000; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 1000; } header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } /* Slide */ .slide { position: relative; width: 800px; height: 350px; overflow: hidden; } .slide > div { border: 1px solid #000; height: 350px; } .slide-items { font-size: 0; position: absolute; top: 0; left: 0; } .items { display: flex; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .copyright { width: 600px; } .footer-content { width: 200px; } .footer-content div { border: 1px solid #000; height: 50px; } .sns {} .family-site{} /* Navigation */ .menu { width: 90%; margin: auto; list-style: none; padding: 0; padding-top: 10px; position: relative; } .menu li { text-align: center; border: 1px solid #000; } .menu li > a { padding: 5px; display: block; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; width: 100%; height: 200px; position: absolute; top: 0; left: 100%; } .sub-menu a { padding: 6px; display: block; background-color: #000; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-350px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000) /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
인코딩을 할때 선생님이 어쩔때는 원핫인코딩을 하시고 어쩔때는 레이블인코딩을 하시던데 그 인코딩을 정하시는 기준을 잘 모르겠습니다! 인코딩을 정하실때 그 경우에 대해서 자세히 알려주시면 감사하겠습니다 그리고 인코딩을 할때 컬럼도 몇개 정하셔서 하시던데 그 컬럼고르는 기준도 잘 모르겠습니다 그 기준에 대해서도 선택하는 방법을 알려주시면 감사하겠습니다 ㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. B4 실습 중에 안되는 기능이 있어 문의 드립니다. appendTo 기능이 작동하지 않습니다. 어떻게든 해결 해보려고 클래스네임, 점 하나까지 다 확인 했는데 도저히 모르겠어서 질문 남겨요. 되던게 안되니까 너무 당황스러워요... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>B4_슬라이드 최종본</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class=".slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class=".slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class=".slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-content"> <div class="footer-menu"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; display: flex; justify-content: space-between; width: 1200px; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} /* Slide */ .slide { position: relative; width: 1200px; height: 300px; margin: auto; } .slide > div { border: 1px solid #000; } .slide-items { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 400px; } .gallery { width: 400px; } .banner { width: 400px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-content { width: 1000px; } .footer-content > div { border: 1px solid #000; height: 50px; } .footer-menu {} .copyright {} .family-site { width: 200px; } /* slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
애니메이션 효과 animation: slide 10s linear infinite;로 주라고 하셨는데 어떤 강의에선 .animate 속성으로 주라고 하는데 무슨 차이이고 어느 것이 맞습니까?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
보통 작업형2에서는 예측값을 물어보는 문제가 나오던데요. 문제가 나올때 어느문제는 분류모델을, 어느문제는 회귀모델을 사용해야하는지 궁금합니다. 지금까지 강의+기출문제를 보면서는 분류/회귀를 결정하는 부분이 평가 모델을 통해 진행된다는 느낌을 받았는데요. 1) roc_auc_score, accuracy_score 이 평가모델로 쓰일 경우, 분류형 모델 사용(Classifier) 2) rmse, mean_squared_error 이 평가모델로 쓰일 경우, 회귀모델 사용(Regressor) 이렇게 생각하면서 작업형2를 접근하는게 맞는지 궁금합니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
현재 E1 실습 중에 안되는 부분이 있어 문의 드립니다. CSS에서 'shortcut-01' 이미지 조절 중인데 사이즈가 안줄어들어요.ㅠㅠ 왜이럴까요..? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1_최종본_영상시청</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/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> <div class="spot-menu"> <a href="#non3">로그인</a> <span>l</span> <a href="#non3">회원가입</a> </div> </header> </div> <div class="content"> <div class="shortcut"> <a class="shortcut-image" href="#none"><img src="images/shortcut-01.png" alt="shortcut-01"></a> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br>더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b></p> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news"></div> <div class="gallery"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/banner-02.png" alt="banner-02"></a> <a href="#none"><img src="images/banner-03.png" alt="banner-03"></a> <a href="#none"><img src="images/banner-04.png" alt="banner-04"></a> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-e-01.jpg" alt="slide-e-01"></a> <a class="slide-item" href="#none"><img src="images/slide-e-02.jpg" alt="slide-e-02"></a> <a class="slide-item" href="#none"><img src="images/slide-e-03.jpg" alt="slide-e-03"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.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> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> </div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .content { width: 400px; } .right { width: calc(100% - 600px); } header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; text-align: center; } .content {} .content > div { border: 1px solid blue; } /* Shortcut */ .shortcut { height: 150px; display: flex; } .shortcut .shortcut-image { height: 80px; } /* News & gallery */ .news { height: 250px; } .gallery { height: 250px; } .banner { height: 150px; display: flex; } .banner img { width: 100% } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; height: calc(100vh - 120px); position: relative; overflow: hidden; } /* Slide Animation */ .slide-items { width: 300%; height: inherit; font-size: 0; position: absolute; } .slide-items a { display: inline-block; height: inherit; width: calc(100% / 3); } .slide-items a img { width: 100%; height: inherit; object-fit: cover; } footer { display: flex; } footer > div { border: 1px solid green; height: 120px; } .footer-logo { width: 200px; } .footer-content { width: calc(100% - 200px); } .footer-content div { border: 1px solid #000; height: 60px; } .footer-link {} .footer-link a:after { content: 'l'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .copyright {}
