묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결만들면서 배우는 HTML/CSS
질문입니다.
일단 브라우저 화면이 크기가 작은 상태에서 새로고침 하면 브라우저 화면크기에 맞게 사진이 꽉차는 거는 됩니다. 하지만 여기서 브라우저의 화면을 확대 하면 사진의 세로 사이즈가 확대된 브라우저의 화면 크기만큼 꽉 채우지 않아서 흰 부분(?)이 보이는 경향이 있는데 어떻게 해결하나요? 영상에 있는 부모 태그(.bx-wrapper, .bx-viewport)에 width: 100%, height: 100%을 적용했는데 안되네요...
-
미해결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>
-
해결됨애플 웹사이트 인터랙션 클론!
블로킹
이미지 경로의 문제가 있는건가요???
-
해결됨애플 웹사이트 인터랙션 클론!
오류
검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? 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! (와이스튜디오_반응형웹)
현업관련 질문
현업에서 자바스크립트를 지양할 경우에는 어떤 스크립트들로 대체해서 사용할 수 있나요?
-
미해결인스타그램 클론 - full stack 웹 개발
제 질문 지나서 답변하셔서 다시 질문드립니다.
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
-
미해결페이스북 클론 - full stack 웹 개발
직접 따라하기 전에 완성된 페이지 구동시켜보고 싶습니다.
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
-
미해결인스타그램 클론 - full stack 웹 개발
개발 도중 먼저 완성된걸 제 컴퓨터로 돌려보고 싶은데 그러기 위해 필요한 최소 세팅 궁금합니다.
1. 인스타그램 클론 작동시키기 1) backend 마지막 강의까지 완료된 코드 frontend: backend에서 static: 프론트앤드 파트 예제파일 업로드 다운로드 받았습니다. backend: 마지막까지 완성된 수정 코드 어디서 받을 수 있는지 알고 싶습니다. 2) backend 마지막 강의까지 완료된 코드로 배포해서 구현하기 제로베이스 기준에서 어떤어떤 강의를 듣고 환경을 설정해야 마지막 배포까지 할 수 있는지 알려주시면 직접 배포해서 환경에서 돌아가는 것 까지 스스로 해보고 싶습니다. 2. 제주도 카페 클론 작동시키기 기초 :: Django 에서 기초 전체 소스코드 다운 받았습니다. 마찬가지로 어떤어떤 강의를 보고 최소한의 세팅을 해야 배포까지 해서 작동하는지 알고 싶습니다. 30분 요약시리즈부터 맨앞부터 하는데 frontend가 끝나니까 벌써 조금 지쳐서 힘들어서 보고 싶어지네요.. 감사합니다~~
-
미해결인터랙티브 웹 개발 제대로 시작하기
강의소개 페이지에 있는 우주 인터렉티브 웹을 만들고싶은데
몇강을 참고하면 만들 수 있을까요? 우주 속으로 빨려 들어가는 애니메이션을 구현하고싶어서 여쭤봅니다. 답변 부탁드립니다.
-
미해결웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1
.do파일
실무에서 .do파일을 사용하기도 하나요? 자바스크립트와 함께 사용하는거같던데 .. 이미지 다운로더 플러그인사용했을때 다운받아 지지 않는 이미지들이 .do 파일인것같아요
-
미해결인스타그램 클론 - full stack 웹 개발
강의영상이 안나와요 ㅠㅠ
새글|수정|삭제 :: forms 여기 파트 강의영상이 죄송합니다 이 동영상은 잠시 후 시청 가능합니다. 이러면서 영상이 안나옵니다.. 빠르게 수정 부탁드려요
-
해결됨웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1
table 그리기 관련 궁금한 점을 문의 드립니다..
바로 입력및 편집 가능한 table 을 그리는데.. input 을 여백이 없도록 td 와 붙이려고 하는데 잘 맞지를 않네요. 어떻게 해주어야 가능할까요?
-
미해결CSS 기본부터 활용까지
이고잉 선생님 강의 차이가 무엇인가요?
WEB1 WEB2 WEB3 시리즈랑요, Html기본 css기본부터 활용까지 이렇게 수업들이 다 같은내용을 알려주시는거같은데 안에 양 차이는있지만 크게 차이가 있나요?? WEB1 ~ WEB3 시리즈가 간단하게알려주고 Html 기본 정복, css기본부터 활용까지 전부 이고잉선생님이 알려주시던데 무슨차이인지 정확히 알 수 있을까요?
-
미해결기본을 확실히!! HTML의 모든 것
강의를 전부 수강했는데 다음 강의 무엇을 들어야될까요?
정말 도움이 많이 되는 강의였습니다. css와 최종적으로 자바스크립트까지 배우고싶은데 다음 어떤 강의를 들어야 커리큘럼으로 효과적일까요??
-
미해결기본을 확실히!! HTML의 모든 것
웹사이트 만들기에서 질문있습니다.
index.html 이후에 1.html 2.html은 텍스트파일로 다른이름으로 저장하시는데 모든파일로 저장안해도 되는건가요??
-
미해결실전 HTML & CSS 강좌
15강 16강 내용이 동영상 내용이 똑같습니다 ㅠㅠ
ppt와 zip은 다른데 동영상이 같네요 흑흑..
