묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
브라우저 사이즈에 따라 위치값이 달라지는건 왜일까요..?
안녕하세요전진 3D스크롤 예제를 이리저리 수정해보고 있는데요.옆면 벽에 더해 위쪽 벽도 만들어보고 싶어서 수정하고 있습니다. 브라우저 사이즈가 작을때는 정상적입니다..근데 브라우저를 최대화하면...이렇게 위쪽 벽이 튀어나가버립니다.. html은 실습예제에서 양쪽벽과 위쪽벽만 빼고 삭제했습니다..<div class="world"> <div class="stage"> <div class="house"> <section class="wall wall-left"></section> <section class="wall wall-right"></section> <section class="wall wall-upper wall-upper-left"></section> <section class="wall wall-upper wall-upper-right"></section> </div> </div></div> css는 body world stage house wall는 실습예제와 크게 다른점이 없구요..body { height: 100vh; font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif; color: #555; background: #555;}.world { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; perspective: 100vw;}.stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d;}.house { width: 100vw; height: 100vh; transform: translateZ(-500vw); transform-style: preserve-3d;}.wall { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;} 옆벽과 위쪽벽만 아래처럼 만들어놨습니다...wall-right { background:#6b68ff55; width: 1000vw; transform: rotateY(90deg) translateZ(-400vw)}.wall-upper-left { height: 1000vw; background: #00000055; transform: rotateX(90deg) translateZ(500vw)} 둘다 길이가 1000vw라서 브라우저 가로사이즈에 따라 달라질 요인은 없는거같은데...왜 그럴까요?ㅠㅠ세로로는 브라우저 크기에 영향을 안받고, 오직 가로크기가 변하면 저렇게 어긋나버립니다..
-
미해결처음 만난 리액트(React)
Event handler 질문입니다.
변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.
-
해결됨[코드캠프] 시작은 프리캠프
자바스크립트에 getElementId로 연결을 했는데 자바스크립트에는 없는 word라고 나오는데 왜 이럴까요?
동그라미 뿐만 아니라 다른 것들도 모두 그럽니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
-
미해결처음 만난 리액트(React)
백틱 내부 색상
선생님처럼 백틱 내부 문자 색상이 원래 색처럼 나오게 하려 어떻게 해야하나요? 같은색이라 구분이 잘되게 보고 싶은데
-
해결됨[코드캠프] 강력한 CSS
단위심화 강의 중 질문 있습니다.
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3장밖에 안 들어가는데 왜 그런건가요..?? flex-wrap: wrap; 까지 적용시켰는데 되지 않네요. 보시는 바와 같이 윗줄은 4장이 출력 되는데, 밑줄은 3장만 출력이 됩니다. 제가 작성한 코드는html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06-02-calc2</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="container"> <div class="sidebar"> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li>메뉴4</li> </ul> </div> <div class="contents"> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> </div> </div> </body> </html>css* { box-sizing: border-box; } .container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .sidebar { width: 170px; background-color: orange; padding: 5px 15px; } .sidebar ul { width: 100%; padding: 0; } .sidebar ul li { list-style: none; padding: 5px 0; color: #ffffff; border-bottom: 1px dashed rgba(255,255,255,0.3); /* 메뉴 사이 구분선*/ } .contents { width: calc(100% - 170px); display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; } .item { width: 24%;/ height: 180px; background-image: url("../img/dochihello.jpg"); }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="navi"></div> </header> <div class="slide"> <a href="#"><img src="images/img1.png" alt="img1"></a> <a href="#"><img src="images/img2.png" alt="img2"></a> <a href="#"><img src="images/img3.png" alt="img3"></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#"><img src="images/shortcut.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="copy"> <span>COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</span> </div> <div class="sns"> <a href="#"><img src="images/sns1.jpg" alt="sns1"></a> <a href="#"><img src="images/sns2.jpg" alt="sns2"></a> <a href="#"><img src="images/sns3.jpg" alt="sns3"></a> </div> </footer> </div> </body> </html>@charset "utf-8"; .container{ width: 1200px; margin: auto; border: 1px solid red; } header{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ height: 300px; position: relative; overflow: hidden; } .slide>div{ font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;} } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; width: 400px; box-sizing: border-box; } .news{} .banner{} .shortcut{} footer{ overflow: hidden; } footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copy{ width: 800px; line-height: 100px; text-align: center; } .sns{ width: 200px; line-height: 140px; text-align: center; }그리고 푸터 부분에텍스트는 line-height할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
-
미해결자바스크립트 : 기초부터 실전까지 올인원
인프런 블로그 작성
인프런 블로그에 학습일기로 해당 강의 속 문제와 문제풀이 내용을 공개로 올려도 되나용??
-
해결됨[코드캠프] 강력한 CSS
영상 중간 생략
섹션0 실습1 강의 39분 50초~ 듣다가 질문남깁니다적용이 안되는 이유를 설명하시는데 영상이 끊기고 생략되어있네요..그리고 강의 들을 때 가끔씩 오류인지 똑같은 부분이 반복되는 문제도 생깁니다 ㅠ,ㅠ
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
prototype 뜻
기본적인 질문인것 같아서 죄송합니다 ㅠㅠprototype 뜻인 뭔지 알 수 있을까요..?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
카테고리 accordion효과 custom.js에서 siblings 안먹히는거 같아요
안녕하세요. 선생님유익한 강의 잘 듣고 있습니다~그런데 카테고리 페이지 코딩 작업중에 custom.js 에서 다른건 다 잘 작동되는거 같은데siblings 선택자로 메뉴 열리고 닫히는 것, active 클래스 제거되는게 작동이 안되는데왜그러는걸까요;;
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
WinSCP 연결 에러
"PM2를 활용한 무중단 배포"까지 진행하고 인스턴스는 현재 실행 중입니다.이 상태를 모르고 로컬에서 VSCode로 node index.js명령을 실행했습니다.그 후에 인스턴스를 중지할려고 WinSCP를 접속할려고 하는데 연결이 계속 거부되고 있습니다.. 서브에 연결할 수 있는 다른 방법은 없을까요?일시적인 현상인 줄 알고 몇 일 기다렸다가 다시 시도해도 연결이 안됩니다,,
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
해당 오류 ERROR in ./src/index.js 5:0-40 를 아실까요 ..?
제가 axios 설치 이후 npm start에서 지속적으로 오류가 나길래 stackflow를 보고 -i npm ~... 무엇을 터미널에서 진행시키고.node_modules 폴더와 package.json & lock.json 파일 삭제후 npm start 다시 했는데 아래와 같이모듈 오류가 지속적으로 뜨네요.모듈 파일명들이 전에는 @로 시작하는 파일들이 다 날라간 것 같구요.모듈 중 Axios 폴더에서 index.d.ts 파일에서 오류가 발견되고 있는 상황입니다.그랩님 조금만 도와주실 수 있을까요
-
해결됨[코드캠프] 시작은 프리캠프
input 태그 / flex 정렬
안녕하세요. 취업을 목표로 공부하고 있는 코린이 입니다.섹션2 CSS 파트의 "회원가입" 화제 과제를 하는 중에, 며칠동안 코드를 계속 수정하고 고쳐도(아직 제 실력으로는) 해결이 어려운 부분들이 있어 질문을 남기게 되었습니다. 저는 맥북을 사용하고, chrome으로 구현하고 있습니다. <input> 관련input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } <input type="radio" ~> 위의 input 태그의 외형을 CSS로 변경할 때 (특히, 배경 색상) 코드가 반영이 안되는 부분이 있어 인터넷 검색을 하다보니, appearance: none;을 지정해 줘야 한다는 것을 알게 되었습니다.이 부분에서, 'input 태그에 class 또는 id를 적용시킬 때 항상 appearance를 적용해야 하는지' 궁금합니다. 나머지는 다했는데... / <div> 속 <input>의 flex 정렬과제의 90%는 구현했습니다.. 그런데 부모박스를 <div>로 지정하고자식 박스에 <input> 태그가 포함되었을 때,position: flex;justify-content: row/column;와 같은 flex 정렬 코드가 반영이 되지 않고 있습니다. 최대한 자력으로 해결해보려고 노력하고 있지만, 아직 제 실력이 부족하여며칠을 고민해도 쉽게 해결하지 못하고 있습니다...선생님의 고견이 절실한 순간입니다. 완강하는 그날까지!html<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup_실습.css" rel="stylesheet"> </head> <body> <!-- 회색 배경 --> <div class="Graybg"> <!-- 회원가입 배경 --> <div class="SignUpbg"> <!-- Group5 --> <div class="Group5"> <!-- 회원가입을 위해~ --> <div class="Title"> 회원가입을 위해<br> 정보를 입력해주세요 </div> <!-- Group1 --> <div class="Group1"> <div class="Textbox">* 이메일</div> <div class="vector1"></div> </div> <!-- Group2 --> <div class="Group1"> <div class="Textbox">* 이름</div> <div class="vector2"></div> </div> <!-- Group3 --> <div class="Group1"> <div class="Textbox">* 비밀번호</div> <div class="vector2"></div> </div> <!-- Group4 --> <div class="Group1"> <div class="Textbox">* 비밀번호 확인</div> <div class="vector2"></div> </div> <!-- 성별 --> <div class="gender"> <!-- 여성 --> <div class="genderBox"> <div><input type="radio"></div> <div>여성</div> </div> <!-- 남성 --> <div class="genderBox"> <div><input type="radio"></div> <div>남성</div> </div> </div> <!-- 체크박스 --> <div class="checkBox"> <input type="checkbox"> <div class="genderText"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> </div> <!-- 선 --> <div class="line"></div> <!-- 가입 버튼 --> <button> <div class="signUpText">가입하기</div> </button> </div> </div> </div> </body> </html> CSS.Graybg { position: absolute; width: 1920px; height: 1080px; background-color: #FFFFFF; border: 1px dotted black; display: flex; justify-content: center; align-items: center; } .SignUpbg { width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; display: flex; justify-content: center; align-items: center; } .Group5 { width: 470px; height: 818px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .Title { box-sizing: border-box; width: 466px; height: 94px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; } .Group1 { width: 466px; height: 80px; display: flex; flex-direction: column; justify-content: space-between; } /* 성별 */ .gender { width: 140px; height: 23.94px; position: flex; flex-direction: row; flex-wrap: nowrap; border: 1px dotted black; } .genderBox { width: 60px; height: 23.94px; display:flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px dotted black; } input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } .genderText { font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #000000; } /* 성별 */ /* 체크박스 */ .checkBox { position: flex; flex-direction: row; align-items: center; width: 454px; height: 21.06px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; border: 1px dotted black; } input[type="checkbox"] { width: 20px; height: 20px; } .checkBoxText { width: 419px; height: 21px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } /* 체크박스 */ .vector1 { width: 466px; height: 0px; border: 1px solid #0068FF; } .vector2 { width: 466px; height: 0px; border: 1px solid #CFCFCF; } /* 선 */ .line { width: 470px; height: 1px; background: #E6E6E6; } /* 가입 버튼 */ button { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 470px; height: 75px; background: #FFFFFF; border: 1px solid #0068FF; border-radius: 10px; } button:hover { background: yellowgreen; } .signUpText { width: 70px; height: 27px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068FF; }
-
해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
css bacground-image를 인식하지 못합니다.
경로를 확실히 주었는데 vs code에서는 작동하지만 intellij 에서는 적용되지 않습니다.다른 방법은 없을까요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
절대주소 문의
쌤!프로젝트 단독으로 모바일웹할때는 절대주소라고 말씀하셨는데 다른 학생이 한 것에는 상대주소로 되어있었잖아요 포폴이라서 그런거라고 말씀하셨는데요몇번들어도 그부부분이 이해가 되지않아서요 ~모바일에 웹에 목업을 할꺼라서 그런건가요??
-
미해결처음 만난 리액트(React)
코드 의미를 모르겠어요 react
const {comments} = props; 의미? {} 안에는 어떤 것을 넣는 것인지요? 각 항을 설명해 주세요 {comments.map((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; 리액트 진짜 어렵네요 CommentList.jsx 일부 입니다 function CommentList(props){ const {comments} = props; return( <Wrapper> {comments.map((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; })}</Wrapper> ); }
-
미해결처음 만난 리액트(React)
코드의 의미를 모르겠어요 react요
const Wrapper =styled.div 이게 무슨의미인지요? 또 문법이 괄호도 없고 빽틱으로만? & >*{ :not(:last-child){ margin-bottom:16px; } 이건 또 무슨의미인지요 CommentList.jsx 의 일부 입니다 const Wrapper =styled.div` display:flex; flex-direction : column; align-items:flex-start; justify-content : center; & >*{ :not(:last-child){ margin-bottom:16px; } } `;
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드
슬라이드가 되지 않습니다 ㅠ 어디부분이 잘못되었는지 확인부탁드립니다!<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="nav"></div></header><div class="slide"><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div><div class="items"><div class="news"></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy">서울특별시 동대문구 장안벚꽃로 279 한국산업인력공단 서울지역본부<br> 전화번호: 1644-8000 동대문구 휘경동 전동중학교 건너편. </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js "></script> <script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; border: 1px solid red;}header{ height: 100px;}header>div{ height: 100px; }.header-logo{ width: 200px; line-height: 130px; float: left;}.nav{ width: 800px; border: 1px solid wheat; float: right;}.slide{ position: relative; width: 1200px; height: 300px;}.slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite;}@keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; }}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; border: 1px solid darkmagenta; box-sizing: border-box;}.news{ width: 400px; border: 1px solid darkorange;}.banner{ width: 400px; }.shortcut{ width: 400px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.footer-logo{ width: 200px; padding-top: 28px;}.copy{ width: 800px; text-align: center; padding-top: 29px;}.sns{ width: 200px; line-height: 140px; padding-left: 11px;}
-
해결됨[코드캠프] 강력한 CSS
transition 활용 예시
새 글 쓰기 > 에서 > 이동하는 방법이 궁금합니다.
