묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항, 갤러리 tab보더
tab쪽 보더를 tab1과 tab2에 따로 보더를 주셨는데 한번에 줘도 될까요? 왜 따로주셨는지도 궁금해요.tabs > div { border: 1px solid #000; height: 169px; padding: 0 10px; }이런식으로 하는게 더 깔끔하지 않을까 싶어서요
-
해결됨[코드캠프] 시작은 프리캠프
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
css:*{ box-sizing: border-box;}.box2{display: flex;align-items: center;margin: 10px auto;flex-direction: column;justify-content: space-evenly;}.box {width: 300px;height: 1px;border: 1px solid rgb(199, 199, 199);display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;padding: 30px;margin: 5px auto;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}.box3 {display: flex;flex-direction: row;justify-content: row;}select {border: 1px solid black;}.pb{width: 500px;height: 800px;border: 1px solid gray;display: flex;flex-direction: column;justify-content: space-around;align-items: center;padding: 30px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;} html:<!DOCTYPE html><html lang="en"><head><title>회원가입</title><link href="./02-signup.css" rel="stylesheet" /></head><body><div class="pb"><h2 class="box2">회원가입</h2><input type="text" placeholder="이메일을 입력해주세요"class="box"><br><br><input type="text" placeholder="이름을 입력해주세요"class="box"><br><br><input type="password" placeholder="비밀번호를 입력해주세요" class="box"><br><br><input type="password" placeholder="비밀번호를 다시 입력해주세요" class="box"><br><br><select><option disabled="true" selected="true">지역을 선택하세요</option><option>서울</option><option>경기</option><option>인천</option></select><br><br><input type="radio" name="gender" class="box3"><span class="box3">여성</span><input type="radio" name="gender" class="box3"><span class="box3">남성</span><br><br><input type="checkbox"> 이용약관 동의합니다<hr><button class="box">가입하기</button></div><!-- <input type="button" value="가입하기2"> 예전에 사용했으나 커스텀하기 어려웠음 --></body></html> 어디가 문제 인지 알려주시면 감사하겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
네비게이션 보더
영상에선 패스하셨지만네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
내용입력할때 p안쓰고 span쓰는 이유가 있을까요
내용을 입력하실때 <p>태그를 안쓰고 <span>태그를 쓰신다음 display:block으로 하신 이유가 있을까요?
-
미해결CSS 기본부터 활용까지
<style>에서 nav,aside
<style>에서 nav,aside 따로 할 때는 .container nav, .container aside로 하고 두 개 같이 묶어서 할 때는 그냥 nav,aside로 쓰는 지 궁금합니다..container를 안 붙여도 똑같이 실행되가지고요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인접선택자에 대한 질문드립니다!
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide) 강의에서 인접선택자로 아래 코드와 같이 input 태그의 해당 id값을 체크 시 .slide의 자식인 .slide-inner에 left값을 변경해준다고 표시되어져있습니다.여기에서 ~가 없으면 왜 코드가 제대로 작동되지 않는건가요? ~ 가 없으면 input부분에 해당하는 태그의 자식요소만 올 수 있다는 걸로 이해하는게 맞나요??(아래 코드는 질문에 필요한 html과 css 부분만 올렸습니다)(+ 항상 질문에 답변 달아주셔서 감사합니다!ㅎㅎ)input[id=tab1]:checked ~ .slide .slide-inner { left: 0; } input[id=tab2]:checked ~ .slide .slide-inner { left: -300px; } input[id=tab3]:checked ~ .slide .slide-inner { left: -600px; } /*----------------------------------------*/ <body> <div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="slide"> <div class="slide-inner"> <a href="#none1"><img src="images/slide-01.jpg"></a> <a href="#none2"><img src="images/slide-02.jpg"></a> <a href="#none3"><img src="images/slide-03.jpg"></a> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </body>
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
Beautify에 관해서
유튜브 보면서 비주얼 스튜디오 코드 환경설정 중인데 beautify가 '이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다.' 라는 알림문 뜹니다그래도 다운 받으면 확장 앱 부분에 노란색 경고 아이콘이 계속 뜨는데 이대로 두는게 맞는건가요?
-
미해결나만의 포트폴리오 웹페이지 만들기
동영상을 최신버전에 맞게 업그레이드 해주시거나 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되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
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 입니다
