173만명의 커뮤니티!! 함께 토론해봐요.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 수업 내용에는 없는 질문이긴 한데ㅠㅠ SCSS 에서 @keyframes 사용은 어려운건가요? 구글링한 정보로는 적용이 안되서요ㅠㅠ
미해결
스프링 프레임워크는 내 손에 [스프2탄]
ajax로 API통신을 할 때 키값을 하드코딩하면 클라이언트에게 노출이 되지 않나요? 관리방법이 어떤게 있을까요? 생각하고있는건, properties에 등록하고, 서비스로직에서 가져와 보내는걸 고려하고있습니다. 다른분께 얼핏 듣기로는 실무에서는 AWS에서 가져온다는데, 그건 어떤 방법일까요?
미해결
스프링 프레임워크는 내 손에 [스프2탄]
강사님을 따라서 작업 중이지만 프로젝트 생성 부터 SpringMVC 프로젝트가 없다는 것을 알게 되었고 그 중에 한 학생분에게 주신 조언대로(질문&답변에 달아주신) eGov Web Project 생성 후 필요한 부분인 servlet-context.xml , home.jsp , HomeController , web.xml , root-context.xml 등을 생성하여 작업하였습니다. 최종적으로 이런 화면이 나오는데 좀 더 구체적으로 상세하게 어떤 식으로 프로젝트를 생성해야할지 안내해주시면 감사하겠습니다ㅠㅠ
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
안녕하세요 ~ 배경색은 어떻게 설정하면 될까요 ?? shift + r 누르고 도형을 만드니까 배경색이 똑같이 흰색이라서 구분이 안되네요 ㅠ
미해결
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부분에서 scrollPos가 동작하지 않는 거 같아요~
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의듣다가 궁금해져서 문의남깁니다. 빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐 .good-suggestion-items{ width:430px }말고 어떤 값을 줘야될지 궁금합니다.
미해결
스프링 프레임워크 입문자를 위한 따라하기
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)
선생님 처럼 영상을 보고 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 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다.. ㄴ 수강평 버튼이 없습니다..
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
시험장 visual studio 2022에 emmet 설치 되어 있습니까? ! -> Tab이 되지 않으면 기본 구문 외워서 다 쳐야 합니까? 그리고, 시험장에 최신 버전 visual studio 2022 설치 되어 있습니까? 이때까지 visual studio 2019로 연습했었는데요.
미해결
퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
비주얼 스튜디오 코드 필수 앱 설치 및 사용법 영상을 보고 있는데 'Bracket Pair Colorizar' 이라는 프로그램이 기능 제공을 더 이상 하지 않는다고 적혀있습니다. 해당 프로그램 외에 어떤걸 설치 해야 하나요???
미해결
스프링 프레임워크 입문자를 위한 따라하기
접속하면 아래와 같이 브라우저와 콘솔에서 에러가 발생하고 접속이 되지 않습니다. 브라우저 사이트에 보안 연결할 수 없음 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)
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
tab쪽 보더를 tab1과 tab2에 따로 보더를 주셨는데 한번에 줘도 될까요? 왜 따로주셨는지도 궁금해요 .tabs > div { border: 1px solid #000; height: 169px; padding: 0 10px; } 이런식으로 하는게 더 깔끔하지 않을까 싶어서요
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
영상에선 패스하셨지만 네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?
미해결
퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
유튜브 보면서 비주얼 스튜디오 코드 환경설정 중인데 beautify가 '이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다.' 라는 알림문 뜹니다 그래도 다운 받으면 확장 앱 부분에 노란색 경고 아이콘이 계속 뜨는데 이대로 두는게 맞는건가요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
아직 결제만하고 강의시청은 안한상태인데 2025년 웹디자인개발기능사로 바뀌는데 내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!? 혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다. 답변주시면 감사하겠습니다.!
