inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

이미지들이 포지션엡솔루트만하면 옆으로 사진처럼 옮겨지는데 어떤게 잘못된건가요 ?

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b-2레이아웃</title> <link rel="stylesheet" href="css/b-2.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <div class="sub-back"></div> </ul> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="imges/d-1images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="imges/d-1images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="imges/d-1images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns"> <div></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{ color: #333; margin: 0; background-color: #fff; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .header-inner{ background-color: #eee; } .content-inner{} .footer-inner{ background-color: #eee; } header{ width: 1200px; margin: auto; display: flex; justify-content: space-between; position: relative; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } /*navigation*/ .menu{ padding: 0; list-style: none; margin-top: 70px; } .menu li { float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } .slide{ position: relative; height: 300px; } .slide > div{ width: 1200px; height: 300px; margin: auto; border: 5px solid #000; position: absolute; } .items{ width: 1200px; margin: auto; display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ width: 1200px; margin: auto; display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .copyright{ width: 1000px; } .sns{ width: 200px; } .sns div{ border: 1px solid #000; height: 50px; } 슬라이드부분에 하다가 포지션 엡솔루트만 주면 사진기준이 이상하게되는데 뭐가잘못된건가요

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 178

SpringPhysicalNamingStrategy 바뀐건가요?

해결됨

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 찾아도 안나오는데 CamelCaseToUnderscoresNamingStrategy 이걸로 바뀐 것 같네요.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
궁금이 댓글 3 좋아요 0 조회수 1457

정적 팩토리 메서드에 static이 붙어야 하는 이유

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

안녕하세요. 강의 잘 보고 있습니다! 다른 분 질문에 궁금한 것이 해소되지 않아 질문드립니다. https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-JPA-%ED%99%9C%EC%9A%A9-1&unitId=24297&category=questionDetail&q=30892&tab=community 정적 팩토리 메소드 사용 이유중에 static 메모리에 올라가기때문에 새로운 객체를 생성하지 않는 장점이 있는 거라고 알고 있습니다. 이 예제의 경우 static을 빼도 JPA가 엔티티로 관리하면서 어차피 사용할 수 있는 부분아닌가요..? 라는 질문에서 강사님께서는 static을 빼보면 이해될 거라고 답변하셨습니다. 제가 생각하기로는 정적 팩토리 메서드 안에서 생성자를 통해 인스턴스를 생성하는 것은 똑같아 보이고, 호출할 때 new가 아닌 Order.createOrder()로 호출하는 것 외에는 차이점을 못 느꼈습니다. 조금 더 상세한 가르침을 주시면 감사하겠습니다!

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
저스트 댓글 2 좋아요 1 조회수 1132

버튼은 뜨는데 눌렀을 때 동작하지 않아요.

미해결

처음 만난 리액트(React)

17, 17.0.0, 18.0.0 다 해봤는데 버튼은 뜨지만 눌렀을 때 글자가 바뀌지 않아요ㅠ 문제가 무엇일까요?

  • HTML/CSS
  • javascript
  • react
김유림 댓글 3 좋아요 1 조회수 800

강의 누락

해결됨

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

안녕하세요 Thymeleaf vs HTML + RestController 주제를 듣던 중 의아한 부분이 생겨 글을 작성하게 되었습니다. 해당 강의에서 Thymeleaf 에 대한 설명을 진행하던 와중, 도중 강의가 갑자기 끝나는 듯한 느낌을 받았습니다. 강의 페이지를 보니, 이후 설명되야 할 내용처럼 보이는 것을 발견했습니다. 혹시 중간에 강의가 누락된 것인지 확인 부탁드립니다.

  • HTML/CSS
  • javascript
  • bootstrap
조약돌 댓글 2 좋아요 1 조회수 583

Querydsl SQLExpressions에 listagg 관련 질문

미해결

안녕하세요, 김영한 님. Querydsl SQLExpressions에 listagg 관련하여 질문이 있습니다. 현재 Projections.constructoer 방식으로 조회한 결과를 Dto로 받고있는데요, SQLExpressions.listagg(컬럼, ",").withinGroup().orderBy(컬럼).getValue().as("listaggs") 로 select후 Dto에서 String으로 못받는데 String으로 받으려면 어떻게 해야 될까요? 방법이 없는걸까요? 이미 같은 질문을 남긴 글이 있는데 미해결 상태라 다시 한번 글 올려 봅니다. 이방법을 사용하는 이유는 A 테이블, B 테이블이 있는데 1:N의 관계 입니다) A테이블 조회시 Response에는 B테이블의 컬럼 하나도 추가로 목록에 보여줘야 하는데 그럴때 B테이블의 해당 컬럼의 값이 다른 데이터가 2개 이상일시 A정보가 2건이 나오게 되서 (페이징 처리시에도 총 카운트와 페이징 처리가 제대로 되지 않습니다.) 한 row로 보여지게 하기 위해 사용하려 Querydsl SQLExpressions에 listagg 사용하려는데, String으로 받을수가 없더군요... 혹 Querydsl SQLExpressions에 listagg 아니더라도 다른 방법이 있을까요?

  • jpa
  • querydsl
  • java
