묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 시작은 프리캠프
class 와 id 작성 순서
<div class="token__wrapper"> <div class="token" id="token">000000</div> 여기서 div class="token" 이랑 id "token" 순서를 반대로 하면 왜 컬러가 안 입혀지나요? css 적용순서가 달라지게 되나요?
-
해결됨[코드캠프] 시작은 프리캠프
파이널 과제 onkeyup="onchange()" 관련 질문
안녕하세요파이널 과제를 한 후 레퍼런스와 검토 중인데요,1/ 수업시간엔 changeFocus()로 알려주셨는데, 굳이 onchange="changePhone2()" onkeyup="onchange()" 로 사용된 이유가 있을까요? 굳이 두개로 나눠서 사용한 이유가 궁금합니다.2/ 해당 코드가 "키보드를 눌렀다 때면 onchange함수를 실행시켜줘. onchange는 changePhone함수를 실행시킨다는 의미야," 라는 의미일까요? 찾아봤지만 명쾌하게 이해가 되지 않아 질문합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 적용이 안돼요.
안녕하세요 선생님.제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다.<script type="text/javascript" src="script/jquery-1.12.4.js"></script><script type="text/javascript" src="script/custom.js"></script> 요렇게 적용하라고 하셔서 그대로 했을때는 되는데,js파일을 script 폴더에 넣지않고 밖으로 뺀다음 <script type="text/javascript" src="../jquery-1.12.4.js"></script> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
object-fit 속성 사용법
D E 유형 필독사항에서 object-fit 속성 강의에서object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데,부모요소의 너비높이가 없이, inherit 없이도,img의 너비나 높이만 있어도 구현되던데,문제가 있을까요?아래처럼 해도 될까요?꼭 반드시부모요소의 너비높이가 있어야되고inherit로 받아와야만 하나요?참고로 아래는 D1 유형 중 슬라이드부분 입니다. <div class="slide"> <div class="slide-image"> <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a> <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a> <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a> </div> </div>.slide{ position: relative; /**/ overflow: hidden; width: 400px; } .slide-image{ font-size: 0; animation: slide 10s linear infinite; } .slide-image img{ width: 100%; height: 400px; object-fit: cover; }
-
미해결처음 만난 리액트(React)
unmount 질문있습니다.
5:36 부분에setState 를 활용해서 notifications에 들어있던 내용을 지워야만 unmount가 되던데왜 그런건가요??render() 부분에서 더 이상 출력?할 만한 내용이 없다고 판단해서 unmount가 되는건가요?
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } };선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
-
미해결따라하면서 배우는 웹애플리케이션 만들기
bitnami 설치
bitnami 설치 제공이 이제 중단되었다는데... 어떻게 설치하나요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.banner 간격 조정 어떻게 하나요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>서울구석구석</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">지금의 서울</a> <div class="sub-menu"> <a href="#none">이벤트</a> <a href="#none">축제&행사</a> <a href="#none">전시</a> </div> </li> <li> <a href="#none">추천</a> <div class="sub-menu"> <a href="#none">에디터 추천</a> <a href="#none">테마코스</a> <a href="#none">도보해설관광</a> <a href="#none">한류관광</a> </div> </li> <li> <a href="#none">여행지</a> <div class="sub-menu"> <a href="#none">명소</a> <a href="#none">엔터테인먼트</a> <a href="#none">음식</a> <a href="#none">게스트하우스</a> </div> </li> <li> <a href="#none">여행정보</a> <div class="sub-menu"> <a href="#none">가이드북&지도</a> <a href="#none">시티투어버스</a> <a href="#none">날씨</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="banner"> <img class="banner-image" src="images/banner-01.png" alt="banner image"> <div class="banner-content"> <h3>얼리버드 선착순 할인 이벤트 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. </p> </div> <a href="#none"><img src="images/banner-02.png" alt="banner link"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery3"><span>라인을 만드는 필라테스</span></a> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="family-site"> <select> <option value="">패밀리 사이트</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> <br> 주요 작업 내용은 아래와 같습니다.<br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body { margin: 0; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 650px; */ } .left { width: 200px; background-color: rgba(210, 181, 161, 0.5); } .right { flex: 1; } header {} header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; } .menu li > a { border: 1px solid lightgray; display: block; padding: 5px; background-color: lightskyblue; transition: 0.1s; } .menu li:hover > a { background-color: olivedrab; color: #ffffff; } .sub-menu { border: 1px solid lightgray; background-color: lightcyan; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; } .sub-menu a:hover { background-color: olivedrab; color: #ffffff; } .slide { display: flex; } .slide > div { /* border: 1px solid blue; */ height: 400px; } .slide-image { flex: 1; height: inherit; overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; width: 300%; height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide-image-inner a { height: inherit; display: inline-block; width: calc(100% / 3); } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } .banner { width: 230px; text-align: center; box-sizing: border-box; padding: 5px; font-size: 14px; background-color: ivory; } .banner .banner-image { width: 88%; } .items { display: flex; } .items > div { /* border: 1px solid green; */ height: 250px; flex: 1; } .news {} .gallery {} /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 5px; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: lightskyblue; } .tab1 { border: 1px solid #000000; height: 208px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 9px; border-bottom: 1px solid #000000; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000000; height: 208px; text-align: center; box-sizing: border-box; padding-top: 10px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 165px; border-radius: 5px; } .tab2 a span { display: block; } footer { display: flex; height: 100px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; } .copyright { flex: 1; } .family-site { width: 230px; } .family-site select { padding: 5px; border-radius: 3px; } .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #ffffff; width: 460px; padding: 20px; border-radius: 10px; box-shadow: inset 0 0 10px #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000000; padding: 5px 10px; border-radius: 5px; } $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) .banner에서 gap처럼 요소 간의 간격을 띄우는 방법이 있나요?
-
해결됨따라하며 배우는 HTML, CSS
profile__picture 사진 크기 조정
<header class="header"> <nav class="header__content"> <div class="header__buttons"> <a href="index.html" class="header__home"> <img src="assets/icons/logo.svg" alt="logo"> </a> </div> <div class="header__search"> <img src="assets/icons/search.svg" alt="search"> <input type="text" placeholder="Search..."> </div> <div class="header__buttons"> <a href="#none"> <img src="assets/icons/home.svg" alt="home"> </a> <a href="#none"> <img src="assets/icons/shop.svg" alt="shop"> </a> <a href="#none"> <img src="assets/icons/messenger.svg" alt="messenger"> </a> <div class="profile__picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> </nav> </header>.header { width: 100%; height: 44px; background-color: #FFFFFF; display: flex; justify-content: center; position: fixed; top: 0; left: 0; z-index: 2; border-bottom: 1px solid #DBDBDB; } .header__content { width: 100%; max-width: 975px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; } .header__logo { margin-top: 5px; } .header__search { width: 216px; height: 28px; display: none; align-items: center; position: relative; } @media (min-width: 768px) { .header__search { display: flex; } } .header__search img { width: 12px; height: 12px; position: absolute; top: 8px; left: 8px; } .header__search input { width: 100%; height: 100%; background-color: #FAFAFA; padding: 4px 10px 4px 28px; border: 1px solid #DBDBDB; border-radius: 4px; outline: none; font-size: 12px; /* 폰트 굵기 */ font-weight: 300; color: #999999; text-overflow: hidden; white-space: nowrap; } .header__search input:focus { color: #262626; } .header__buttons { display: flex; align-items: center; gap: 16px; } .profile__picture img{ width: 24px; border-radius: 50%; }css의 .profile__picture부분에서 저는 강의처럼 말고 뒤에 img를 넣어야지만 사진 크기가 조정되는데 img를 안붙혀도 되는 이유가 궁금합니다!
-
미해결따라하며 배우는 HTML, CSS
header태그
header라는 태그 자체가 있는데 class명을 주는 이유가 궁금합니다!! 따로 이유가 있을까요??
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의노트 관련
강의노트는 어디서 다운 받나요 ?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io 만들시 도커 파일이 있어야 하나요?(error)
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.fly launch 을 하고나서 선생님처럼 docker 파일들이 생기지 않았고 , DataBase 관련 된 질문에 No 를 하고 나서 Error: open Dockerfile : The system cannot find the file specified. 라는 에러가 발생하였습니다. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
index에서 result 페이지로 이동 질문드립니다.
https://inflearn.com/questions/675320 안녕하세요! 해당 질문 보고 추가질문드립니다.섹션2에서 질의응답이 끝나면 현재 index 페이지에서 결과값이 나오는데, 각 유형에 맞게 바로 result 페이지로 이동하려면 코드를 어떻게 수정해야 할지 궁금해서 질문드립니다.결과 이미지를 여러 장씩 넣고 싶어서요..! 시간나실때 답변 주시면 참고하겠습니다. 좋은 강의 만들어주셔서 감사합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
node가 제대로 실행되지 않습니다
nodejs의 파일 위치가 cmd와 동일하고 node.js 다운도 모두 끝마쳤는데 cmd에서 파일을 불러올 수 없고 터미널에서도 오류가 납니다 어떤 부분이 문제인 걸까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
클로저 질문
애니메이션 재생, 정지, 재시작 버튼 구현 강의에서 3:55에 클로저를 설명해주신 내용에서let toggle = false; button.addEventListener('click',()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; });이부분을 button.addEventListener('click',()=>{ let toggle = false; return ()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; } });로 변경하셨는데 변경전 코드는 잘 되는데 변경된 코드는 동작을 하지 않습니다혹시 제가 잘못 적은 부분이 있을까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
console.log 와 return 에 따라 다른 결과
map 사용 시 3번의 console.log 와 return의 사용이나 순서에 따라 결과가 다르게 나오는데요 이 이유가 궁금합니다
-
미해결처음 만난 리액트(React)
serve -s build => command not found인 경우
npx serve -s build라고 입력하시면 됩니다:)환경 변수, 경로 확인, 재설치 별별 삽질하다가뒤늦게 알았어요 ㅎㅎ
-
해결됨따라하며 배우는 HTML, CSS
<strong>과 같은 semantic 태그와 SEO, 실무의 사용이 궁금합니다!
관련해서 검색을 해보니, <strong>과 같은 sementic 태그는 의미를 부여하기때문에 검색엔진이 크롤링할때 영향을 끼친다는 말이 종종 보였습니다.그리고 mdn에서는 <b> 태그 대신 font-weight 혹은 강조의 의미를 넣은 <strong>을 사용하라고 나옵니다. 이에 대해 의문이 생겼는데요,1) 실무에서는 font-weight, <b>, <strong>을 어떻게 분배하는지 궁금합니다. 태그 사용도 SEO를 고려하나요?2) <b>대신 font-weight를 사용해야하는 이유가 궁금합니다.
-
미해결처음 만난 리액트(React)
강의영상대로 코드를 작성했는데 오류가 나와요
각 파일별 코드 첨부합니다. 위와같이 코드를 작성했는데 이런 에러 창이 뜨네요 확인해봐도 빼먹거나 잘못입력한 부분은 없는 거 같은데 뭐가 문제일까요??
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
강의 자료
이미지는 어디서 다운 받는거죠?
