inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

질문드립니다.

미해결

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

강사님의 과목별 강의영상은 거의 다 잘 보고 있습니다. 04.제이쿼리실전예제에서 22) 가로 슬라이더(이전 다음 버튼, Autoplay 제어 버튼) 위의 예제에서 좌우버튼만 있는데 하단 버튼을 할때는 어찌해야 할지 감이 잘 안잡혀서요. 슬라이드 이미지가 3~5컷이라면 개수만큼 하단에 작은원형버튼이 있고 버튼을 클릭하면 해당슬라이드 이미지가 슬라이드되게 하려고 합니다.

  • HTML/CSS
  • javascript
  • jquery
gangsugi 댓글 1 좋아요 0 조회수 220

인스타그램 실습

미해결

따라하며 배우는 HTML, CSS

강의를 듣고 인스타그램 실습을 진행하였습니다.하지만 위 사진처럼 사이드바가 컨텐트박스와 겹쳐보이는 문제가 발생하였고, 강의를 여러번 보면서 오류를 확인하고 있지만 길이가 길고 제 눈으로 확인이 안되어 질문드립니다... 위가 side.css일부, 아래가 main.css일부입니다 .side-menu{ max-width: 290px; position: fixed; left: 50%; top: 84px; transform: translateX(calc(-50%+322px)); display: none; flex-direction: column; } .main-container{ background-color: #ffffff; margin-top: 44px; margin-bottom: 44px; display: flex; } .content-container { width: 100%; max-width: 935px; padding: 0 0 8px; margin: 0 auto; display: flex; } .content { width: 100%; max-width: 614px; margin: 0 auto; display: flex; flex-direction: column; } <main class="main-contaniner"> <section class="content-container"> <div class="content"> <div class="stories"> <div class="stories_content"> <button class="story"> <div class="story_avatar"> <div class="story_border"> <svg width="64" height="64"> <circle r="31" cy="32" cx="32" /> </svg> </div> <div class="story_picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> <span class="story_user">user1</span> </button> </div> </div> <div class="posts"> <article class="post"> <div class="post_header"> <div class="post_profile"> <a href="#" class="post_avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <a href="#" class="post_user">user1</a> </div> <button class="post_more-options"> <img src="assets/icons/more.svg"> </button> </div> <div class="post_content"> <div class="post_medias"> <img src="assets/images/picture.jpeg" alt="post content" class="post_media"> </div> </div> <div class="post_footer"> <div class="post_buttons"> <button class="post_button"> <img src="assets/icons/heart.svg" alt="heart"> </button> <button class="post_button"> <img src="assets/icons/comment.svg" alt="comment"> </button> <button class="post_button post_button--align-right"> <img src="assets/icons/bookmark.svg" alt="bookmark"> </button> </div> <div class="post_infos"> <div class="post_likes"> <a href="#" class="post_likes-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <span>Liked by <a href="#" class="post_name--underline">user2</a>and <a href="#">33 others</a> </span> </div> <div class="post_description"> <span> <a href="#" class="post_name--underline"> user </a> description </span> </div> <span class="post_date-time">30 minutes ago</span> </div> </div> </article> </div> </div> <div class="side-menu"> <div class="side-menu_user-profile"> <a href="#" class="side-menu_user-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <div class="side-menu_user-info"> <a href="#">user1</a> <span>nickname</span> </div> <button class="side-menu_user-button"> Switch </button> </div> <div class="side-menu_suggestions-section"> <div class="side-menu_suggestions-header"> <h2>Suggestion for you</h2> <button>See All</button> </div> <div class="side-menu_suggestion-content"> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> </div> </div> <div class="side-menu_footer"> <div class="side-menu_footer-links"> <ul class="side-menu_footer-list"> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">About</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Help</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Press</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Phone</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">API</a> </li> </ul> </div> <span class="side-menu_footer-copyright">&copy; 2023 instargram from facebook</span> </div> </div> </section> </main>

  • HTML/CSS
요그리 댓글 1 좋아요 0 조회수 308

유튜브 실습

미해결

따라하며 배우는 HTML, CSS

안녕하세요. 선생님의 강의를 보고 유튜브 실습을 진행했는데 search bar의 위치가 중앙이 아닌 오른쪽 다른 아이콘에 붙어있습니다. 코드를 확인했을때 이상하다고 생각하는 부분이 없었습니다... 그리고 sidebar의 글자 크기는 영상과 달라도 괜찮나요? .header{ height: 55px; display: flex; flex-direction: row; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #212121ff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4d4d4d; } .left-section{ display: flex; align-items: center; } .hamburger-menu{ height: 24px; margin-left: 24px; margin-right: 24px; } .youtube-logo{ height: 70px; } .middle-section{ flex: 1; margin-left: 70px; margin-right: 35px; max-width: 500px; display: flex; align-items: center; flex-grow: 1; } .search-bar{ flex: 1; height: 36px; padding-left: 10px; font-size: 16px; border: 1px solid #4d4d4d; border-radius: 2px; background-color: #121212; width: 0; } .search-bar::placeholder{ font-size: 16px; } .search-button{ height: 40px; width: 66px; background-color: #323232; border: 1px solid #4d4d4d; margin-left: -1px; margin-right: 10px; } .search-icon{ height: 25px; } .voice-search-button{ height: 40px; width: 40px; border-radius: 20px; border: none; background-color: #121212; } .voice-search-icon{ height: 24px; } .search-button, .voice-search-button, .upload-icon-container{ display: flex; justify-content: center; align-items: center; position: relative; } .search-button .tooltip, .voice-search-button .tooltip, .upload-icon-container .tooltip{ position: absolute; background-color: white; bottom: -30px; padding: 4px 8px 4px 8px; border-radius: 2px; font-size: 12px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; } .search-button:hover .tooltip, .voice-search-button:hover .tooltip, .upload-icon-container:hover .tooltip{ opacity: 1; } .upload-icon{ height: 24px; } .youtube-apps-icon{ height: 24px; } .notifications-icon{ height: 24px; } .current-user-picture{ height: 32px; border-radius: 16px; } .right-section{ width: 180px; margin-right: 20px; display: flex; justify-content: space-between; align-items: center; } .notifications-icon-container{ position: relative; } .notifications-count{ position: absolute; top: -2px; right: -5px; background-color: rgb(200, 0, 0); color: white; font-size: 11px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; border-radius: 10px; } <header class="header"> <div class="left-section"> <img class="hamburger-menu" src="assets/icons/hamburger-menu.svg" > <img class="youtube-logo" src="assets/icons/youtube-logo.svg"> </div> <div class="middle-section"> <input class="search-bar" type="text" placeholder="Search" > <button class="search-button"> <img class="search-icon" src="assets/icons/search.svg" > <div class="tooltip">Search</div> </button> <button class="voice-search-button"> <img class="voice-search-icon" src="assets/icons/voice-search-icon.svg" > <div class="tooltip">Search with your voice</div> </button> <div class="right-section"> <div class="upload-icon-container"> <img class="upload-icon" src="assets/icons/upload.svg" > <div class="tooltip">Create</div> </div> <img class="youtube-apps-icon" src="assets/icons/youtube-apps.svg" > <div class="notifications-icon-container"> <img class="notifications-icon" src="assets/icons/notifications.svg"> <div class="notifications-count">1</div> </div> <img class="current-user-picture" src="assets/images/avatars/avatar-1.png" > </div> </div> </header>

  • HTML/CSS
요그리 댓글 1 좋아요 0 조회수 340

워프 설치 전 문의드립니다

해결됨

구글 애드센스 수익형 워드프레스 블로그 만들기

안녕하세요~ 카페 24로 호스팅했다가 제한이 많이 강의내용 따라가기가어려워 다시 패스트코멧으로 호스팅을했습니다. 도메인도 호스팅케이알에서 받아 진행을하고, 이제 30시간 넘어 지났는데요 아직도 도메인 접근하면 호스팅이 연결이 되지않은것 같아, 강의보기를 더 진행을 못하고있습니다. 혹시 도메인 연결되기전에 미리 워프를 설치하고 강의내용을 따라 설정을 해도 되나요? 아니면 다른 방법으로 진행하고, 나중에 다른 변경설정을 해야되는지 알고싶습니다. 설 연휴다보니.. 테마를 요청드리고 빨리 받아서 적용을 하고싶어서^^;; 문의드립니다. 감사합니다 : )

  • HTML/CSS
  • wordpress
  • php
  • 웹-디자인
  • 반응형-웹
triride 댓글 1 좋아요 0 조회수 378

@ManyToOne 매핑 질문입니다.

미해결

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

게시글과 댓글을 매핑 하려고 하는데 게시글에 어떤 댓글이 달렸는지 조회 하기 위해 게시글 -> 댓글 OneToMany 단방향 매핑을 하려고 했더니, @OneToMany는 지양하라고 해서 댓글에 @ManyToOne 매핑을 하려고 했는데요. 이러면 댓글->게시글 단방향이 되는 것 아닌가요? 게시글에 어떤 댓글이 있는지 확인을 하고 싶을 뿐인데 ManyToOne을 지양하는 이럴 땐 어떻게 해야하는지 궁금합니다 .. 매핑이 아니라 차라리 int communitySeq 를 멤버 변수로 갖도록 하고 jpql에서 join문을 통해 데이터를 가져오는 것이 맞을까요??

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

OpenJDK 64-bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended경고가 뜹니다.

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) A. 네 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) A. 아니요 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) A. 네 [질문 내용] 테스트 코드 실행을 하면 OpenJDK 64-bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended 이 경고가 계속 뜹니다. https://www.inflearn.com/questions/917150/openjdk-64-bit-server-vm-warning 찾아보면서 이 답변을 따라해도 로그가 뜨지 않고 경고가 뜨는데 어떻게 해야하나요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
jaemoon 댓글 4 좋아요 0 조회수 13553

