inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

질문입니다.

해결됨

만들면서 배우는 HTML/CSS

일단 브라우저 화면이 크기가 작은 상태에서 새로고침 하면 브라우저 화면크기에 맞게 사진이 꽉차는 거는 됩니다. 하지만 여기서 브라우저의 화면을 확대 하면 사진의 세로 사이즈가 확대된 브라우저의 화면 크기만큼 꽉 채우지 않아서 흰 부분(?)이 보이는 경향이 있는데 어떻게 해결하나요? 영상에 있는 부모 태그(.bx-wrapper, .bx-viewport)에 width: 100%, height: 100%을 적용했는데 안되네요...

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

질문있습니다

해결됨

만들면서 배우는 HTML/CSS

마지막 수업 13분 쯤 line-height를 li에 주셔도 적용이 되는데 저는 선생님처럼 li에 주면 적용이 안되고 i 태그에 line-height를 주어야만 적용이 되는데 왜 선생님이랑 다르게 되는 걸까요?ㅠㅠ

  • HTML/CSS
v_hzz 댓글 1 좋아요 0 조회수 385

main이 적용이 안됩니다ㅜ

미해결

1. 웹개발 기초 [HTML, CSS]

header,footer, nav 다 색깔적용이 잘되는데 main만 적용이 안되는건 왜 일까요ㅠ

  • HTML/CSS
hotbichnali 댓글 2 좋아요 0 조회수 327

radio에 관해 질문드립니다.

해결됨

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

강의대로 input 태그 중 radio를 이용해 성별을 선택할 수 있도록 했을때 중복선택이 가능하고 한번 누르면 취소가 안됩니다. 중복을 허용하지 않도록 하는 방법이 있을까요?

  • HTML/CSS
  • javascript
9nu 댓글 2 좋아요 1 조회수 278

안녕하세요 질문있습니다 ㅠㅠ

미해결

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

