inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

facebook 컬러를 어떻게 가져오나요?

미해결

2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax

facebook 컬러를 어떻게 가져오나요?

  • HTML/CSS
  • python
  • javascript
댓글 1 좋아요 1 조회수 278

switch(currentScene) case2번 질문드려요!

해결됨

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

쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유

  • svg
  • HTML/CSS
  • 웹 디자인
  • 인터랙티브-웹
  • javascript
  • 클론코딩
재훈 댓글 1 좋아요 0 조회수 202

질문드립니다.

미해결

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

선생님, 안녕하세요. 다름이 아니라 브라켓의 emmet 기능을 설치했는데도 강의에서 선생님처럼 css 속성 앞글자만 쳐도 속성 목록이 쭉 나와야 되는데 저는 css 속성 앞 글자만 작성해도 속성 목록이 전혀 나오지 않습니다. emmet 기능 말고도 다른 확장 기능을 설치해야 되나요? 질문드립니다.

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

오지랖입니다만,

미해결

반응형 웹사이트 포트폴리오(Architecture Agency)

$ ( function (){ /* TRIGGER */ $ ( '.trigger' ). click ( function (){ $ ( this ). toggleClass ( 'active' ) $ ( '.gnb' ). toggleClass ( 'active' ) }) $ ( 'section' ). click ( function (){ $ ( '.gnb' ). removeClass ( 'active' ) $ ( '.trigger' ). removeClass ( 'active' ) }) }) 조금 더 정확하게 해주기 위해, 마지막에, $ ( '.trigger' ). removeClass ( 'active' ) 이거 한줄 더 넣어주면, 트리거 모양이 돌아옵니다. 저거 빠트리면, gnb가 들어가도 트리거가 X 모양으로 남아 있더라구요. 참고하시라고 넣었습니다.

  • 반응형-웹
  • jquery
  • HTML/CSS
  • 웹 디자인
Youngjae Choi 댓글 2 좋아요 3 조회수 327

클린코드(8:02부분)

해결됨

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

강의 8:02에 .local-nav-links .product-name을 하여 .local-nav-links a보다 우선순위를 올려 주셨는데 앞서 작성하신 .local-nav-links a:not(.product-name)에 fontr-size를 정해주고 .porduct-name에 굵기, 크기를 조절해준다면 더 클린한 코드 아닌가요? 사실 크게 상관 없을거 같은데 궁금해서 질의 합니다. 8:02부분과 이 코드를 비교하시면 제질문이 이해되기 쉬울거 같습니다. .product-name { margin-right: auto; font-size: 1.2rem; font-weight: bold; } .local-nav-links a:not(.product-name) { margin-left: 2em; font-size: 0.8rem; }

  • HTML/CSS
  • 웹 디자인
  • 인터랙티브-웹
  • svg
  • javascript
  • 클론코딩
이정석 댓글 2 좋아요 3 조회수 257

zMove에 1000이나 950곱하는것

해결됨

인터랙티브 웹 개발 제대로 시작하기

안녕하세요 선생님 궁금한게 생겨서 질문드려요! const zMove = pageYOffset / maxScrollValue * 1000 - 490 ; houseElem.style.transform = 'translateZ(' + zMove + 'vw)' ; 여기에서 zMove에 1000을 곱할때 pageYOffset / maxScrollValue 가 너무 작아서라고 이해했는데 다시듣다보니 의문이 생겨서요 .wall-left, .wall-right의 width가 1000vw인것과 관련있는건가요? 스크롤이 끝까지 가지않게 950을 곱해주시는걸 보고 든 생각인데 이게 맞는건지 궁금해요

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

개발도구

미해결

기본을 확실히!! HTML의 모든 것

vs code랑 비교하면 어떤게 더좋나요?

  • HTML/CSS
최진우 댓글 2 좋아요 2 조회수 405

설문조사 실습에서

해결됨

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

설문조사 실습에서 for ( var j = 0 ; j < list [ i ]. options . length ; j ++) // 이 부분에서 에러가 나타납니다. Uncaught TypeError: Cannot read property 'length' of undefined at survey.html:23 뭐가 문제일까요...?

  • javascript
  • HTML/CSS
임찬 댓글 1 좋아요 0 조회수 391

질문입니다.

해결됨

만들면서 배우는 HTML/CSS

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

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

질문있습니다

해결됨

만들면서 배우는 HTML/CSS

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

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

main이 적용이 안됩니다ㅜ

미해결

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

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

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

radio에 관해 질문드립니다.

해결됨

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

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

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

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

미해결

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 조회수 317

블로킹

해결됨

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

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

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

오류

해결됨

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

검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? 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 조회수 430

gap, padding-bottom

미해결

CSS Flex와 Grid 제대로 익히기

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

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

현업관련 질문

미해결

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

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

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

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

해결됨

만들면서 배우는 HTML/CSS

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

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

인기 태그

인프런 TOP Writers

주간 인기글