접근 제어자 문제 풀이

해결됨

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 문제 풀이를 다음 날 새로 만들어서 풀어보니까 조금 다른 부분이 생겼는데 1. 본인 2. 강의 각 배열의 총 가격 값만 더하는 거라면 1번처럼 하는 게 좋아 보이는데 Item item = items[i];를 추가하신 이유와 어떤 차이점이 있는지 궁금해요

  • java
  • 객체지향
ᄒᄉ 댓글 1 좋아요 1 조회수 271

CSS 포지셔닝(clear) 관련 질문입니다.

미해결

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

float속성을 상속받아서 마지막 div는 제일 위로 올라가서 확인이 안된다고 하셨는데 질문1) 제일 위로 올라간 이유가있나요? 질문2) float속성을 상속받는다고 하셨는데 left , right둘다 상속받는건가요 아니면 마지막에 설정된 right만 상속받는건가요?

  • HTML/CSS
  • jquery
뭘봐 댓글 1 좋아요 1 조회수 272

인라인 요소 관련 질문입니다.

미해결

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

퍼블리싱의 모든것 인라인 요소 , 블록요소 , 인라인 블록 요소편에서 인라인 요소는 크기값을 갖을수 없다고 했는데 CSS로 HTML가로배치편에서 실습하실때 span태그에 width와 height값이 적용되는데 이유를 알수 있을까요?

  • HTML/CSS
  • jquery
