묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
질문드립니다.
선생님, 안녕하세요. 다름이 아니라 브라켓의 emmet 기능을 설치했는데도 강의에서 선생님처럼 css 속성 앞글자만 쳐도 속성 목록이 쭉 나와야 되는데 저는 css 속성 앞 글자만 작성해도 속성 목록이 전혀 나오지 않습니다. emmet 기능 말고도 다른 확장 기능을 설치해야 되나요? 질문드립니다.
-
미해결반응형 웹사이트 포트폴리오(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 모양으로 남아 있더라구요. 참고하시라고 넣었습니다.
-
해결됨애플 웹사이트 인터랙션 클론!
클린코드(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; }
-
해결됨인터랙티브 웹 개발 제대로 시작하기
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을 곱해주시는걸 보고 든 생각인데 이게 맞는건지 궁금해요
-
미해결기본을 확실히!! HTML의 모든 것
개발도구
vs code랑 비교하면 어떤게 더좋나요?
-
해결됨프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
설문조사 실습에서
설문조사 실습에서 for (var j = 0; j < list[i].options.length; j++) // 이 부분에서 에러가 나타납니다.Uncaught TypeError: Cannot read property 'length' of undefined at survey.html:23뭐가 문제일까요...?
-
해결됨만들면서 배우는 HTML/CSS
질문입니다.
일단 브라우저 화면이 크기가 작은 상태에서 새로고침 하면 브라우저 화면크기에 맞게 사진이 꽉차는 거는 됩니다. 하지만 여기서 브라우저의 화면을 확대 하면 사진의 세로 사이즈가 확대된 브라우저의 화면 크기만큼 꽉 채우지 않아서 흰 부분(?)이 보이는 경향이 있는데 어떻게 해결하나요? 영상에 있는 부모 태그(.bx-wrapper, .bx-viewport)에 width: 100%, height: 100%을 적용했는데 안되네요...
-
해결됨만들면서 배우는 HTML/CSS
질문있습니다
마지막 수업 13분 쯤 line-height를 li에 주셔도 적용이 되는데 저는 선생님처럼 li에 주면 적용이 안되고 i 태그에 line-height를 주어야만 적용이 되는데 왜 선생님이랑 다르게 되는 걸까요?ㅠㅠ
-
미해결1. 웹개발 기초 [HTML, CSS]
main이 적용이 안됩니다ㅜ
header,footer, nav 다 색깔적용이 잘되는데 main만 적용이 안되는건 왜 일까요ㅠ
-
해결됨프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
radio에 관해 질문드립니다.
강의대로 input 태그 중 radio를 이용해 성별을 선택할 수 있도록 했을때 중복선택이 가능하고 한번 누르면 취소가 안됩니다. 중복을 허용하지 않도록 하는 방법이 있을까요?
-
미해결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>
-
해결됨애플 웹사이트 인터랙션 클론!
블로킹
이미지 경로의 문제가 있는건가요???
-
해결됨만들면서 배우는 HTML/CSS
압축파일을 어디서 다운 받으라는건가요?
압축파일을 어디서 다운 받으라는건가요?
-
해결됨애플 웹사이트 인터랙션 클론!
오류
검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? 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;
-
미해결CSS Flex와 Grid 제대로 익히기
gap, padding-bottom
1. gap에서는 어떤 기준으로 %가 동작하나요? 2. padding-bottom의 %값 기준은 figure태그의 부모인 li의 width 기준으로 잡히는게 맞을까요?
-
미해결실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)
현업관련 질문
현업에서 자바스크립트를 지양할 경우에는 어떤 스크립트들로 대체해서 사용할 수 있나요?
-
해결됨만들면서 배우는 HTML/CSS
방송을 5번 이상을 보면서 했는데도 안돼요....
10:15초부터 저는 $만 확인이 안된다는 debug가 뜨고 jquery에 관한건 뜨지를 않아요.....처음에는 방송한번 보고 머리로 했는데 하도 안되서 그냥 방송 전체를 다 따라서 코드를 쳤는데도....10:15초에서 저는 debug가 하나만 떠요. 그래서 그냥 진행을 했어요 jquery입력하고서요. 그런데 아무 변화없이 그냥 똑같은 debug만 뜨네요...
-
해결됨만들면서 배우는 HTML/CSS
초보자여서요..왜 reset sheet 이 필요한것이며 그게 무엇인지를 모르겠어요.
초보자이다보니. 궁금증이 생겼어요. reset.css가 무엇이며 이건 왜 필요한것이며 등등이요...그럼 매번 이런걸 만들때 항상 찾아서 저렇게 카피해서 쓰는건가요? 아니면 자기가 직접하는건가요? 솔직히 입문 초보 html css를 끝내고 좀 알겠다라고 생각하는데 이런 소스를 쓰는걸 보고서는 다시 맨붕이 왔어요..... 아 그리고 jquery도 필요할때 저렇게 따와야하는지도요. 감사합니다
-
해결됨만들면서 배우는 HTML/CSS
현재 그럼 회사들이 일반적으로 많이 쓰는 editor프로그램은 뭔가요?
선생님이 말씀하신것처럼 하나의 editor프로그램을 잘하면 된다고 하셨는데. 그럼 어느 회사를 가건 제가 쓰는 에디터를 그냥 쓰면 되는건가요?? 알려주세요~
-
미해결인스타그램 클론 - full stack 웹 개발
제 질문 지나서 답변하셔서 다시 질문드립니다.
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
