inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

반응형 실습

해결됨

[코드캠프] 강력한 CSS

강사님 안녕하세요~ 강의 잘 들었습니다. 다름이 아니라 반응형 실습진행을 flex로 진행하셨는데 grid로 되어있는 css 도 있다고 하신 것 같은데 어디서 받아 볼 수 있을까요?

  • HTML/CSS
이형종 댓글 2 좋아요 0 조회수 307

선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요 ..

미해결

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

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; border: 1px solid #000; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } 선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요. 가로세로는 이해가되는데 페이드인아웃 효과가 젤어렵긴하네요 .. 일단 해봤는데 약간 버벅거리는느낌이있는거같아 첨부해보아요,,

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

등록 시 질문

미해결

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

등록 id가 1번과 2번이 있었다가 2번을 삭제하고 다시 등록을 하면 id가 3번으로 등록이 됩니다. 제가 잘못한 걸까요..?? 아니면 혹시 원래 이렇게 돌아가도록 설정하신건가요??

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
qwe_e0606 댓글 2 좋아요 1 조회수 268

이게 왜 안될까요? 변수가 안먹어요

미해결

처음 만난 리액트(React)

import React from "react"; function Book(props) { return ( <div> <h1>{'이 책의 이름은 ${props.name}입니다'}</h1> <h2>{'이 책은 총 ${props.numOfPage} 페이지로 이뤄져 있습니다.'}</h2> </div> ); } export default Book;

  • HTML/CSS
  • javascript
  • react
phb1533 댓글 1 좋아요 0 조회수 341

소스코드 공유는 없을까요?

해결됨

떠먹는 Three.js

강의 대부분이 내용 skip이 되며, 이번 강의에서는 css파일 등이 공개가 되어 있지 않아 똑같이 따라하기가 너무나 힘듭니다. ㅠㅠ 기술을 배워 응요하는 것도 좋지만, 처음 학습시에는 시청한 강의와 똑같은 내용으로 만들어보고자 합니다. 해당 소스코드 (모델들, 세팅 index.js 소스코드, reset css)가 어딘가 공유가 되어있는지, 또는 공유가 가능한지 알고 싶습니다. 강의 내용 중 사용된 material 등도 제공 가능하신지 알고 싶습니다.

  • HTML/CSS
  • javascript
  • three.js
댓글 1 좋아요 1 조회수 493

공지사항, 갤러리 탭 <section><article class></article></section>, <div class> 중 어떤 것 이용?

미해결

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

A1 작업시 공지사항, 갤러리 탭 만들때 <section><article class></article></section>, <div class> 중 어떤 태그 이용해서 제작합니까? 강의 중 <section><article></article></section> 태그로 제작하는 것도 있고 <div class> 태그로 제작하는 것도 있는데 각각 어떤 경우에 사용합니까?

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

시험장에서 유효성검사는 어떻케하는지요 ,,?? 인터넷이안되는걸로알고있는데 어떻케하는지궁금해서요 ,

미해결

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

유효성검사를 하게되어 오류가난다면 실격이되는건가요 ?? 인터넷이안되는데 시험때 다만들고 유효성검사는 어떻케 하는건가요 ??

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

실습 강의 미니프로젝트 const {} = props ;

미해결

처음 만난 리액트(React)