뭘봐 댓글 3 좋아요 1 조회수 265

어떻게 MemberForm 클래스가 선택이 되는지 과정이 궁금합니다.

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 강의 잘 듣고 있습니다. 재밌게 강의를 듣던 중 궁금증이 생겨 이렇게 질문 드리게 되었습니다. 7분40초~7분50초 쯤 설명에 의하면 "우리가 웹에서 입력한 name값이 MemberForm의 name 필드로 전달이 된다"라는 식으로 말씀을 하셨는데, 어떻게 Member 클래스가 아닌 MemberForm 클래스의 name을 찾아가게 되는 건가요?? 제가 워낙에 초보라서 그런지, 코드 상에서 "Member의 name이 아닌 MemberForm의 name을 찾아가도록 하는" 코드도 발견을 못하겠습니다.. 또한 다른 분들의 말씀에 의해서 질문을 드리고 싶은데, MemberForm 클래스에서 setName() 메서드가 사용이 안되는 것 같은데, 7분55초~ 8분 쯤의 설명으로는 setName() 메서드를 사용하시는 것처럼 말씀하시더라구요. 이 역시도 제가 잘 몰라서 그러는데 실제로 setName() 메서드가 사용되는 건가요?? 자세한 설명 부탁드리겠습니다. 감사합니다:-)

  • java
  • spring
  • mvc
  • spring-boot
김수환 댓글 1 좋아요 1 조회수 398

미니 블로그를 만들며 생긴 궁금증입니다.

해결됨

처음 만난 리액트(React)

