묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!거리에 따라 가운데 card는 기울어지는 각도가 고정되어 있고 다른 카드들은 서로 거리가 멀어질수록 기울어지는 각도의 차이가 커질 줄 알았습니다.그런데 다른 속성은 수정하지 않고 margin 속성만 1em -> 5em으로 변화를 주었는데 가운데 있는 카드도 각도가 더 줄어들었습니다.그래서 world에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 각도가 정해지는지 궁금합니다!
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
part1 강의는 뭔가요??
제가 part2만 수강중이어서요part1은 뭔가요??
-
해결됨코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초
깃허브 링크 어디에있나요?
처음에 나오는 이지웹퍼블리싱 깃허브에서 다운받으라는데 어디에 깃허브 링크가 있는지 안보입니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
html 수정했을때...
안녕하세요,강의를 들으면서 html 수정을하고나면스크롤이 제일 위로 올라가는 문제가 생겨서요..1050px (스크롤 플로그인 설정) ~ 768px (모바일)이 사이에 크기로 설정하면 스크롤이 생겨있는데,이때는 수정을해도 맨위로 올라가지않는데,,스크롤 플로그인이 적용되는부분은 수정하면맨 위로 올라가는데 어느부분을 수정하면 좋을까요..?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
viewport 가 제대로 작동을 안해요 뭐가 문제일까요?
- 학습 관련스마트폰이 웹처럼 나오는 것 같네요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의에 쓰셨던 행성 이미지는 어디서 구하셨나용?
제가 포폴을 만들고 있는데 참고가 될것 같아서 여쭤봅니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
히로쿠 말고 fix.io로 한 경우에는도메인주소를 어떻게 불러와야하나요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link적용하기 강의에서 useParams 쓰면 에러가 뜹니다.
좋은 강의 너무 감사드립니다. 강의 10:40 부분에 useParams 사용하는 부분에서:const params = useParams();console.log(params); 이거 입력한 후에 리프레쉬 한후 각자 아이템을 누르면, 밑에 화면이 뜹니다. 뭐가 잘못된 건지 잘 모르겠어요..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios를 다운받을때 특정한 폴더에서 받아야 하나요?
Axios 를 다운 받을때, 꼭 특정한 폴더에서 받아야 하는 건가요? Node-modules 랑 json.package 가 public 폴더 밑으로 또 생겨있고, nom start 누르면 Axios error 라고 뜹니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
화면 높이 관련 질문 있습니다.
섹션1높이 - 화면 높이 = 2539px 이라고 하셨는데요!섹션1높이는 알겠는데...화면높이는 브라우저의 실질적으로 콘텐츠가 보이는 곳을 말씀하시는걸까요...? 그럼 실제 스크롤거리는 어디 부분을 말하는걸까요...?즉, 화면 높이와 2539px의 정확한 설명이 필요합니다 ㅠ
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
.intro_saying 과 .intro .intro_saying 의 차이
.intro_saying 의 폰트만 변경하는 것이니, .intro .intro_saying 대신 .intro_saying 만 적어도 되나요?.intro .intro_saying { font-family:'OTEnjoystoriesBA' ; font-size: 36px; }
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의자료/완성사이트 접속 모두 안되네요. 서비스 안하시는건가요?
강의자료/완성사이트 접속 모두 안되네요. 서비스 안하시는건가요?
-
해결됨조코딩의 코딩 기초와 웹 풀스택 개발
왜 user/:id 에서 id 앞에 : 을 붙이는 걸까요?
감사합니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
질문이 있습니다!
파트2 강의를 들을때도 gsap유료버전을 구매하지 않아도 수업을 다 따라갈수 있나용?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
기초 트위닝 질문
기초 트위닝 진행중인데<div class="orange"></div>라고 적었을때 애니메이션이 작동을 안해요 ㅠㅠ<div class="orange">22</div> 이런식으로 태그 안에 내용이 있을때만 작동을 하는데 왜그러는 걸까용...
-
미해결조코딩의 코딩 기초와 웹 풀스택 개발
애니메이트 css 질문입니다.
애니메이트 css에서class="animate__animated animate__bounce" 따서 불여넣기 했는데 바운스가 안걸립니다.조코딩님 강의에는 버튼 타입이 걸려있는데 이건 어떻게 적용하는지요,,?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 git 설치 오류입니다.
git 설치 이후 vscode에서 터미널 변환이 안될때 git 최신버전 설치 완료vscode 재실행 완료 터미널 1개 추가 후 git bash로 변환시 목록에 안보임
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
별점주기 첫번째에서 nextAll이 적용안됩니다.
prevAll속성은 잘 들어가지는데그 다음에 넣은 nextAll 속성이 동작을 안하네요.. 코드도 다 똑같이 넣고 오타도 없는데 어디를 수정해야하나요...?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
HTML 유효성 검사에서 오류가 나옵니다.
<!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">OnSale</a></li> <li><a href="#none">기획전</a></li> <li><a href="#none">푸른마을 레시피</a></li> <li><a href="#none">매장안내</a></li> <div class="sub-back"> <div class="mega-menu"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </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"> <a href="#none"><img src="images/banner-01.jpg" alt="banner1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner2"></a> <a href="#none"><img src="images/banner-03.jpg" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.jpg" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우<b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"><span>체스키크룸로프성</span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"><span>럭셔리 범선 선셋</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"><span>거제 바람의언덕</span></a> <a href="#none"><img src="images/gallery-04.jpg" alt="gallery4"><span>연천 덴마크 가평</span></a> <a href="#none"><img src="images/gallery-05.jpg" alt="gallery5"><span>담양 메타프로방스</span></a> <a href="#none"><img src="images/gallery-06.jpg" alt="gallery6"><span>잘츠카머쿠트</span></a> </div> </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="footer-content"> <div class="footer-link"> <a href="#none">회사소개</a> <a href="#none">찾아오시는길</a> <a href="#none">개인정보처리방침</a> <a href="#none">이용약관</a> <a href="#none">고객지원</a> <a href="#none">제휴문의</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </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> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<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: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; background-color: #fff; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-back { background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 100%; width: calc(100vw - 208px); z-index: 1000; display: none; } .mega-menu {} .sub-menu { height: 32px; display: flex; align-items: center; gap: 15px; margin-left: 15px; } .sub-menu a { padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #000; } .spot-menu { height: 50px; text-align: center; } .spot-menu a { color: blue; } .spot-menu a:hover { text-decoration: underline; } .slide { position: relative; } .slide > div { /* border: 1px solid blue; */ } .slide-image { height: 400px; } .slide-image-inner { font-size: 0; height: inherit; overflow: hidden; position: relative; } .slide-image-inner a { height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; visibility: visible; } 35% { opacity: 1; } 40% { opacity: 0; visibility: hidden; } 100% { opacity: 0; } } .banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .banner a img { width: 150px; border-radius: 10px; margin: 5px 0; } .items {} .items > div { /* border: 1px solid green; */ } .shortcut { height: 200px; display: flex; align-items: center; justify-content: space-around; } .shortcut .shortcut-image { height: 150px; border-radius: 30px; } .news-gallery { height: 250px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-right: -6px; margin-bottom: -1px; background-color: #ccc; } .btn a.active { background-color: #fff; } .tabs {} .tab1 { /* display: none; */ border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; padding-right: 50px; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 10px; display: none; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 130px; border-radius: 10px; margin: 0 55px; } .tab2 a span { display: block; } footer { display: flex; height: 120px; align-items: center; } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 15px; } .footer-link {} .copyright {} .footer-link a { color: blue; } .footer-link a::after { content: "|"; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .modal { background-color: #00000060; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } .modal-content h2 { text-align: center; } $('.menu').mouseenter(function(){ $('.sub-back').stop().fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').stop().fadeOut() }) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
-
미해결조코딩의 코딩 기초와 웹 풀스택 개발
인프런은 질문을 안받아주시나요?
ㅠㅠㅠ