function MainPage(props) { const {} = props ; props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?

  • HTML/CSS
  • javascript
  • react
문연희 댓글 1 좋아요 1 조회수 456

코드가 이상해요 ㅠ

해결됨

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

영상 보면서 그대로 했는데 9번째 줄부터 이상하게 배열이 됩니다. 그리고 12, 13번째 줄에 따옴표가 생겨요. 인증번호 전송을 눌러도 숫자가 일 바뀝니다. 어떻게 해야 하나요?

  • HTML/CSS
  • javascript
kbtusno12 댓글 1 좋아요 1 조회수 292

안녕하세요 이렇게 나오는데..

해결됨

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

오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
웹개바르르 댓글 1 좋아요 1 조회수 441

네비게이션 이 사진처럼 덜올라왓는데 커뮤니티쪽에만저런데 뭐가문제일까요 ㅠㅠㅠ

미해결

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

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b실전</title> <link rel="stylesheet" href="css/b.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="headerlogo"></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> <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> <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 class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다. <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다. <b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery03.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-1.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a{ color: #222328; text-decoration: none; } .container{} .header-inner{ border: 1px solid blue; } header{ display: flex; width: 1200px; margin: auto; justify-content: space-between; position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{ width: 200px; line-height: 130px; } .navi{ width: 600px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ height: 300px; } .items{ display: flex; width: 1200px; margin: auto; margin-top: 20px; box-sizing: border-box; } .items > div{ height: 200px; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ border: 1px solid blue; } footer{ display: flex; width: 1200px; margin: auto; } footer > div{ height: 100px; border: 1px solid #000; } .copyright{ width: 1000px; } .copyright div{ height: 50px; border: 1px solid #000; } .family-site{ width: 200px; } /*slide*/ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide >div{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{ left: 0; } 30%{ left: 0; } 35%{ left: -1200px; } 65%{ left: -1200px; } 70%{ left: -2400px; } 95%{ left: -2400px; } 100%{ left: 0; } } /*new & gallery*/ .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .btn{} .btn span{ display: inline-block; width: 120px; border: 1px solid #000; text-align: center; padding: 5px; border-radius: 7px 7px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1,.tab2{ border: 1px solid #000; padding: 0 4px; height: 155px; } .tab1 a{ display: block; border-bottom: 1px solid #000; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ text-align: center; } .tab2 img{ width: 120px; padding-top: 18px; } .banner img{ width: 95%; } /*navigation*/ .menu{ list-style: none; padding: 0; padding-top: 53px; } .menu li{ display: block; width: 25%; float: left; box-sizing: border-box; } .menu li > a{ border: 1px solid #000; display: block; text-align: center; padding: 5px; transition: 1; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; text-align: center; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ position: absolute; left: 0; top: 100%; width: 1200px; height: 140px; background-color: #000; z-index: -1; }

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

padding 대신 gap을 쓰는게 더 편하지 않나요?

미해결

CSS Flex와 Grid 제대로 익히기

안녕하세요! 강의 재밌게 수강하고 있습니다 :) 해당 카드 리스트를 만들 때는 padding보다 gap을 쓰면 더 간단하게 만들 수 있지 않나요?? 왜 padding을 쓰신 건지 궁금합니다!

  • HTML/CSS
  • flex
댓글 1 좋아요 2 조회수 633

진짜 객체지향과 테스트하기 쉬운 코드를 위헤서는 jpa가 의미없는게 아닌가하는 생각이 들어요

미해결

Java/Spring 주니어 개발자를 위한 오답노트

이전에 혼자 ddd, 헥사고날 아키텍처를 공부하면서 느꼈던게 객체지향적인 코드 + 테스트하기 용이한 코드를 작성하기 위해서는 결국 domain layer와 persistence layer의 분리가 필수적인데 jpa entity와 domain entity를 완전히 분리했을 때 JPA가 mybatis나 jdbc template를 사용하는 것과 비교해 가지는 강점이 있는지 잘 모르겠습니다.. 그나마 jpa entity와 domain entity를 분리하지 않는다면 어떻게든 온몸 비틀기로 그나마 테스트하기 용이하고 객체지향스러운 코드를 작성해볼 수는 있지만 결국 복잡한 로직에서는 쿼리 때문에 문제가 생기고 ㅜ 지식 공유자님께서는 이 문제에 대해 어떻게 생각하시나요?

  • java
  • spring
  • 객체지향
  • 소프트웨어-테스트
euni 댓글 2 좋아요 2 조회수 1879

짤려서 나오는 이유를 모르겠어요

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

