묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
전체 레이아웃 와이어프레임 퍼블리싱(PC) - 전체레이아웃, 헤더영역
19분40초 overflow: hidden; 을 적용 하였으나, 여전히 이미지가 맞춰지지 않습니다. ㅠㅠ 그래서 .content > img { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } 을 적용 시켜서 이미지를 맞췄습니다. 하지만 다음 강의 모바일편에서 @media 를 적용시키니 이미지가 나오지가 않습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
화면을 부드럽게 이동하는 scrollTo 제이쿼리에 대해서
코딩웍스 선생님 강의에서, 특정 버튼 클릭시 지정된 섹션으로 화면을 부드럽게 이동시켜주는 제이쿼리 플러그인으로 jquery.scrollTo.min.js라는 js 파일을 올려주시고 연결(<script src...>)시키는법을 알려주셨는데요. 그 후 적용해보는 강의 파트에서, 선택자에 명령어를 입력할때, $('선택자').click(function (e) { $.scrollTo(this.hash || 0, 900) }) 이렇게 써주시면서 , "이건 플러그인 제작자가 정한 공식이니 따라치면 된다." 라고만 설명하고 넘어가셨습니다. 여기서 $.scrollTo(this.hash || 0, 900)이 공식을 어디서 찾아낸 것인지 알고 싶은데 어떻게 찾아야 할까요? 욕심으로는 이것저것 다 물어보고싶긴 합니다만... - $뒤에 선택자가 없는 이유 - hash 는 무엇인지 - || 0, 900 는 무엇인지 ... 뿐만 아니라 다른 제이쿼리 플러그인들도 각각의 공식이 있을 것 같은데, 그걸 어떻게 찾아서 써야 하는 것일지 모르겠습니다!
-
해결됨애플 웹사이트 인터랙션 클론!
캔버스 크기 관련 질문
안녕하세요. 질문이 있는데요 저는 캔버스 화면을 애플 공홈처럼 꽉 채우고 싶은데 innerHeight에 맞춰서 그런가 이런 식으로 나오네요(1920*1080 모니터 기준) outHeight나 그 외 다른 height 값들을 대신 넣으면 화면이 꽉 차는 대신 화면이 안 예쁘게 늘어납니다. f11하면 제가 원하는대로 1920*1080 풀사이즈 정확하게 나오고요. 어떻게 수정해야 할까요? const heightRatio = window.innerHeight / 1080; sceneInfo[1].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`;
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
자막이 있으면 좋겠어요..
자막파일 따로 다운받아서 놓친부분 찾기도 좋고 중간중간에 목소리 끊기는 부분도 있고 학교과제하느라 제가 시간도 많이 부족해서..... 다음 영상제작부터 자막이 있으면 계속 구매하고싶어요!!
-
해결됨애플 웹사이트 인터랙션 클론!
switch(currentScene) case2번 질문드려요!
쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드립니다.
선생님, 안녕하세요. 다름이 아니라 브라켓의 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; }
-
해결됨애플 웹사이트 인터랙션 클론!
블로킹
이미지 경로의 문제가 있는건가요???
-
해결됨애플 웹사이트 인터랙션 클론!
오류
검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? 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;
-
미해결실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)
현업관련 질문
현업에서 자바스크립트를 지양할 경우에는 어떤 스크립트들로 대체해서 사용할 수 있나요?