지금은 그냥 전부 따라 치고 마지막에 실행해서 결과를 확인하는 방식이지만 실제로 리액트로 개발을 할 때는 css쪽은 직접 화면을 보면서 해야될텐데 만든 컴포넌트가 생각대로 구현이 되어있는지 확인을 하려면 App.js 파일에 직접 컴포넌트를 넣어서 확인해야 하나요? 페이지 컴포넌트들 같은 경우 같은 css가 중복되는데 중복되는 코드를 하나로 관리하려면 어떻게 해야할까요?

  • HTML/CSS
  • react
Minami 댓글 1 좋아요 1 조회수 347

익스텐션 설치 질문이요

미해결

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

시험준비자는 익스텐션 auto rename tag html to css autocompletiom htmltagwrap bracket pair colorizer 2 indent-rainbow material theme html css support beautify color picker liveserver 전부 설치하면 안되나요? 그리고 color picker 없으면 색깔이 안뜨는데 그러면 색이름만 적나요?

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

도표 자료 (해결)

미해결

따라하며 배우는 HTML, CSS

강의를 하시면서 쓰시는 자료는 어디서 볼 수 있을까요?? 옆에 띄워놓고 같이 보면서 강의를 들을려고 하는데, 강의에서 쓰시는 도표자료는 없더라고요!!

  • HTML/CSS
RealTone 댓글 1 좋아요 0 조회수 345

시험장에서 단축키 설정

미해결

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

시험장에서 프로그램에 단축키설정 원하는키로 세팅 바꿔줘야 되나요?

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

scanner 두번째 문제(홀수짝수) 질문드립니다!

미해결

김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 홀수 짝수 구하는 문제에서 선생님께서 말씀하신 삼항연산자로 구하는 거 기억 더듬으며 해봤는데 값은 나오거든요.. 혹시 잘못되거나 이상한 점이 없는지 질문드립니다!!

  • java
  • 객체지향
kangmh1021 댓글 2 좋아요 0 조회수 336

제가 이해한 것이 맞느지 확인 부탁드립니당

미해결

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

이번에 만든 조회하는 api는 리스트로 반환해야 하기 때문ㅇ JSON이어야 하고 그렇기에 함수 반환 값이 List<UserResponse>인건가요? 그리고 등록 api에서 만든 users리스트 수만큼 for문 돌려서 진정한 결과 리스트(id도 포함되어있는) reponses를 만들어낸건가요..?

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

유효성검사 강사님처럼 쉽게 하는 방법

미해결

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

강사님 안녕하세요! 유튜브에서 보고 인프런까지 따라와서 강의 잘 듣고 있습니다! 실전사이트A 영상1시간19분쯤에서 유효성검사 엄청 편하게 하시던데 어떤 툴을 사용하면 되나요?

  • HTML/CSS
  • javascript
  • jquery
  • 웹-디자인
훈훈한 비버 댓글 1 좋아요 0 조회수 226

파라미터로 받은 form을 어떻게 엔터티로 반환하는지 모르겠어요...

해결됨

실전! 스프링 데이터 JPA

현재 실전 데이터 JPA수강 중인데요.. 독학 중이라 토이프로젝트로 연습하는데 오늘까지 배운 JpaRepository 상속과 관련하여 회원가입 기능 구현하려 하려는데 어디 물어볼곳이 없고 뒤죽박죽이라 정리가 필요해서 장문의 질문을 남깁니다.. 일단 제가 머릿속에 정리가 안되는 것은 영한선생님께서 최대한 컨트롤러에 엔터티를 노출하지 말고 비지니스 로직을 서비스에서 최대한 구현하라고 해서 따라하는 중인데 Member를 기준으로 파라미터를 받을 MemberForm을 생성했습니다. 여기서 질문이.. MemberForm을 생성했으면 MemberDto는 따로 생성 안해도 될까요? 컨트롤러를 그림과 같이 작성하였고 서비스는 아래와같이 하였는데... 뭔가 서비스에서 엔터티를 직접 만지니까 찝찝한데 실무에서도 이렇게 하는지 궁금합니다..

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

왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

/src/.env 파일에 VITE_SOME_KEY = 123 이렇게 설정하고, App.jsx에 function App() { return( <> {import.meta.env.VITE_SOME_KEY} <Counter/> </> ) } export default App; 이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
ㄹ류 댓글 2 좋아요 1 조회수 733

인기 태그

인프런 TOP Writers

주간 인기글