JS 코드 $(function(){ $(".con03 .list").simplyScroll({ speed : 4, pauseOnHover : false, pauseOnTouch : false }) }) CSS 코드 그리고 그림이 글자 위로 보여요 .simply-scroll .simply-scroll-clip { overflow: hidden; transform: rotate(5deg) translate(50%, 400px) scale(1.1); opacity: 0; } .simply-scroll .simply-scroll-clip .simply-scroll-list li { float: left; width: 400px; filter: brightness(50%); } .simply-scroll .simply-scroll-clip .simply-scroll-list li img { width: 100%; } .con03.motion .simply-scroll .simply-scroll-clip { transform: rotate(5deg) translate(0%, 400px) scale(1.1); opacity: 1; transition: 1.2s; transition-delay: 0.3s; }

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
초보개발자 댓글 1 좋아요 0 조회수 437

동시성제어

미해결

실습으로 배우는 선착순 이벤트 시스템

안녕하세요 강의를 듣다가 궁금증이 생겼는데요. kafka는 메시지를 하나씩 처리하기 때문에 동시성 제어도 가능할 것이라고 이해했는데 그렇다면 여기서 레디스를 사용하지 않더라도 카프카만 사용해도 동시성과 관련된 데이터 정합성을 보장할 수 있는건가요?

  • java
  • docker
  • spring-boot
  • kafka
  • redis
봄봄봄 댓글 2 좋아요 0 조회수 922

c. Collection,Map 질문

해결됨

Java/Spring 주니어 개발자를 위한 오답노트

Collection.Map의 Good 케이스를 알 수 있을까요? 맵을 사용할 때 맵 안에 맵이 있고 이런 형태를 사용하지 않는게 좋은건지 아니면 따로 dto로 변환해서 사용해야하는건지 구분이 안 가서 질문 드립니다 ! 지정된 scope를 넘나들지 않는다는 것도 이해가 가지 않습니다 ㅠㅠ 조금만 더 쉽게 설명 붙여주시면 감사드리겠습니다!

  • java
  • spring
  • 객체지향
  • 소프트웨어-테스트
HOYA 댓글 2 좋아요 1 조회수 552

img와 video태그를 붙일 때

해결됨

HTML5 & CSS3 기초 문법 올인원

안녕하세요. 이미지와 비디오 src를 깨짐없이 붙이고 싶은데, 링크 주소를 복사하거나 폴더에 저장할 때 링크 주소를 그대로 붙여야 하나요? 제가 지금까지 끝에 jpg나 jpeg를 붙인채로 살짝 수정했는데도 확인하면 깨져있습니다. 무슨 문제일까요?

  • HTML/CSS
  • 이미지
  • 비디오
Jung Ho Park 댓글 2 좋아요 0 조회수 675

select 쿼리없이 dto 만들지 않은 이유

미해결

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

강의에서는 아래와 같이 select 쿼리를 이용해 업데이트 된 회원을 조회후 response로 전달해 주었는데 @PutMapping("/api/v2/members/{id}") public UpdateMemberResponse updateMemberV2(@PathVariable("id") Long id, @RequestBody @Valid UpdateMemberRequest request) { memberService.update(id,request.getName()); Member findMember = memberService.findOne(id); return new UpdateMemberResponse(findMember.getId(), findMember.getName()); } 아래와 같이 하지 않은 이유가 있을까요?? @PutMapping("/api/v2/members/{id}") public UpdateMemberResponse updateMemberV2(@PathVariable("id") Long id, @RequestBody @Valid UpdateMemberRequest request) { memberService.update(id, request.getName()); return new UpdateMemberResponse(id, request.getName()); }

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

제이쿼리 작성 후 메뉴가 내려 오지 않습니다.

미해결

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

A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서 style.css에 .sub-menu{display: none; 후 custom.js에 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) 하였는데 메뉴가 내려오지 않습니다. index.html style.css custom.js 파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?

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

인기 태그

인프런 TOP Writers

주간 인기글