묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
피그마 원본 다운로드
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 위의 사진에서 폴더는 어디서 다운로드 하면 될까용 ?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
모바일 웹 레이아웃 도움요청드립니다! (왕초보)
CSS 구조 문의드립니다.Wrapper를 이용해서 인증번호, 재발송, 우편번호 찾기 버튼을 화면 안으로 넣고 싶은데 어떻게 하는지를 도저히 모르겠습니다.. 아시는 분은 도와주시면 정말 감사하겠습니다.style.css 일부/* Import Local CSS */ @import url('/css/reset.css'); @import url('/css/variables.css'); * { font-family: var(--primary-kr); font-weight: 500; box-sizing: border-box; } body { margin: 0; font-family: var(--primary-kr); color: var(--dark-black); font-size: 14px; } .container { width: 100%; max-width: 393px; margin: 0 auto; padding: 16px; background-color: var(--white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; font-family: var(--primary-kr); } .phone-input-wrapper { display: flex; /* 플렉스 박스 설정 */ justify-content: space-between; } .phone-input-wrapper input[type="tel"] { width: 60%; /* 입력 필드가 가변적인 공간을 차지 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; height: 40px; /* 동일한 높이 */ box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */ } .phone-input-wrapper .btn-certification { width: 40%; /* 선택박스의 고정 너비 */ height: 40px; /* 입력 필드와 동일한 높이 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; /* 패딩 포함 */ } /* 인증번호 입력 필드 */ .auth-input-wrapper { display: flex; /* Flexbox로 가로 정렬 */ align-items: center; /* 세로 중앙 정렬 */ justify-content: space-between; width: 100%; /* 부모 요소의 너비를 꽉 채움 */ max-width: 393px; box-sizing: border-box; /* 패딩 포함 */ position: relative; /* 타이머 배치를 위해 필요 */ flex-wrap: wrap; } .auth-input-wrapper input { flex: 0; /* 입력 필드가 가용 공간을 차지 */ height: 40px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: 70%; /* 최소 너비 설정 */ } .auth-input-wrapper .timer { flex: 0; position: absolute; /* 입력 필드 내부 배치 */ right: 45%; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--alert-red); pointer-events: none; /* 클릭 불가 */ } .auth-input-wrapper .reset { display: flex; position: absolute; align-items: center; right: 40%; justify-content: center; text-decoration: none; /* 기본 링크 스타일 제거 */ margin-left: 10px; /* 타이머와의 간격 */ overflow: hidden; } .auth-input-wrapper .reset-link img { width: 16px; /* 아이콘 크기 */ height: 16px; } .auth-input-wrapper .reset-link:hover { background-color: var(--lightblue); /* 호버 시 색상 변경 */ transition: background-color 0.2s ease; } .auth-input-wrapper .btn-resend { flex: 1; height: 40px; font-size: 14px; color: white; background-color: var(--blue); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 60px; /* 버튼 최소 너비 */ } /* 주소 필드 래퍼 */ .address-wrapper { display: flex; align-items: center; width: 100%; /* 화면 너비에 맞춤 */ box-sizing: border-box; } .address-wrapper input[type="text"] { width: 60%; height: 40px; padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: calc(70% - 10px); /* 최소 너비 */ } .address-wrapper .btn-post-search { flex: 0 0 auto; /* 버튼 크기 고정 */ height: 40px; padding: 0 15px; font-size: 14px; color: white; background-color: var(--navybutton); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 100px; /* 버튼 최소 너비 */ } signup-email.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Signup Form --> <div class="signup-content"> <div class="signup-field"> <label for="username">아이디<em>*</em></label> <input type="text" id="username" placeholder="아이디 입력" required> </div> <div class="signup-field"> <label for="password">비밀번호<em>*</em></label> <input type="password" id="password" placeholder="영문+숫자+특수문자 8자 이상" required> </div> <div class="signup-field"> <label for="password-check">비밀번호 확인<em>*</em></label> <input type="password" id="password-check" placeholder="비밀번호 확인 입력" required> </div> <div class="signup-field"> <label for="name">이름<em>*</em></label> <input type="text" id="name" placeholder="이름 입력" required> </div> <div class="signup-field"> <label for="email"> 이메일<em>*</em> </label> <div class="email-input-wrapper"> <input type="email" id="email" name="email" placeholder="이메일 입력" required> <select name="email-domain" id="email-domain"> <option value="">선택하기</option> <option value="gmail.com">gmail.com</option> <option value="naver.com">naver.com</option> <option value="daum.net">daum.net</option> </select> <span class="dropdown-icon"></span> <!-- SVG 아이콘 위치 --> </div> </div> <div class="signup-field"> <label for="phone">휴대폰<em>*</em></label> <div class="phone-input-wrapper"> <input type="tel" id="phone" placeholder="숫자만 입력" required> <button class="btn-certification">인증번호</button> </div> </div> <div class="signup-field"> <label for="auth-code"></label> <div class="auth-input-wrapper"> <input type="text" id="auth-code" placeholder="인증번호 입력" required> <span class="timer">00:00</span> <a href="#" class="reset"> <img src="/images/reset.svg" alt="Reset Icon"> </a> <button class="btn-resend" type="button">재발송</button> </div> </div> <div class="signup-field"> <label for="address">주소<em>*</em></label> <div class="address-wrapper"> <input type="text" id="address" placeholder="주소 입력" required> <button class="btn-post-search">우편번호 찾기</button> </div> </div> <div class="signup-field"> <label for="address-detail"></label> <input type="text" id="address-detail"> </div> <div class="signup-field"> <label for="address-detail">상세주소<em>*</em></label> <input type="text" id="address-detail" placeholder="상세 주소 입력" required> </div> <p class="notice">배송지에 따라 상품 정보가 달라질 수 있습니다.</p> <div class="thirdline"></div> <!-- 위에 줄 --> </div> </body> </html> style.css
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
완성헸는데 javascript부분이 안되어 메일로 코드보내드려요
완성된 부분까지 코드를 메일로 첨부하였어요.javascript부분에서 scrollPos가 동작하지 않는 거 같아요~
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
강의듣다가 궁금해져서 문의 남깁니다. (빼꼼이 슬라이드 반응형)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님강의듣다가 궁금해져서 문의남깁니다.빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐.good-suggestion-items{ width:430px }말고어떤 값을 줘야될지 궁금합니다.
-
미해결스프링 프레임워크 입문자를 위한 따라하기
404에러나면서 웹페이지 접근되지 않는다면 아래처럼 해보는 것을 해보세요
404에러나면서 웹페이지 접근되지 않는다면아래처럼 해보는 것을 해보세요 https://velog.io/@jyysyl6/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4-%EC%98%A4%EB%A5%98-the-project-cannot-be-built-until-build-path-errors-are-resolved 저는 저렇게 해서 해결됬습니다.링크가 깨졌을 것을 방지해서 아래처럼 하는 것입니다. (1)해당 프로젝트 우클릭해서 [Properties] 들어가기(2)왼쪽 메뉴 중에서 Java Build Path에 들어가서 상단 메뉴 중 [Libraries]를 클릭한다(3)(unbound)로 뜨는 기존에 들어가있던 JRE는 삭제해주고 [Add Library]를 눌러서 JRE를 새로 추가해주면 된다(4)이중에서 [JRE System Library] 선택하고 [Next] 눌러서 넘어가기(5)그러면 추가는 것도 있고 다운받는 것도 있는데나는 워크스페이스에 설정해놨던 JRE가 보이길래 이걸로 선택해줬다체크박스 선택하고 [Finish]로 창닫기(6)제대로 추가됐는지 확인해주고 [Apply] -> [Apply and Close] 해줌
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
full reload 질문
선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
영상 싱크가 맞지 않습니다!
영상 싱크가 맞지 않습니다 ㅠㅠ 헤더영역에 특히 그렇습니다 ㅠ
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸
안녕하세요css 기초이론을 따라하여 (아이콘)cdn 주소 링크에 넣고 i 태그도 위에 맞게 넣었습니다. 근데 항상 저는 네모에 엑스박스친 오류 상자만 뜹니다.인강 당시와 cdn 주소가 변경된건지.. 알 수 있을까요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강평 작성이 안되네요..
안녕하세요 선생님SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma 강의를구매하고 섹션1all 과 섹션2 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다..ㄴ 수강평 버튼이 없습니다..
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
visual studio 2022 emmet
시험장 visual studio 2022에 emmet 설치 되어 있습니까?! -> Tab이 되지 않으면 기본 구문 외워서 다 쳐야 합니까?그리고, 시험장에 최신 버전 visual studio 2022 설치 되어 있습니까? 이때까지 visual studio 2019로 연습했었는데요.
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
비주얼 스튜디오 코드 Bracket Pair Colorizar 설치
비주얼 스튜디오 코드 필수 앱 설치 및 사용법 영상을 보고 있는데'Bracket Pair Colorizar' 이라는 프로그램이 기능 제공을 더 이상 하지 않는다고 적혀있습니다. 해당 프로그램 외에 어떤걸 설치 해야 하나요???
-
미해결스프링 프레임워크 입문자를 위한 따라하기
https://localhost:8080 접속 불가
접속하면 아래와 같이 브라우저와 콘솔에서 에러가 발생하고 접속이 되지 않습니다. 브라우저사이트에 보안 연결할 수 없음localhost에서 잘못된 응답을 전송했습니다.ERR_SSL_PROTOCOL_ERROR 콘솔11월 15, 2024 11:47:08 오전 org.apache.coyote.http11.Http11Processor service정보: HTTP 요청 헤더를 파싱하는 중 오류 발생 비고: HTTP 요청 파싱 오류들이 더 발생하는 경우 DEBUG 레벨 로그로 기록될 것입니다.java.lang.IllegalArgumentException: 메소드 이름에 유효하지 않은 문자가 발견되었습니다. HTTP 메소드 이름은 유효한 토큰이어야 합니다. at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:407) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:269) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:63) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:937) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1791) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:52) at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1190) at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:63) at java.lang.Thread.run(Unknown Source)
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항, 갤러리 tab보더
tab쪽 보더를 tab1과 tab2에 따로 보더를 주셨는데 한번에 줘도 될까요? 왜 따로주셨는지도 궁금해요.tabs > div { border: 1px solid #000; height: 169px; padding: 0 10px; }이런식으로 하는게 더 깔끔하지 않을까 싶어서요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
네비게이션 보더
영상에선 패스하셨지만네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
Beautify에 관해서
유튜브 보면서 비주얼 스튜디오 코드 환경설정 중인데 beautify가 '이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다.' 라는 알림문 뜹니다그래도 다운 받으면 확장 앱 부분에 노란색 경고 아이콘이 계속 뜨는데 이대로 두는게 맞는건가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
2025년 실기준비할때도 참고하면 좋을 강의일까요?!
아직 결제만하고 강의시청은 안한상태인데2025년 웹디자인개발기능사로 바뀌는데내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!?혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다.답변주시면 감사하겠습니다.!
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의 자료 요청합니다~
강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~kjj5421@naver.com으로 자료 요헝 드려도 될까요?
-
미해결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>
-
미해결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를 복사해서 붙여넣어도 적용되지 않습니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
PDF파일은 어디있나요?
3강에서 비주얼 스튜디오 코드 사용법 강의에서 PDF파일 참고하라는 내용이 있는데 파일은 어디서 확인할 수 있나요?
