inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

미해결

CSS Flex와 Grid 제대로 익히기

백엔드 지망생입니다. 개인프로젝트 겸 기본적인 css 지식은 있어야 할 것 같아서 하고 공부하고 있는데, 아직 px와 em rem을 언제 어떻게 써야 할지 잘 모르겠네요.. px em rem의 개념은 잘 알고 있지만 강사님꼐서 어떤 상황에선 px을 쓰시고 em을 쓰시고 rem을 쓰시는데 초보자 입장에서 잘 와닿지 않네요.. 3:42초에 search-form input[type='search']에만 보더라도 한 클래스 안에 3개의 px em rem이 써 있는데 이런 감각적인 것을 어떻게 연습하면 좋을까요? 레이아웃 크기 지정도 그렇지만 또 font크기도 px em rem을 따로 쓰던데 이것도 감을 못잡겟네요..

  • HTML/CSS
  • flex
댓글 2 좋아요 0 조회수 548

부트스트랩, css

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

프로젝트를 받아서 실행시켜보니 이런 메시지가 뜨면서 css가 적용되지 않은것을 확인 했습니다. 해결해 보기 위해서 링크도 추가해보고 했지만 여전히 바뀌지가 않네요 이럴경우는 어떻게 해야할까요..?

  • java
  • spring
  • spring-boot
  • jpa
  • thymeleaf
최정식 댓글 2 좋아요 0 조회수 373

슬라이드가 바뀌는 모션은 보이는데 사진이 안바뀝니다

미해결

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

뚝뚝 끊기기만 하고 사진은 아예 안바껴요.. 모션만 보이고 <!DOCTYPE html> <html lang="ko"> <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"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> <!-- header --> <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> <!-- slide --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </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; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* 모듈 외 컨텐트 */ .header-logo { line-height: 130px; } .footer-logo { line-height: 130px; } .copyright { text-align: center; padding-top: 30px; } .sns { line-height: 130px; text-align: center; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('slide-item:first-child').appendTo('.slide-items'); }); }, 3500) 좌우로 넘어가는 거 했을 때도 똑같은 현상이 나타났는데 뭐가 문제일까요..ㅜㅠㅠ

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

ReactDOM.render .createRoot 질문 드립니다.

미해결

처음 만난 리액트(React)

ReactDOM.render( <React.StrictMode> <CommentList /> </React.StrictMode>, document.getElementById('root') ) 위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요. .render대신에 .createRoot로 사용하면 될까여? 만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • react
Minkoo Lee 댓글 2 좋아요 1 조회수 569

강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ

미해결

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

■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ 혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body> <css> * { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-

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

반복문 문제3 369게임

미해결

자바스크립트 : 기초부터 실전까지 올인원

1부터 50까지 369결과 프린트인데 왜 숫자 2인데 박수 짝치죠?

  • HTML/CSS
  • javascript
­김연성 댓글 1 좋아요 0 조회수 496

다형성 참조에 관해 질문 있습니다.

미해결

김영한의 실전 자바 - 기본편

public class Animal { public void sound(){ System.out.println("동물 울음 소리"); } } public class Dog extends Animal{ @Override public void sound() { System.out.println("멍멍"); } } public class BabyDog extends Dog{ public void sound() { System.out.println("낑낑"); } } public class AnimalPolyMain1 { public static void main(String[] args) { Dog dog = new Dog(); BabyDog babyDog = new BabyDog(); soundAnimal(dog); soundAnimal(babyDog); } private static void soundAnimal(Animal animal){ System.out.println("동물 소리 테스트 시작"); animal.sound(); System.out.println("동물 소리 테스트 종료"); } } 안녕하세요. 강의 중 추가적으로 궁금한게 생겨서 질문드립니다. 그림에 따르면 코드에 만약에 제가 BabyDog클래스를 만들어서 Dog를 extends 한 후 오버라이딩을 하지 않고 매서드를 생성하면 "낑낑"이 아닌 매서드 오버라이딩이 된 "멍멍"이 출력되어야 하는 거 아닌가요??

  • java
  • 객체지향
gump 댓글 1 좋아요 0 조회수 405

default_batch_fetch_size 쿼리문

해결됨

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. select oi1_0.order_id, oi1_0.order_item_id, oi1_0.count, oi1_0.item_id, oi1_0.order_price from order_item oi1_0 where oi1_0.order_id in (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) 강의 4-4 페이징과 한계돌파 들으면서 똑같이 yml에 배치사이즈 100으로 하고 하던중 확인해보니 in문에 강의처럼 order 데이터 2개 있으니 '?' 2개로 보여야하는데 배치사이즈 설정한 수만큼 '?' 가 100개 이고 ,p6spy 보면 나머지 98개가 null로 들어갑니다.. org.hibernate.orm.jdbc.bind: trace 하고 확인해봐도 여전한데 하이버네이트나 머 다른게 업데이트후 저렇게 쿼리문 나가는게 정상이에요? 아니면 다른 문제이면서 저렇게 쿼리문 나가는건 성능에 안 좋은 영향 있을까요?

  • java
  • spring
  • spring-boot
  • jpa
Hermesi Choi 댓글 1 좋아요 0 조회수 529

강의 순서 질문드립니다.

미해결

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

선생님 안녕하세요. 수강생입니다.수업은 섹션1부터 차근 차근 따라가면 될까요? 안배우고, 몰랐던 부분들이 등장해서 인강을 어디서부터 어떻게 들으면 될지 여쭈어 봅니다.(비전공자라 코딩 지식이 아예 없습니다.)

  • HTML/CSS
  • jquery
  • 웹-디자인
강은지 댓글 1 좋아요 1 조회수 262

display flex 질문,,

미해결

모바일 웹 퍼블리싱 포트폴리오 with Figma

안녕하세요 ! gnb부분 하다가 헷갈리는게 있어서요 .. gnb 부분엔 flex를 줘서 가로배치 1/5한 건 이해했는데, .gnb a 위아래 여백이 남았어서 그 여백을 없애려면 .gnb a에 display : flex를 주어야한다고 하셨는데 왜 flex를 주면 위아래 여백이 사라지고 딱 맞게 배치가 되는건지 이해가 잘 안가서요 ㅠ..! 말로 설명이 가능하실까 모르겠지만 일단 남겨봅니다!

  • HTML/CSS
  • jquery
  • 모바일-디자인
  • figma
  • 포트폴리오
예림 댓글 1 좋아요 1 조회수 219

다시 질문 드립니다 ㅠㅠ CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)

