172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<header> <footer> 시맨틱태그와 <div class="header"> 클래스 네임 중에 어떤방식으로 시험을 봐야할까요? 둘 다 상관없나요? 강의 화면이랑 다운받은 html 다른 경우도 있는 것 같아서요~
미해결
애플 웹사이트 인터랙션 클론!
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
강의에서 나온 것처럼 하나는 float:left 하나는 margin:auto 하나는 float: right시 마지막 요소가 아래에 배치됩니다. 생각해보면 이것은 너무나도 당연한 것입니다. 마지막 요소의 float:right을 꺼보면 이렇게 되죠. 왜 이렇게 되는지 모르겠다면, 그냥 float와 margin:auto를 적용시키지 않고, div 요소 3개를 그냥 그대로 놔두면 이렇게 차곡차곡 쌓이게 되죠! 그렇기에 마지막 요소를 float: right을 하면 자기가 갈 수 있는 가장 오른쪽으로 가게 되는 거죠 그러면 다시 돌아가서 왜 첫번째 요소는 float:left를 했을때 중간 요소와 같은 줄에 있는 거고, 2,3 요소 순서를 바꾸면 해결이 될까요? 우선 1번 요소가 float:left로 배치가 되어도 없는 아이처럼 작동하죠. 그러니까 중간 요소가 배치될때는 1번 요소는 없는 것처럼 무시를 하고 혼자만 있을 때 처럼 가운데에 오게 되겠죠. 그러나 2,3 요소 순서를 바꾸면 원래처럼 1번 요소는 왼쪽에 가고, 그다음에 오는 것이 3번(float:right)요소가 되니까 이 아이도 1번 요소가 없을때와 동일하게 그냥 오른쪽으로 가겠죠. 그다음에 2번 요소(margin:auto)가 배치 되려고 하는데, 이전에는 1번 요소만 무시했다면 이번에는 1,3 요소 모두 무시하고 그냥 아무것도 없는 것처럼 가운데에 오게 되는 거죠!
미해결
[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용
강의자료 다운로드 어디있나요??
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
html 표 태그에서 6분 44초에 <tbody>안에 <tr>넣고 <tr>전체를 앞으로 한 번에 옮긴 건 어떤 단축키를 누른건가요?
해결됨
[코드캠프] 시작은 프리캠프
<div class="token__wrapper"> <div class="token" id="token">000000</div> 여기서 div class="token" 이랑 id "token" 순서를 반대로 하면 왜 컬러가 안 입혀지나요? css 적용순서가 달라지게 되나요?
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요 파이널 과제를 한 후 레퍼런스와 검토 중인데요, 1/ 수업시간엔 changeFocus()로 알려주셨는데, 굳이 onchange="changePhone2()" onkeyup="onchange()" 로 사용된 이유가 있을까요? 굳이 두개로 나눠서 사용한 이유가 궁금합니다. 2/ 해당 코드가 "키보드를 눌렀다 때면 onchange함수를 실행시켜줘. onchange는 changePhone함수를 실행시킨다는 의미야," 라는 의미일까요? 찾아봤지만 명쾌하게 이해가 되지 않아 질문합니다.
해결됨
실전! Querydsl
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 수정, 삭제 벌크 연산의 6:20 부분에서 update쿼리로 인한 영속성컨텍스트 문제를 설명해주셨는데요. 전 강의에서 em.flush()실행되는 조건들을 설명해주실 때, 직접 호출 시 트랜잭션 커밋 시 JPQL쿼리 실행 시 em.flush()가 실행된다고 설명해주신 것으로 기억하고 있습니다. querydsl도 결국 JPQL기반으로 작동된다고 알고 있는데, querydsl을 통한 select쿼리 실행을 하면 자동으로 em.flush()가 실행되지 않고, 직접 해주어야 하는 메커니즘이 궁금합니다!
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
안녕하세요, build.gradle의 빌드 실패가 나서 문의드립니다. JDK 버전은 다음과 같이 17.0.6입니다. 그리고 인텔리제이 설정은 다음과 같습니다. java 컴파일러 설정 2. 빌드 도구 설정 3. 프로젝트 설정 마지막으로 처음 프로젝트를 다운로드 받았던 설정은 다음과 같습니다.(spring boot 3.0.7 버전 사용) 처음 build.gradle을 실행할 때부터 에러 로그 하나도 없이 그냥 빌드 실패했다는 에러가 뜹니다. 컴퓨터를 여러번 껐다가 켜봐도 여전히 같은 에러가 뜹니다. 인텔리제이와 스프링이 완전 처음이라서 이 에러를 어떻게 해결해야 하는지 모르겠습니다. 커뮤니티의 다른 글들을 참고해봐도 딱히 도움이 되지는 않는 것 같습니다. 도와주시면 너무 감사하겠습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 선생님. 제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다. <script type="text/javascript" src=" script/jquery-1.12.4.js "></script> <script type="text/javascript" src=" script/custom.js "></script> 요렇게 적용하라고 하셔서 그대로 했을때는 되는데, js파일을 script 폴더에 넣지않고 밖으로 뺀다음 <script type="text/javascript" src=". ./jquery-1.12.4.js "></script> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데 적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D E 유형 필독사항에서 object-fit 속성 강의에서 object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고 그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데, 부모요소의 너비높이가 없이, inherit 없이도, img의 너비나 높이만 있어도 구현되던데, 문제가 있을까요? 아래처럼 해도 될까요? 꼭 반드시 부모요소의 너비높이가 있어야되고 inherit로 받아와야만 하나요? 참고로 아래는 D1 유형 중 슬라이드부분 입니다. <div class="slide"> <div class="slide-image"> <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a> <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a> <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a> </div> </div> .slide{ position: relative; /**/ overflow: hidden; width: 400px; } .slide-image{ font-size: 0; animation: slide 10s linear infinite; } .slide-image img{ width: 100%; height: 400px; object-fit: cover; }
미해결
처음 만난 리액트(React)
5:36 부분에 setState 를 활용해서 notifications에 들어있던 내용을 지워야만 unmount가 되던데 왜 그런건가요?? render() 부분에서 더 이상 출력?할 만한 내용이 없다고 판단해서 unmount가 되는건가요?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요! 질문 좀 드리려고 합니다 엔티티 매니저 프록시는 프록시를 싱글톤으로 주입해서 동시성 문제를 해결하고 실제 엔티티 매니저 인스턴스를 ThreadLocal로 관리하는 역할 정도로 생각해도 괜찮을까요? 추가적으로 실제 엔티티 매니저는 @Transactional을 사용하면 JpaTransactionManager에서 생성이 되는데 @Transactional을 사용하지 않으면 처음 엔티티 매니저를 사용할 때 생성이 되나요?
미해결
10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
안녕하세요. 큰돌님 강의 잘 보고있습니다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Arrays; public class Main { static int[][] board; static boolean[][] visited; static int[] dy = {-1, 0, 1, 0}; static int[] dx = {0, 1, 0, -1}; static int yLen; static int xLen; static int cnt; public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int n = Integer.parseInt(br.readLine()); StringBuilder sb = new StringBuilder(); while (n-- > 0) { int[] given = Arrays.stream(br.readLine().split(" ")).mapToInt(Integer::parseInt).toArray(); if (given[2] == 1) { sb.append(1).append(System.lineSeparator()); continue; } board = new int[given[0]][given[1]]; visited = new boolean[given[0]][given[1]]; yLen = given[0]; xLen = given[1]; for (int i = 0; i < given[2]; i++) { String[] numStr = br.readLine().split(" "); int y = Integer.parseInt(numStr[0]); int x = Integer.parseInt(numStr[1]); board[y][x] = 1; } for (int i = 0; i < yLen; i++) { for (int j = 0; j < xLen; j++) { if (!visited[i][j] && board[i][j] == 1) { dfs(i, j); cnt++; } } } sb.append(cnt).append(System.lineSeparator()); } System.out.print(sb.substring(0, sb.length() - 1)); } public static void dfs(int y, int x) { visited[y][x] = true; for (int i = 0; i < 4; i++) { int ny = y + dy[i]; int nx = x + dx[i]; if (ny < 0 || ny >= yLen || nx < 0 || nx >= xLen) continue; if (visited[ny][nx] || board[ny][nx] == 0) continue; dfs(ny, nx); } } } 위 코드를 실행하면 12%, ArrayIndexOutOfBounds가 발생하는데 어떤 부분인지 알 수 있을까요?
해결됨
실전! 스프링 데이터 JPA
안녕하십니까 강사님. 좋은 강의 정말 감사합니다. 이번에 강사님께 강의를 듣고 현업에 적용하는 도중 궁금한 사항이 있어 문의하게 되었습니다. 저희는 현재 DDD 를 적용하려고 합니다. DDD 에서는 애그리거트끼리의 관계를 맵핑하는 것을 지양하는 것으로 알고 있습니다. 따라서 저희는 ERD 기준으로 도메인을 설계해보니 실제 나온 도메인을 보면 테이블이 전부 도메인 클래스가 되었고 서로간의 관계를 코딩으로 맺는 부분 (@ManyToOne 등)이 존재 하지 않습니다. 현업에서도 ERD 를 기준으로 도메인 클래스를 나누면 테이블 당 하나의 애그리거트가 나오는 것이 보편적인 사항일까요? DDD 로 개발하다보면 도메인 클래스에 관계를 맺는 부분이 없는게 보편적일까요?
미해결
애플 웹사이트 인터랙션 클론!
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } }; 선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() } 조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
해결됨
Java/Spring 주니어 개발자를 위한 오답노트
안녕하세요,선생님 습하고 더운 여름 몸 건강히 계시길 바랍니다. 강의를 듣는 도중 궁금한 부분이 생겼습니다. DIP와 IoC가 다르다고 말씀하신 부분이, DIP가 의존성 주입을 역전함으로써 제어의 흐름을 바꾸지만 IoC가 의존성을 주입해주는 것은 아니어서 그렇다고 이해되는데 제대로 이해한 게 맞을까요? ㅜㅜ 또, Open-Closed 법칙을 설명해주시는 1:32초 부분에 수정에는 열려있어야 한다는 말씀을 하셨는데 수정 시 많은 메소드 혹은 클래스를 수정해야 하는 경우가 수정에 열려있는 것이 아닌지요 ㅜㅜ... 제가 잘 모르다보니 헷갈려서 질문드립니다!
미해결
따라하면서 배우는 웹애플리케이션 만들기
bitnami 설치 제공이 이제 중단되었다는데... 어떻게 설치하나요??
미해결
[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">지금의 서울</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> <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> <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> </ul> </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"> <img class="banner-image" src="images/banner-01.png" alt="banner image"> <div class="banner-content"> <h3>얼리버드 선착순 할인 이벤트 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. </p> </div> <a href="#none"><img src="images/banner-02.png" alt="banner link"></a> </div> </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="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery3"><span>라인을 만드는 필라테스</span></a> </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="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="family-site"> <select> <option value="">패밀리 사이트</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </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> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<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: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 650px; */ } .left { width: 200px; background-color: rgba(210, 181, 161, 0.5); } .right { flex: 1; } header {} header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; } .menu li > a { border: 1px solid lightgray; display: block; padding: 5px; background-color: lightskyblue; transition: 0.1s; } .menu li:hover > a { background-color: olivedrab; color: #ffffff; } .sub-menu { border: 1px solid lightgray; background-color: lightcyan; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; } .sub-menu a:hover { background-color: olivedrab; color: #ffffff; } .slide { display: flex; } .slide > div { /* border: 1px solid blue; */ height: 400px; } .slide-image { flex: 1; height: inherit; overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; width: 300%; height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide-image-inner a { height: inherit; display: inline-block; width: calc(100% / 3); } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } .banner { width: 230px; text-align: center; box-sizing: border-box; padding: 5px; font-size: 14px; background-color: ivory; } .banner .banner-image { width: 88%; } .items { display: flex; } .items > div { /* border: 1px solid green; */ height: 250px; flex: 1; } .news {} .gallery {} /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 5px; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: lightskyblue; } .tab1 { border: 1px solid #000000; height: 208px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 9px; border-bottom: 1px solid #000000; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000000; height: 208px; text-align: center; box-sizing: border-box; padding-top: 10px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 165px; border-radius: 5px; } .tab2 a span { display: block; } footer { display: flex; height: 100px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; } .copyright { flex: 1; } .family-site { width: 230px; } .family-site select { padding: 5px; border-radius: 3px; } .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #ffffff; width: 460px; padding: 20px; border-radius: 10px; box-shadow: inset 0 0 10px #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000000; padding: 5px 10px; border-radius: 5px; } $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) .banner에서 gap처럼 요소 간의 간격을 띄우는 방법이 있나요?
해결됨
실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)
안녕하세요. 강의 들으며 재밌고 공부하고 있습니다. 감사합니다. 예외 처리를 util패지키에 모아서 처리하는 것은 이해했습니다. 약간 궁금증 생겨서 문의 남겨봅니다! BookService의 코드 일부분 입니다. 여기서 보면 UserRepository 와 BookRepository 의 findByName 에서 모두 fail()로 예외 처리를 하는데요, 이걸 그냥 리포지토리 계층의 메서드 자체에서 예외를 처리해주면 더 깔끔하지 않을까 하는 궁금증이 생겼습니다. 제가 지금까지 공부하면서는 리포지토리 계층에서 디폴트 메서드를 통해서 처리하는 코드도 봤고, 서비스 계층에서 처리하는 코드도 봐서 어떤 방식을 선호하시는지, 권장 하시는지 궁금합니다! 좋은 강의 감사합니다!
