172만명의 커뮤니티!! 함께 토론해봐요.
미해결
웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1
메인페이지 컨텐츠 영역 제작하기(매거진영역) 부분에서 visual의 이전/다음/컨트롤 영역을 재사용하기 위해 class 추가하여 slide를 이용한다고 하셨는데요. <div class="con"> <div class="slide"> <div class="txt"> 가구소재에서<br> 인테리어 자재까지 <p>한솔홈데코 편리하고 행복한 공간을 만들어 갑니다.</p> </div> </div> </div> 이미 class에 slide를 사용하고 있는데 또 visual에 slide를 사용하고 css를 수정하는 것을 보고 질문드립니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A-3을 연습하고 있는데... 서브메뉴에 마우스를 오버하면 저렇게 뒷 배경도 일부분 같이나와서 이미지를 가려버리는 현상이 생깁니다. 도대체 왜 이러는걸까요ㅠㅠ...? html, css 첨부 드립니다... <div class="header"> <div class="logo"> <a href="#none"><img src="image/logo.png"></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> </div> </li> <li> <a href="#none">입주정보</a> <div class="sub-menu"> <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> </div> /* 네비게이션 */ .header .navi { float: right; margin-top: 50px; margin-right: 25px;} .menu li {float: left;} .menu li > a { padding: 7px; border: 1px solid #000; width: 180px; display: inline-block; text-align: center; box-sizing: border-box; transition: 0.5s;} .menu li > a:hover {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; } .sub-menu a {display: block; padding: 5px; text-align: center; transition: 0.5s;} .sub-menu a:hover {background-color: #000; color: #fff;}
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 현재 스프링 부트 3.1 로 강의를 따라가고 있습니다. default_batch_fetch_size:10 을 설정해서 나가는 쿼리가 줄어드는 것을 확인했습니다만, 쿼리가 두 개가 아니고 총 세 개가 나왔습니다. 023-06-13T23:24:02.666+09:00 DEBUG 68750 --- [nio-8080-exec-5] org.hibernate.SQL : select o1_0.order_id, d1_0.delivery_id, d1_0.city, d1_0.street, d1_0.zipcode, d1_0.status, m1_0.memeber_id, m1_0.city, m1_0.street, m1_0.zipcode, m1_0.name, o1_0.order_date, o1_0.status from orders o1_0 join member m1_0 on m1_0.memeber_id=o1_0.member_id join delivery d1_0 on d1_0.delivery_id=o1_0.delivery_id offset ? rows fetch first ? rows only 2023-06-13T23:24:02.676+09:00 INFO 68750 --- [nio-8080-exec-5] p6spy : #1686666242676 | took 2ms | statement | connection 8| url jdbc:h2:tcp://localhost/~/springbootjpa select o1_0.order_id,d1_0.delivery_id,d1_0.city,d1_0.street,d1_0.zipcode,d1_0.status,m1_0.memeber_id,m1_0.city,m1_0.street,m1_0.zipcode,m1_0.name,o1_0.order_date,o1_0.status from orders o1_0 join member m1_0 on m1_0.memeber_id=o1_0.member_id join delivery d1_0 on d1_0.delivery_id=o1_0.delivery_id offset ? rows fetch first ? rows only select o1_0.order_id,d1_0.delivery_id,d1_0.city,d1_0.street,d1_0.zipcode,d1_0.status,m1_0.memeber_id,m1_0.city,m1_0.street,m1_0.zipcode,m1_0.name,o1_0.order_date,o1_0.status from orders o1_0 join member m1_0 on m1_0.memeber_id=o1_0.member_id join delivery d1_0 on d1_0.delivery_id=o1_0.delivery_id offset 0 rows fetch first 100 rows only; 2023-06-13T23:24:02.681+09:00 DEBUG 68750 --- [nio-8080-exec-5] org.hibernate.SQL : select o1_0.order_id, o1_0.order_item_id, o1_0.count, o1_0.item_id, o1_0.order_price from order_item o1_0 where array_contains(?,o1_0.order_id) 2023-06-13T23:24:02.689+09:00 INFO 68750 --- [nio-8080-exec-5] p6spy : #1686666242689 | took 0ms | statement | connection 8| url jdbc:h2:tcp://localhost/~/springbootjpa select o1_0.order_id,o1_0.order_item_id,o1_0.count,o1_0.item_id,o1_0.order_price from order_item o1_0 where array_contains(?,o1_0.order_id) select o1_0.order_id,o1_0.order_item_id,o1_0.count,o1_0.item_id,o1_0.order_price from order_item o1_0 where array_contains('ar2: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT), NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL]',o1_0.order_id); 2023-06-13T23:24:02.690+09:00 DEBUG 68750 --- [nio-8080-exec-5] org.hibernate.SQL : select i1_0.item_id, i1_0.dtype, i1_0.category_item_id, i1_0.name, i1_0.price, i1_0.stock_quantity, i1_0.author, i1_0.isbn, i1_0.artist, i1_0.etc from item i1_0 where array_contains(?,i1_0.item_id) 2023-06-13T23:24:02.691+09:00 INFO 68750 --- [nio-8080-exec-5] p6spy : #1686666242691 | took 0ms | statement | connection 8| url jdbc:h2:tcp://localhost/~/springbootjpa select i1_0.item_id,i1_0.dtype,i1_0.category_item_id,i1_0.name,i1_0.price,i1_0.stock_quantity,i1_0.author,i1_0.isbn,i1_0.artist,i1_0.etc from item i1_0 where array_contains(?,i1_0.item_id) select i1_0.item_id,i1_0.dtype,i1_0.category_item_id,i1_0.name,i1_0.price,i1_0.stock_quantity,i1_0.author,i1_0.isbn,i1_0.artist,i1_0.etc from item i1_0 where array_contains('ar3: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT), CAST(3 AS BIGINT), CAST(4 AS BIGINT), NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL]',i1_0.item_id); 수강 중에 제가 따라 작성한 코드를 스프링부트 2.4.1에 그대로 옮겨보니 강의 내용대로 where in 쿼리가 나오는 것을 확인했습니다. 스프링부트 버전 차이에서 나오는 쿼리가 달라진 것 같은데, 제 생각이 맞을까요? 답변 확인 : 빠르게 답변해주셔서 감사합니다!! 덕분에 array_contains 로 최적화된 이유를 쉽게 이해할 수 있었습니다. (Hibernate에서 최적화를 했었었군요!) 아 그리고 강의 내용에서 쿼리 세 개 나온다는 것을 확인했습니다(잘못 본 것에 대해 질문글에서 수정을 해놨어야 했는데 빼놓지 않았었네요 ㅠㅠ) 다시 한번 상세한 답변 정말 감사드립니다.
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
영상 마지막 부분에 보면 부모 요소에 position: absolute인 경우에도 부모-자식 요소가 매칭이 되게 되는 걸 보셨을 겁니다. 정확하게는 relative가 부모, absolute가 자식으로 매칭되는 것이 아닌 (편의상 이렇게 설명을 하셨지만) absolute는 position: static 속성을 가지고 있지 않는 조상을 기준으로 작동합니다 즉, relative, absolute, fixed, sticky 의 값을 가지고 있는 부모가 있다면 자식-부모 매칭이 됩니다. 그러나, 대부분의 경우에는 relative-absolute인 경우가 대다수죠!
해결됨
[코드캠프] 강력한 CSS
안녕하세요 강의가 정말 마음에 들어서 코드캠프의 프론트엔드 강의목록의 시작은 프리캠프 강력한 css 훈훈한 javascript 3가지 과정을 구매하여 열심히 공부중입니다 3가지 과정수강이후 커리큘럼이 고농축 프론트엔드 코스 같아서 구매를 하려 했습니다만 고농축 프론트엔드 코스의 커리큘럼을 보니 위에 수강중인 3가지 과정이 전부 포함된 커리큘럼이더라구요 혹시 기존과정을 구매한 사람을 위한 할인 혜택이나 기존과정이 제외되어 있는 강의 등이 있나 궁금하여 질문드려봅니다.
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요 선생님. 강의 항상 잘 보고 있습니다. 오늘 모바일웹 강의 결제하여 듣기 시작한 수강생인데요~ 현재 신입 퍼블리셔이고, 모바일 웹 프로젝트를 한다고 하는데 회사에 사수도 없고 모바일웹은 해본적이 없어 미리 준비할 겸 수강하게 되었는데요~ 제가 따로 디자인 부분은 하지 않고 디자인툴(포토샵 or 피그마)에 있는 디자인 시안으로 이미지 추출하고 디자인 시안 보고 퍼블리싱 하는 작업을 진행할 예정입니다. 그래서 수강 목적은 모바일웹 퍼블리싱 하는것을 배우기 위함 이라고 생각하시면 됩니다! 혹시 이러한 경우에는 디자인 파트인 섹션1 강의도 들어야 되는 걸 까요~? 아님 안 들어도 무관할까요? 답변 미리 감사드립니다!
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="kor"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo header"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> <footer> <div class="copyright"> 동문경조사, 동문행사일정, 사용자매뉴얼 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div></div> <div></div> </div> </footer> </div> </div> </div> <script href="script/jquery-1.12.4.js" type="text/script"></script> <script href="script/custom.js" type="text/script"></script> </body> </html> @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} .header-logo { border: 1px solid #000; height: 100px; } .navi { border: 1px solid #000; height: 400px; } .slide {} .slide > div { border: 1px solid #000; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid #000; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; border: 1px solid #000; } .gallery { width: 300px; border: 1px solid #000; } .shortcut { width: 200px; border: 1px solid #000; } footer { overflow: hidden; } footer > div { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 600px; } .sns { width: 200px; } .sns div { height: 50px; border: 1px solid #000; box-sizing: border-box; } footer에 overflow: hidden; 을 지우면 라인이 보이는데, 다시 넣으면 안보여요. 뭐가 잘못된걸까요?
미해결
처음 만난 리액트(React)
26줄 notifications 과 31줄 notifications 차이점 ? 26줄 notifications22 로 수정, 39줄 notifications22로 수정 50줄 this.state.notifications22 했더니 에러가 발생해서요 this.setState({ // this.setState({}) 함수로 state를 update 한다 notifications: notifications, //이 부분 설명 좀 부탁합니다 });
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D 타입 연습</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"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shorcut"></div> <div class="news-galley"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="cpoyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script></body></html> ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ @charset "utf-8"; body { background-color:#fff; color:#000; margin:0;} a { text-decoration:none; color:#000;} .container {} .main-content { display:flex;} .left { width:200px; border:1px solid #000;}.right { flex:1; border:1px solid red;} header {} .header-logo { height: 100px; border:1px solid red;} .navi { height:400px; border:1px solid #000;} .spot-menu { height: 50px; border:1px solid red;} .slide { height:400px;} .slide-image { border:1px solid green; height:inherit;} .slide-banner { width:150px; height: 300px; border: 1px solid red; position:absolute; top:0; right:0;} .items {}.shortcut { height:200px; border: 5px solid gold;} .news-gallery { height:250px; border:1px solid blue;} footer { display: flex;} footer > div { border:1px solid #000; height:100px;} .footer-logo { width: 200px;} .copyright { flex:1;} .sns { width:300px;}
미해결
소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데 이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데 이거 보안적으로 괜찮은걸까요? 관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂 다른 분들은 어떻게 하시는지 궁금합니다.
미해결
자바스크립트 : 기초부터 실전까지 올인원
git 허브나 netlify를 통해 쉽고 유용하게 도메인얻는 방법 너무 잘 들었습니다. 궁금한 부분은 git hub에 올리는 용량은 제한이 없나요? git hub에 올리는 용량과 netlify의 용량은 상관이 없는지 궁금합니다. 좋은 강의에 항상 감사드립니다.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<div class="history-info"> <h2>History</h2> <hr class="bar" /> <div class="history-slider"> <div> <h4> The Project<br />of Architect for the <span>2013</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2014</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2015</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2016</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2017</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2018</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2019</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2020</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> </div> </div> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
미해결
실전! Querydsl
안녕하세요. where 조건을 동적으로 생성해주는 부분에 대해서는 충분히 이해가 되었습니다. 그런데 혹시 특정 condition 값에 따라 join을 해줘야하는 테이블이 다른 경우라면 어떻게 처리되어야 할지 모르겠어서 글을 남기게 되었습니다. condition조건에 teamName이 있을 때만 team을 조인해주고 싶은데 join 구문을 동적으로 처리할 수 있는 좋은 방법이 어떤 것인지 질문드립니다. 😭 감사합니다.
해결됨
[코드캠프] 강력한 CSS
여기서 display:flex; 입력시 왜 text -align은 적용안되는지 궁금합니다! .diary-date{ font-size:14px; color:gray; text-align:right; }
미해결
[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 적용순서가 달라지게 되나요?
