묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결나만의 포트폴리오 웹페이지 만들기
동영상을 최신버전에 맞게 업그레이드 해주시거나 css적용이 안되는 원인과 해결방법을 빠르게 써주실 수 있나요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="Chrome"> <meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, minimum-scale-1.0, user-scalable-no"> <title>Portfolio - Navbar</title> <!-- saved from url=(0013)about:internet--> <!-- icon --> <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="/css/portfolio.css"> </head> <body> <header class="header-area navbar-fade" id="header"> <nav class="Navbar"> <a class="Navbar-brand" id="navbarBrand">logo</a> <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a> <div class="Navbar-menu" id="menu"> <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div> <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div> <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div> <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div> </div> </nav> </header> <!-- user script --> <script src="portfolio.js"></script> </body> </html>웨에거는 portfolio.html이고 아래거는 portfolio.css인데, 아이콘 적용도 안되고, css적용도 안되요! 고쳐주세요!/* COMMON */ * { margin: 0; padding: 0; font-size: 0; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: break-all; font-family: 'Heebo', sans-serif; } img { width: 100%; height: 100%; } a { text-decoration: none; font-size: 14px; text-transform: uppercase; } ul { list-style-type: none; } /* HEADER */ .header-area { position: relative; top: 0; left: 0; width: 100%; z-index: 99; background-color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .navbar-fade { animation-name: navbar-fade; animation-duration: 0.5s; -webkit-animation-name: navbar-fade; -webkit-animation-duration: 0.5s; } @keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } @-webkit-keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } .header-area.navbar-fixed { position: fixed; } .header-area > .navbar { width: calc(100% - 120px); margin: 0 60px; overflow: hidden; } @media (min-width: 992px) { .header-area > .navbar { max-width: 900px; margin: 0 auto; } } @media (min-width: 1200px) { .header-area > .navbar { max-width: 1000px; } } .header-area > .navbar > .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } .header-area > .navbar > .navbar-toggler * { font-size: 32px; } .header-area > .navbar > .navbar-toggler { float: right; height: 70px; line-height: 70px; font-size: 32px; cursor: pointer; } @media(min-width: 992px) { .header-area > .navbar > .navbar-toggler { display: none; } } .header-area > .navbar > .navbar-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 70px; left: 0; width: 100%; height: 200px; transition: 0.5s ease; overflow: hidden; } .header-area > .navbar > .navbar-menu.show { height: 200px; } .header-area > .navbar > .navbar-menu > .nav-item { float: none; display: block; height: 50px; line-height: 50px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: rgba(0, 0, 0, 0.4); } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding-left: 50px; color: white; cursor: pointer; } @media (min-width: 992px) { .header-area > .navbar > .navbar-menu { position: relative; background-color: transparent; float: right; top: 0; width: auto; height: auto; transition: none; } .header-area > .navbar > .navbar-menu.show { height: auto; } .header-area > .navbar > .navbar-menu > .nav-item { display: inline-block; height: 70px; line-height: 70px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: transparent; } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding: 0 20px; color: black; } }css파일을 css폴더에 넣고 <link rel="stylesheet" href="/css/portfolio.css">로 불러오기를 했는데 안되요!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션 .con02 gsap 질문
안녕하세요 먼저 너무 유익하고 도움이되는 강의를 주셔서 감사드립니다. .con02에 workList gsap쪽에 질문이 있어서 글 남기게 되었습니다.my work 타이틀이 fixed되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2025년 실기준비할때도 참고하면 좋을 강의일까요?!
아직 결제만하고 강의시청은 안한상태인데2025년 웹디자인개발기능사로 바뀌는데내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!?혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다.답변주시면 감사하겠습니다.!
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의 자료 요청합니다~
강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~kjj5421@naver.com으로 자료 요헝 드려도 될까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요!제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요?프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다.운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
(* nodejs 설치를 https://nodejs.org/en/download/ 에 들어가서 Prebuilt Installer 메뉴에서v22.11.0(LTS)를 설치하였습니다.)안녕하세요, 수고가 많으십니다.강의 잘 듣고 공부하다 모르는 부분이 있어 에러사항은 아래에 요약하여 적었습니다.일단 react 시작하기 강의를 듣고 있던 중 처음 부분에서 vscode 터미널에서 명령어 npm install -g create-react-app 입력 후 아래 에러가 발생하여어떻게 해야 해결 할 수 있는지 답을 알고 싶어서 글을 쓰게 되었습니다. 1.첫번째로 vscode 실행 후 npm install -g create-react-app 명령어 입력하니 에러 요약: 경로를 확인하라는문제가 발생하였습니다. 첫번쨰 에러 발생 한 후 vscode를 종료하고 다시 시작하니 또 다시 이번엔 새로운 에러가 발생하였습니다. 에러 요약: 자세한 내용은 마이크로소프트 링크 주소 참조하라는 메시지 에러가 발생하였습니다. 현재까지 2가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다.감사합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
delay 적용 안됨
딜레이가 적용이 안되는데 코드에서 어떤 부분이 잘못된 것일까요?? animation-fill-mode와 animation-delay 모두 다 주었습니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .skill-progress { background-color: #333; width: 500px; border-radius: 10px; color : white; text-align: center; padding: 10px; } .item { margin-bottom: 35px; } .item p{ overflow: hidden; margin-bottom: 5px; } .item span:nth-child(1) { float: left; } .item span:nth-child(2) { float: right; } .progress { border : 1px solid aquamarine; padding: 5px; border-radius: 3px; } .progress-level { background: linear-gradient(to right, #fc6c85 0%, gold 100%); height: 7px; animation: ani 1s; animation-fill-mode: both; } @keyframes ani { 0% { width: 0; } } .skill-progress .item:nth-of-type(1) .progress-level { animation-delay: 0s; } .skill-progress .item:nth-of-type(2) .progress-level { animation-delay: 0.2s; } .skill-progress .item:nth-of-type(3) .progress-level { animation-delay: 0.4s; } .skill-progress .item:nth-of-type(4) .progress-level { animation-delay: 0.6s; } .skill-progress .item:nth-of-type(5) .progress-level { animation-delay: 0.8s; } </style> </head> <body> <div class="skill-progress"> <h1>SOFTWARE SKILLS</h1> <div class="item"> <p> <span>HTML5</span><span>90%</span> </p> <div class="progress"> <div class="progress-level" style="width: 90%"></div> </div> <p> <span>CSS3</span><span>80%</span> </p> <div class="progress"> <div class="progress-level" style="width: 80%"></div> </div> <p> <span>jQuery</span><span>65%</span> </p> <div class="progress"> <div class="progress-level" style="width: 65%"></div> </div> <p> <span>Photoshop</span><span>70</span> </p> <div class="progress"> <div class="progress-level" style="width: 70%"></div> </div> <p> <span>illustrator</span><span>82%</span> </p> <div class="progress"> <div class="progress-level" style="width: 82%"></div> </div> </div> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html>
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
scrolla 질문
안녕하세요, 강사님.다름이 아니라 스크롤라 반복이 되지 않아서 질문 드립니다.알려주신대로 펑션으로 스크롤라를 호출하고 인덱스 파일에 애니메이트도 선언했습니다만, 처음에만 애니메이션이 작동하고 스크롤을 내렸다 올릴 땐 작동하지 않습니다.스크롤을 초기화 해야 되는걸까요?챕터마다 넣어주신 캡쳐 파일에선 저랑 다른 부분을 찾기가 어려워 질문 남깁니다!
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인 부탁드립니다.
이메일로 자료 요청을 했으나 계속 받지 못하고 있습니다.메일 확인 부탁드립니다. (swh0107@gmail.com)
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
rotateY(360deg)가 적용이 안됩니다!
/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); body { border : 1px solid red; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; color : #222; } .sns { background-color: #f8f8f8; padding : 40px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.3); } .sns a { border : 5px solid white; display: inline-block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; text-align: center; line-height: 80px; font-size: 40px; margin: 0 10px; position: relative; overflow: hidden; } .sns a:before { content:''; position: absolute; width: 100%; height: 0; bottom:0; left:0; transition: 0.5s; } .sns a:hover:before { height: 100%; } .sns a:nth-child(1):before { background-color: #3b5999; } .sns a:nth-child(2):before { background-color: #55acee; } .sns a:nth-child(3):before { background-color: #dd4b39; } .sns a:nth-child(4):before { background-color: #0077b5; } .sns a:nth-child(5):before { background-color: #e4405f; } .sns a .bi { position: relative; transition: 0.3s; } .sns a:hover .bi { transform: rotateY(360deg); color: #fff; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html> 코드 내용은 위와 같습니다..! rotateY(360deg)를 css에 작성해주었는데 실행 결과 이것만 적용되지 않습니다. 어떤 이유 때문일까요..? 강의 자료에 제공된 css를 복사해서 붙여넣어도 적용되지 않습니다
-
미해결Tailwind CSS로 만드는 멋진 웹 UI 스타일링
섹션 1 - 3강 화면이 안나오는것 같네요
섹션 1 - [필독] CDN 사용법과 비주얼스튜디오코드에서 Tailwind CSS IntelliSense 세팅강의 화면이 하얀색 배경화면만 나오고 수업내용은 안보이네요. 소리는 정상적으로 들립니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
header gnb splitting 적용문제
안녕하세요. 오늘 처음 수업을 시작하면서 <header> <nav>영역에 splitting 적용을 해봤는데요.해당 모션이 적용되지 않아 문의드립니다.혹시나 싶어 codepen 예제만 따로 만들어봤는데 동일한 현상이 생기고 있어 제가 무엇을 잘못하고 있는지 알 수가 없습니다.완성본을 따로 받아 볼 수 있을지도 문의드립니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인 부탁드립니다
punkwagon@gmail.com 입니다
-
해결됨HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요
동영상 보이는 곳에서 Web-Book 어떻게 보나요?https://www.books.weniv.co.kr/로 가서 봐야 하나요?동영상 강의 하는 웹페이지 어디선가 찾아 볼 수 있었으면 좋겠습니다.제가 못 찾는 건지 모르겠지만.
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
특별한 형태의 javascript배열에서
모던 을 위한 다양한 Javascript+EX6 배열 문법 이해116분 2초 const data1 = [1, 2, "dave", null]; const data2 = [ { name: "Dave Lee", age: 30 }, { name: "Alex", age: 40 }, ]; const data3 = [ [1, 2, 3], [4, 5, 6], ]; console.log(data1[0]); console.log(data2[0].name); console.log(data3[0][0]);위 코드에서 마지막줄 console.log(data3[0][0]);만 결과가 나오지 않습니다.[0][1], [0][2], 등 나머지 index 번호를 적용했을 때 정상적으로 나오는데, [0][0]은 왜 결과가 누락되는걸까요?(undefined 라는 결과값도 나오지 않습니다.)
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인부탁드립니다!
upward070@gmail.com 권한요청드렸습니다!
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
모바일 화면 최적화 방법 질문드립니다!
선생님, 안녕하세요!모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요?조언 부탁드립니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
PDF파일은 어디있나요?
3강에서 비주얼 스튜디오 코드 사용법 강의에서 PDF파일 참고하라는 내용이 있는데 파일은 어디서 확인할 수 있나요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
codesandbox 업데이트..
codesandbox가 또 업데이트 된 것 같습니다..모던 html 기능과 배경지식 이해 강의 영상과 전혀 다른 화면이 나옵니다..사용법 업데이트 해 주시면 좋을 것 같습니다.!
-
미해결CSS 기본부터 활용까지
지금은 저 링크의 filter playground가 지원을안하는것 같아요~
생활코딩 내 링크통해 들어갔는데 제작자가 만든 다른사이트로 이동하더라구요. 근데 거기서도 영상 속 사이트는 이제 없나봐요. 혹시 찾으신 분 계시면 공유해주세요~