미해결

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

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } } 이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..

  • HTML/CSS
  • jquery
SH 댓글 1 좋아요 0 조회수 362

도형 로딩 애니메이션 질문입니다

미해결

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

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} 지금 이 상태인데 화면에 아무것도 나타나지 않습니다. 이렇게 뜨는데 뭐가 문제일까요?

  • HTML/CSS
SH 댓글 3 좋아요 1 조회수 256

도형 로딩 애니메이션 질문입니다

미해결

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

이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ

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

중급편 완강 후 스프링

해결됨

김영한의 실전 자바 - 기본편

방금 중급편 오픈 예정 글을 보고 왔습니다! 혹시 중급편에서 예외처리와 제네릭 컬렉션에 관해서 공부 후에 고급편 듣지 않고 바로 스프링으로 넘어가도 되나요?!

  • java
  • 객체지향
박병천 댓글 1 좋아요 0 조회수 398

연관관계 편의메서드 개인질문

미해결

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 있긴한데 좀 다릅니다 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 연관관계 편의메서드와 관련된 질문입니다. public void setMember(Member member) { this.member = member; member.getOrders().add(this); } public void addOrderItem(OrderItem orderItem) { orderItems.add(orderItem); orderItem.setOrder(this); } public void setDelivery(Delivery delivery) { this.delivery = delivery; delivery.setOrder(this); } 공부하던 도중 일대다, 다대일, 일대일 연관관계 매서드가 모두 다른 것을 발견했습니다. 제 궁금증은 다대일에서는 왜 meber.getOrders().add(this)로 세팅하고 일대일이나 다대일에서는 orderItem.setOrder(this)로 세팅하는지 궁금한 것 입니다. 커뮤니티에 관련 질문을 찾던 도중 jpa 기본편을 보시라고 하셨는데 위치를 못 찾겠습니다. 알려주시면 감사하겠습니다. 추가로 제가 자바의 List의 메소드에 대한 이해가 부족해서 모르는가 싶기도 한데 그게 맞을까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
이용준 댓글 3 좋아요 0 조회수 558

수업 소스 다운로드 어디서 받을수 있나요?

해결됨

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영상 수업 소스 다운로드는 어디서 받을수 있나요? 영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..

  • HTML/CSS
  • 인터랙티브-웹
  • 반응형-웹
동주 댓글 1 좋아요 1 조회수 431

현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다. 생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
최지혁 댓글 2 좋아요 2 조회수 323

세타 조인이 안되요

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요?예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의 내용과 그대로 세타조인을 따라 했는데 query나온 것을 보니 cross join이 없어요 그리고 left join도 처음 sql에서는 left join이 나오는데 번역된 sql에서는 left join이 생략되는데 jpa가 최적화를 한 것일까요?

  • java
  • jpa
서민우 댓글 1 좋아요 0 조회수 490

Domain model패턴에서 생성메서드 로직 구현시 setter문제 질문있습니다.

해결됨

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

이 부분이 생성메서드 부분인데요.. 대부분 setter를 사용하여 서비스계층에서 해야 할 로직을 엔터티 내에서 처리하고 있는데 영한 선생님께서 강조하시는 setter를 열어두지 않는다면(필요에 따라서는 열어두라고 하셧는데...) 어떤식으로 처리하는지 도저히 감이 잡히지 않네요..ㅜ 이 부분 설명해주시는 강의 챕터가 따로 있을까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 244

props에 대해 궁금한 점이 있습니다.

미해결

처음 만난 리액트(React)

우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂 다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); } 만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다. root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> ); 근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어 props.name props.age props.university props.profilePhoto props.grade etc... 이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다. function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); } 그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요? function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); } 또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }

  • HTML/CSS
  • javascript
  • react
David Heo 댓글 1 좋아요 1 조회수 405

인기 태그

인프런 TOP Writers

주간 인기글