이번강의 보고 따라해봤는데 display: inline-block; 을 .item에 넣어도 옆으로 붙지를 않아서 한줄로 나오지를 않더라구요 뭘 잘못한건지 모르겠어서요 ㅠㅠ 뭐가 잘못된걸까요..?? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>오버하면 상세설명 나타나는 상품목록</title> <style> .items { text-align: center; } .item { display: inline-block; width: 300px; height: 300px; border: 1px solid #ddd; position: relative; margin: 10px; } .caption { width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; color: #fff; padding: 20px; box-sizing: border-box; padding-top: 40px; opacity: 0; transition: 0.5s; } .caption a { color: #fff; background-color: teal; padding: 7px; border-radius: 3px; text-decoration: none; } .caption a:hover { background-color: #fff; color: #000; } .item:hover .caption { opacity: 1; } </style> </head> <body> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> </body> </html>

  • jquery
  • HTML/CSS
dbtjsal10 댓글 2 좋아요 1 조회수 327

블로킹

해결됨

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

이미지 경로의 문제가 있는건가요???

  • 클론코딩
  • 웹 디자인
  • javascript
  • 인터랙티브-웹
  • svg
  • HTML/CSS
박용진 댓글 8 좋아요 0 조회수 683

오류

해결됨

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

검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? case 3: // 가로, 세로 모두 100%로 채우기 위한 세팅(계산 필요) const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { // 브라우저 width < 캔버스 width인 경우 canvasScaleRatio = heightRatio; } else { // 브라우저 height < 캔버스 height 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.drawImage(objs.images[0], 0, 0); // 캔버스 사이즈에 맞춰 가정한 innerWdth와 innerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY) { // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; // 좌우 화이트박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); break;

  • 인터랙티브-웹
  • HTML/CSS
  • svg
  • javascript
  • 웹 디자인
  • 클론코딩
박용진 댓글 5 좋아요 0 조회수 468

gap, padding-bottom

미해결

CSS Flex와 Grid 제대로 익히기

1. gap에서는 어떤 기준으로 %가 동작하나요? 2. padding-bottom의 %값 기준은 figure태그의 부모인 li의 width 기준으로 잡히는게 맞을까요?

  • HTML/CSS
  • flex
dongwoo kim 댓글 5 좋아요 0 조회수 532

현업관련 질문

미해결

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

현업에서 자바스크립트를 지양할 경우에는 어떤 스크립트들로 대체해서 사용할 수 있나요?

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

방송을 5번 이상을 보면서 했는데도 안돼요....

해결됨

만들면서 배우는 HTML/CSS

10:15초부터 저는 $만 확인이 안된다는 debug가 뜨고 jquery에 관한건 뜨지를 않아요.....처음에는 방송한번 보고 머리로 했는데 하도 안되서 그냥 방송 전체를 다 따라서 코드를 쳤는데도....10:15초에서 저는 debug가 하나만 떠요. 그래서 그냥 진행을 했어요 jquery입력하고서요. 그런데 아무 변화없이 그냥 똑같은 debug만 뜨네요...

  • HTML/CSS
김재인 (JAE IN KIM) 댓글 1 좋아요 2 조회수 276

초보자여서요..왜 reset sheet 이 필요한것이며 그게 무엇인지를 모르겠어요.

해결됨

만들면서 배우는 HTML/CSS

초보자이다보니. 궁금증이 생겼어요. reset.css가 무엇이며 이건 왜 필요한것이며 등등이요...그럼 매번 이런걸 만들때 항상 찾아서 저렇게 카피해서 쓰는건가요? 아니면 자기가 직접하는건가요? 솔직히 입문 초보 html css를 끝내고 좀 알겠다라고 생각하는데 이런 소스를 쓰는걸 보고서는 다시 맨붕이 왔어요..... 아 그리고 jquery도 필요할때 저렇게 따와야하는지도요. 감사합니다

  • HTML/CSS
김재인 (JAE IN KIM) 댓글 1 좋아요 0 조회수 279

제 질문 지나서 답변하셔서 다시 질문드립니다.

미해결

인스타그램 클론 - full stack 웹 개발

마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.

  • 클론코딩
  • python
  • HTML/CSS
  • django
댓글 1 좋아요 1 조회수 204

직접 따라하기 전에 완성된 페이지 구동시켜보고 싶습니다.

미해결

페이스북 클론 - full stack 웹 개발

마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.

  • django
  • python
  • linux
  • javascript
  • HTML/CSS
  • 클론코딩
댓글 1 좋아요 3 조회수 214

bxslider적용이 안되는것 같습니다.

해결됨

만들면서 배우는 HTML/CSS

안녕하세요. 강의를 보면서 코딩을 했는데 슬라이더 적용이 안되는것 같아서 이미지 캡쳐해서 질문 올려드립니다. 왜 그런걸까요. ㅠㅠ 저도 슬라이더 적용하고 싶어요 도와주세요~

  • HTML/CSS
이미연 댓글 1 좋아요 0 조회수 1190

개발 도중 먼저 완성된걸 제 컴퓨터로 돌려보고 싶은데 그러기 위해 필요한 최소 세팅 궁금합니다.

미해결

인스타그램 클론 - full stack 웹 개발

1. 인스타그램 클론 작동시키기 1) backend 마지막 강의까지 완료된 코드 frontend: backend에서 static: 프론트앤드 파트 예제파일 업로드 다운로드 받았습니다. backend: 마지막까지 완성된 수정 코드 어디서 받을 수 있는지 알고 싶습니다. 2) backend 마지막 강의까지 완료된 코드로 배포해서 구현하기 제로베이스 기준에서 어떤어떤 강의를 듣고 환경을 설정해야 마지막 배포까지 할 수 있는지 알려주시면 직접 배포해서 환경에서 돌아가는 것 까지 스스로 해보고 싶습니다. 2. 제주도 카페 클론 작동시키기 기초 :: Django 에서 기초 전체 소스코드 다운 받았습니다. 마찬가지로 어떤어떤 강의를 보고 최소한의 세팅을 해야 배포까지 해서 작동하는지 알고 싶습니다. 30분 요약시리즈부터 맨앞부터 하는데 frontend가 끝나니까 벌써 조금 지쳐서 힘들어서 보고 싶어지네요.. 감사합니다~~

  • 클론코딩
  • django
  • HTML/CSS
  • python
댓글 1 좋아요 1 조회수 176

position:absoulte

해결됨

만들면서 배우는 HTML/CSS

position:absoulte을 해주면 body를 기준으로 잡아서 맨위에 가야하는거 아닌가여..? 왜 사라져 버리져? 인식을 왜 못하나여

  • HTML/CSS
순간을 그리다 댓글 4 좋아요 0 조회수 368

만든페이지를 다른곳에서도 보고싶어요..ㅜㅜ

해결됨

만들면서 배우는 HTML/CSS

강의를 오늘 알게되어서 5시간정도에 걸쳐서 완강하고 예쁘게 만들기도 했습니다.!! 그런데 제가 만든걸 남들한테도 보여주고 싶은데 그건 아예불가능한가요? 깃허브에는 폴더단위로 안올라가던데,, 파일하나하나 올려서 하는 수 밖에 없나요?

  • HTML/CSS
yusun Park 댓글 1 좋아요 0 조회수 374

prew와 next 제거후 배경이미지가 화면에 맞지않습니다

미해결

만들면서 배우는 HTML/CSS

코드는 강의에 나와있는대로 적었습니다. 마지막에 prew와next를 제거 했는데 배경화면이 꽉차지 않아요. 왜 이렇게 됬는지 알려주실수있나요?

  • HTML/CSS
qkrrkdus1098 댓글 1 좋아요 0 조회수 315

인기 태그

인프런 TOP Writers

주간 인기글