skyghy3342 댓글 1 좋아요 0 조회수 1028

deleteUser 관련 질문

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

현재 코드에서는 name을 기준으로 delete를 하는데요, findByName(name)을 이용한 코드에서 DB 안에 같은 이름의 회원이 2명 이상인 경우엔 오류가 생깁니다. 그 이유가 find는 return 개수가 1건이기 때문에 rollback 된다고 생각했습니다. 이 버그를 수정하기 위해서 deleteUser의 파라미터는 Long id 로 수정했는데, 또 안 되더라고요...? findAll을 쓰면 같은 이름을 가진 모든 회원이 삭제될 것 같고... 어떻게 하면 동명이인의 회원 중에서 내가 원하는 한 회원만 삭제할 수 있나요? + 추가 방금 다른 학생분의 질문과 답변을 읽었습니다. 같은 내용의 질문인 것 같네요! 그러면 파라미터를 Long id 로 변경하되, 현재 실습 중인 UI에서도 코드를 수정해야하는 부분이 있기에 삭제가 안 되는 게 맞다고 이해하면 될까요?

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
alstjs 댓글 1 좋아요 1 조회수 228

안녕하세요

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요, 강사님! 수업 너무 잘 듣고있습니다. 다름이 아니라 제가 모르고 싸이월드 만들기 피그마에서 협업 요청 버튼을 눌렀는데 어떡하죠..?ㅠㅠ 거절해주실 수 있나요..?

  • HTML/CSS
  • javascript
찌움 댓글 1 좋아요 0 조회수 331

<ul class="gnb"> <div class="wrap"> 차이

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<ul class="gnb"> <div class="wrap"> 차이 무엇입니까?

  • HTML/CSS
  • jquery
  • 웹-디자인
HL5PFM 댓글 1 좋아요 1 조회수 564

[3D 텍스트효과(2)] GSAP을 위한 애니메이션 Timeline flow"기획", 이렇게 하면 될까요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요, 애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다! 섹션, "3D 텍스트효과(2)" 에서 인터벌 단위로, duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요 강좌에서 나온 예시 SVG 이미지 보면서, 저렇게 애니메이션을 정의하면 되겠다, 인사이트를 얻었습니다. 문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지, 관점이나, 포인트가 궁금 해졌습니다! (이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,) 강의 내용처럼, 애니메이션을 duration, stagger, pause, delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?! 블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요! 감사합니다!

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
프린이 댓글 1 좋아요 1 조회수 549

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

미해결

애플 웹사이트 인터랙션 클론!

초반부 messageA_opacity_in 을 콘솔로 찍었는데요, partScrollStart보다 currentYOffset이 작을때는 rv에 values[0] 즉 '0'을 리턴해야하는데, 그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다... const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values:{ messageA_opacity: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ]; function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / scrollHeight if(values.length === 3){ // start ~ end 사이의 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){ rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart){ rv = values[0]; } else if (currentYOffset > partScrollEnd){ rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; switch (currentScene){ case 0: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
woojae sim 댓글 2 좋아요 0 조회수 487

map으로 배열을 만들지 않아도 괜찮을까요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

planet.forEach(planetName => { /* html */ $('.space').insertAdjacentHTML( 'beforeend', `<div class="solar_system" data-planet-name="${planetName}"> <div class="planet ${planetName}"> <div class="overlay"></div> <h2>${planetName}</h2> </div> </div>` ); }); 이렇게 처음부터 forEach로 요소를 만들어도 괜찮나요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
jay k 댓글 1 좋아요 1 조회수 355

애니메이션 재생헤드를 처음으로...

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요 선생님 1. 어제 질문드린 내용(forEach로 다중 요소에 중복 이벤트 걸기)은 마지막에 말씀해주신 'gsap.to (item,{rotation:”+=360”}) 으로 작성해보세요 ' 코드로 해결을 하였습니다. 감사합니다. 그런데 그전에 '그럴경우 애니메이션이 종료 후 애니메이션의 재생헤드를 처음으로 돌려놓는 코드를 작성해 주시거나' 라고 말씀해주셨는데... 이게 어떻게 하는건지 도저히 모르겠어요..ㅜㅜㅜ 예시코드를 시간되실때 한번 보여주셨음 해요.. (아직 많이 부족합니다..이해 부탁드려요..ㅜㅜ) 시간되실 때 천천히 해주셔도 됩니다. 항상 똑부러지는 강의 잘 듣고 있습니다. 감사합니다.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
leo 댓글 1 좋아요 2 조회수 329

폰트어썸 .item input:focus

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

.item input:focus .fa-solid {background-color:dodgerblue;} 의 폰트어썸의 백그라운드 색상이 변하질 않습니다.. .item input:focus { border: 1px solid dodgerblue; box-shadow: 0 0 5px dodgerblue; } 요 부분은 잘 작동합니다!/* html */ <form action="info"> <div class="item"><i class="fa-solid fa-user"></i><input type="text" placeholder="Your Name"></div><div class="item"><i class="fa-solid fa-envelope"></i><input type="email" placeholder="Email"></div><div class="item"><i class="fa-solid fa-phone"></i><input type="tel" placeholder="Phone Number"></div></form> /* CSS */ body { margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh; /*높이값 있어야 수직정렬됨*/font-family: sans-serif;}a {text-decoration: none;}.item {margin: 10px;width: 300px;position: relative;}.item input {border: 1px solid lightgray;width: inherit;height: 40px;padding: 10px;box-sizing: border-box;border-radius: 5px;outline: none;padding-left: 50px;transition: 0.5s; }.item .fa-solid {position: absolute;top: 0;left: 0;height: 40px;line-height: 40px;width: 40px;text-align: center;color: #fff;background-color: gray;border-radius: 5px 0 0 5px;transition: 0.5s;}.item input:focus {border: 1px solid dodgerblue;box-shadow: 0 0 5px dodgerblue;}.item input:focus .fa-solid{background-color: dodgerblue;}.item input:focus::placeholder {visibility: hidden;}

  • HTML/CSS
  • jquery
yerin6338 댓글 1 좋아요 1 조회수 328

timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

let tl = gsap.timeline(); tl.to(".dash",{opacity:1, backgroundColor:'yellow'}) 안녕하세요! 강의를 듣다가, 궁금함이 생겨 문의 드립니다, #질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요? #질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요? #질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요? 변수 tl과 같이, timeline()을 호출한 함수를 변수에 정의 할 때, let으로 해야 할지, const로 해야 할지 궁금함합니다. const tl = gsap.timeline() let tl = gsap.timeline() 함수를 할당하는 변수에 주로 const 변수에 담아 사용해와서, 강좌에서는 let으로 정의해주신 부분에 의미가 있을까, 궁금함이 생겼습니다! GSAP도 JS다 보니, 사용자가 실수로 이미 정의한 tl 변수에 다른 애니메이션도 추가할 수 있는 위험이 있고 그럴까요?? 강의 초반부에 gsap에 다른 값을 할당하면 안된다는 부분과 어떤 연관성이 있는걸까요? GSAP도 JS 라이브러리 다보니, 변수 정의하는 것도 let과 const로 각각 정의할 때 차이점이 있지 않을까 해서 문의 드렸습니다! #질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요? GSAP 파트3을 수강하기 위해, 열심히 정주행중입니다! 감사합니다!

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
프린이 댓글 1 좋아요 1 조회수 493

forEach안에서 gsap을 사용할 때 이벤트가 한번밖에 안걸리는 문제

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

const box=gsap.utils.toArray('.box'); box.forEach(function(item){ item.addEventListener('click',function(){ gsap.to(item,{ rotationY:360, duration:1, ease:'none' }) }) }) 안녕하세요 강의 잘 보고있습니당 공부하다가 질문이 생겨 문의드려요.. gsap을 forEach안에서 사용해서 애니메이션을 줄려고합니다. 위처럼 코드를 적으면 동작은 잘되는데 클릭이 한번밖에는 안되네요.. 이 문제를 해결할 수 있을까요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
leo 댓글 1 좋아요 1 조회수 660

혹시 html에 html파일 include하는 방법은 없나요?

해결됨

[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용

안녕하세요. 메뉴나 footer같은건 include해서 사용하는게 좋을것같은데요. html문서 안에 html파일은 include하는 방법은 없을까요?

  • HTML/CSS
  • bootstrap
하용우 댓글 1 좋아요 0 조회수 1667

트랜잭션 전파속성, 데이터 소스

해결됨

재고시스템으로 알아보는 동시성이슈 해결방법

안녕하세요. 강의 잘 보고 있습니다. 의문이 생겨 질문을 남깁니다. 트랜잭션 전파속성을 REQUIRES_NEW로 해서 새로 생성한 이유가 있을까요? 그냥 REQUIRED로 하면 안되나요?? 강의 내에서 데이터소스를 분리하는 것을 추천해주셨는데, 커넥션 풀 사이즈를 늘리면 안되나요?? 감사합니다.

  • java
  • spring
  • 동시성
rhkdals195 댓글 2 좋아요 0 조회수 665

HTML Snippets 안나오네요,,

미해결

[웹 개발 풀스택 코스] HTML&CSS 기초

HTML Snippets 안나오네요,, 없이 해도 상관없나요?

  • HTML/CSS
무능한아기 댓글 1 좋아요 1 조회수 823

실무에서 태그들 모두 암기해서 쓰나요?

해결됨

[웹 개발 풀스택 코스] HTML&CSS 기초

실무에서 html이 어떻게 사용되나요? 그리고 사용되면 태그들은 암기해서 사용하나요?

  • HTML/CSS
박주연 댓글 1 좋아요 0 조회수 729

인기 태그

인프런 TOP Writers

주간 인기글