묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
글로벌속성과 로컬속성_질문추가
학습관련 질문
-
해결됨HTML5 & CSS3 기초 문법 올인원
img와 video태그를 붙일 때
안녕하세요. 이미지와 비디오 src를 깨짐없이 붙이고 싶은데, 링크 주소를 복사하거나 폴더에 저장할 때 링크 주소를 그대로 붙여야 하나요? 제가 지금까지 끝에 jpg나 jpeg를 붙인채로 살짝 수정했는데도 확인하면 깨져있습니다. 무슨 문제일까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 작성 후 메뉴가 내려 오지 않습니다.
A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서style.css에.sub-menu{display: none; 후custom.js에$('.menu li').mouseenter(function(){$('.sub-menu').stop().slideDown()}) 하였는데 메뉴가 내려오지 않습니다.index.htmlstyle.csscustom.js파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
유효성검사에서오류가난거같은데 어떻케 수정을해야하나요 ,,,링크로첨부했습니다 ..
텍스트 입력 영역의 내용에 대한 결과 표시 - Nu Html Checker (w3.org)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
<!DOCTYPE html> 없어도 상관없나요?ㅠㅠ
e유형 중인데html 제일 윗부분<!DOCTYPE html>이걸 넣으면 slide 사진이 사라지고 footer가 올라오고저것만 없애면 완벽하게 잘 작동하는데없애도 상관없나요? 시험때도 상관없을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D3 visibility: hidden; 이걸 없애면 슬라이드가 보이는 문제!...
다른건 아니오라 작업하다가 원래 fade in / fade out 슬라이드 형식대로 써봤는데..visibility: hidden; 을 주석처리 하는순간 슬라이드가 작동되는 현상은 처음이라 적어봅니다!...제가 뭘 잘못건드렸는지 확인 한번만 부탁드려요!<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</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/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-img"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner 2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner 3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut 1"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^ <br><b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut 2"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none"><span>공지사항</span></a> <a href="#none"><span>갤러리</span></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.png" alt="gallery 1"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery 2"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery 3"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery 4"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery 5"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery 6"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery 7"><span>퍼블리셔 취업</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.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"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 br사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br><br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br><br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. <br><br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a href="#none"><div class="close-modal">닫기</div></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: #333333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ } .left { width: 200px; } header {} header > div { /* border: 1px solid blue; */ } .header-logo { height: 150px; line-height: 170px; } .navi { /* height: 400px; */ } .menu { list-style: none; width: 90%; margin: 20px auto; padding: 0; } .menu li { position: relative; } .menu li > a { padding: 7px; border: 1px solid black; display: block; transition: 0.5s; } .menu li:hover > a { background-color: #00000021; } .sub-menu { position: absolute; left: 100%; top: 0; width: calc(100vw - 209px); padding: 8px; background-color: #00000021; z-index: 10; display: none; } .sub-menu > a { width: 120px; display: inline-block; transition: 0.5s; text-align: center; } .sub-menu > a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:after { content: "|"; margin: 8px; } .spot-menu a:last-child:after { content: none; } .right { flex: 1; } .slide { position: relative; height: 400px; } .slide > div { /* border: 1px solid green; */ } .slide-img { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { visibility: hidden; position: absolute; height: inherit; top: 0; left: 0; width: 100%; animation: slide 10s linear infinite; opacity: 0; } .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: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } .slide-banner { top: 0; right: 0; position: absolute; width: 150px; height: 300px; float: right; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } .items {} .items > div { /* border: 1px solid pink; */ } .shortcut { /* border: 1px solid black; */ height: 200px; display: flex; align-items: center; gap: 25px; margin: 0 20px; } .shortcut > img {} .shortcut > a {} .shortcut h2 {} .shortcut p {} .shortcut p b {} .news { height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { width: 100px; text-align: center; display: inline-block; border: 1px solid black; margin-right: -6px; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #ddd; margin-bottom: -1px; padding: 4px; } .tabs {} .tabs > div {} .tab1 { background-color: #fff; border: 1px solid black; padding: 6px; } .tab1 a { border-bottom: 1px dashed black; padding: 6px; display: block; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { padding-right: 100px; float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid black; padding: 20px; height: 140px; text-align: center; /* box-sizing: border-box; */ } .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 img { width: 200px; } .tab2 a span { display: block; } .btn a.active { background-color: #fff; } footer { display: flex; } footer > div { /* border: 1px solid blue; */ height: 120px; } .footer-logo { width: 200px; line-height: 180px; } .footer-content { flex: 1; } .footer-content > div { /* border: 1px solid green; */ height: 60px; /* box-sizing: border-box; */ /* padding: 0 20px; */ } .footer-link { padding-top: 30px; box-sizing: border-box; } .footer-link > a:hover { text-decoration: underline; color: blue; } .footer-link a::after { content: "|"; margin: 0 8px; color: #ccc; } .footer-link a:last-child:after { content: none; } .copyright { /* padding-top: -100px; */ } .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000003b; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px; width: 500px; } .close-modal { float: right; border: 1px solid black; padding: 2px; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }); $('.menu li').mouseleave(function(){ $('.sub-menu').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(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
Number(activeLi) 형변환을 해야하는 이유?
if(Number(activeLi) < 0){ activeLi = Number(activeLi) + 260; //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화 slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click',transformPrev); if(Number(activeLi) === 0){ slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-prev-hover'); //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. slideNext.removeEventListener('click', transformPrev); } }let activeLi = classList.getAttribute('data-position');activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요... Number()로 형변환을 하지 않으면 어떻게 되나요 ?어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요? <ul class="class-list" data-position="0">쌍따옴표로 감싸면 다 문자로 인식되는건가요?강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
실전사이트 따라하고있는데 copyright부분 css에서 padding주면 사진첨부한거처럼 전체로 내려가는데 뭐가 문제일까요 ,,,??
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a실전연습</title> <link rel="stylesheet" href="css/실전a.css"> </head> <div class="container"> <header> <div class="heder-logo"> <a href="none"><img src="images/header-logo.PNG" alt="header logo"></a> </div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"> <img src="images/banner-1.jpg" alt="banner1"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-2.jpg" alt="banner2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/SNS.png" alt=""></a> </div> </footer> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; border: 1px solid #000; margin: auto; } header{ display: flex; justify-content: space-between; } header > div{ height: 100px; border: 1px solid #000; } .heder-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ height: 100px; border: 1px solid #000; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*Image & Text */ .heder-logo,.footer-logo{ line-height: 130px; } .copyright{ text-align: center; margin-top: 30px; line-height: 20px; }
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의자료 사이트 접근
강의자료 사이트 접속이 안되네요.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
안녕하세요. 강의 잘 듣고 있습니다. scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션이 있을까요?스크롤 한번 했을 때. 스르륵 멈출 수 있게요.
-
미해결제대로 파는 HTML CSS - by 얄코(Yalco)
SCSS나 다른 CSS 들도 다루시는지 여쭈어보고 싶습니다.
안녕하세요 강사님 방금 해당 강의를 구매하였는데요혹시 강의에서 일반적인 CSS 뿐만 아니라 다른 CSS (SCSS나 Tailwind CSS) 도 다루는지 여쭈어보고 싶습니다. 그리고 혹시 추후에 추가할 생각이 있으신지도 여쭈어보고 싶습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
추가 질문
https://www.inflearn.com/questions/961239/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EB%A9%B0-%EB%B0%B0%ED%8F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%9E%91%EB%8F%99%EC%9D%B4-%EC%95%88%EB%90%A8"프로젝트를 마치며 배포 페이지에서 업로드 작동이 안됨"이라는 제목의 질문글의 추가 질문입니다.=====================이전 질문 내용==========================================상품 업로드에 관한 이슈과정을 다 마치고, fly.io와 vercel.com을 통하여 배포한 페이지 중에서 상품 업로드가 제대로 이뤄지지 않습니다.github 주소 :https://github.com/arominddo/Inflearn_full_stack_boot_campvercel을 통해 배포된 web 어플리케이션 url :https://grab-market-client-ashen.vercel.app/ grab_market_web > src > upload > index.js에 코드 내용이 작성되어 있습니다. 배포된 페이지의 DB 초기화 문제프로젝트를 전부 마치면서, 다시 한번 fly.io에 최신 코드로 재배포를 해보고 실험을 해보았는데도, web에서 특정 상품을 업로드하거나(오류가 나지 않았을 당시), 상품 구매하기 기능을 통하여 soldout 값을 1로 바꿔줬음에도,약 5분이 지나면 DB가 배포 됐을 당시의 내용으로 계속 초기화가 됩니다.해결 방안이 궁금합니다.ex) A라는 물건 업로드 -> 5분 지남 -> 새로고침 해보면 A라는 물건이 리스트에서 삭제ex) B라는 물건 구매 하기 버튼 클릭 -> soldout 값 1로 변경 -> 약 5분 지남 -> 다시 soldout 값 0으로 복귀=================================================================================== 위와 같은 이전 질문 내용에서 1번에 해당하는 답변으로, 어떤 오류 로그가 뜨냐고 물어보셔서 여기 다시 남겨봅니다. 위 사진은 vercel을 통해 배포 된 Web에서 upload를 시도하면 나오는 오류 로그입니다. upload 시도 시에 fly.io 모니터화면에서 볼 수 있는 오류입니다.참고로, Local 환경에서 같은 코드로 npm start로 실행된 서버와 web에서는 업로드 기능이 잘 작동됩니다. 재부팅에 관련된 로그라고 생각되는 부분 캡쳐해서 보내드립니다. 이와 같은 로그가 뜨면서 배포된 서버의 내용이 배포 시점으로 돌아가는 것 같습니다.그런데 로그를 보자면 reboot라는 것이 단순히 서버를 죽였다가 다시 올리는 것으로 생각 되는데, 배포된 서버가 돌아감에 있어서 업로드 되거나 값이 변했던 내용들이 다 사라지는 것이 이해가 되지 않습니다ㅠㅠ
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리슬라이드제작
css로 슬라이드제작은 그래도 따라갈만한데 제이쿼리는 도통어렵네요,,, d형e형도 css로 슬라이드작업을하면 안되는걸까요 ?? d형e형 레이아웃강의도못들었는데 갑자기 d형으로 넘어가서 당황했어요 ,,, 어떤거부터 들어야하는게 좋을까요 ,,,? 그리고 시험장에가서도 css로 슬라이더 작업하면 안되는걸까요 ??
-
미해결따라하며 배우는 HTML, CSS
nth child에 대한 개념
nth child에 대한 개념이 설명이 안되고 , 그냥 코드를 작성하면서 지나가는 것 같은데요..이 부분에 대한 설명은 이후에 나오는건가요 ?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scroll-timeline.js 파일
안녕하세요!강의 재밌게 잘 보고 있습니다 :Dscroll-timeline.js 파일은 어디서 가져오신 건가요?세팅부터 혼자서 해보려고 했는데scroll-timeline 저장소여기서 아무리 찾아봐도 안 보이네요..!Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..!또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
html과 css 구문 모두 똑같은데 sub-menu가 슬라이드 뒤에 숨어요ㅠ
해당 부분 html-<header> <article class="header-logo">로고</article> <article class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> </ul> </article> </header>해당 부분 css-.menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; color: #000; transition: 0.3s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub > a { display: block; color: #fff; padding: 5px; transition: 0.3s; } .sub a:hover { background-color: #000; color: #fff; }인터넷 찾아보고 z-index도 넣어봤는데 소용이 없습니다ㅠㅠ
-
미해결처음 만난 리액트(React)
7강 실습
react-create-app이 안돼서 vite를 사용해서 실습하고 있는데 코드를 똑같이 작성했지만 빈화면만 뜹니다. 무엇이 문제인지 모르겠어요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
body 구문 형식 어떻게 작성해야 합니까?
[2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리] 과정에서 body 구분 형식과 다른 강의 가로 고정형 레이아웃 HTML+CSS 구조만들기 등에서의 body 구문 형식이 조금 다른데 body 구문 어떤 식으로 작성해야 합니까?
-
미해결처음 만난 리액트(React)
(실습) 직접 리액트 연동하기 js 질문
안녕하세요. 리액트 연동하기 강의에서 MyButton.js 의 적용이 안 되어 페이지에 버튼이 나타나지 않습니다. 다른 분들 질문도 보고 @17에서 @17.0.0 으로도 해보고 버전의 문제인가 싶어 18.2.0 으로도 해 봤는데 안 되네요... 어떤 점이 문제인지 알려주시면 감사하겠습니다!
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
프로젝트 고민 해결이 안되어 다시 올립니다.
<html> <head> <meta charset="UTF-8"> <title>회원가입</title> <meta name = "keyword" content = "회원가입, html"> <link rel = "stylesheet" type = "text/css" href = "style/project.css"> </head> <body> <header> <h1>회원가입</h1> <hr/> </header> <form action = "project.html" method = "POST"> <fieldset> <legend> 계정 정보 </legend> <div class = "id"> <label for = "id-account" id = "id">아이디(*)</label> <input type = "text" name = "login_id" id = "id-account" required = "required"> </div> <div class="alert-container"> <span class="alert-message" id="account-alert">TEST</span> </div> <button type = "submit" id = doublecheck-button>중복 확인 </button> <div class = "password"> <label for = "id-password">비밀번호(*)</label> <input type = "password" name = "password" id = "id-password" required = "required"> <span class = "alert-message">TEST</span> </div> <span class = "alert-message">TEST</span> <div class = "repassword"> <label for = "id-repassword">비밀번호 확인(*)</label> <input type = "password" name = "repassword" id = "id-repassword" required = "required"> <span class = "alert-message">TEST</span> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>개인 정보</legend> <div class="form-item"> <label for = "id-name">닉네임(*)</label> <input type = "text" name = "nickname" id = "id-nickname" required = "required"> </div> <div class = form-item> <label>이메일(*)</label> <div class = email-inputs> <input class="box" name = "email" id="domain-txt" type="text"/> <span class="at-symbol">@</span> <input class="box" name = "email_select" id="domain-txt1" type="text"/> <select class="box" name = "email_select" id="domain-list"> <option value="type">직접 입력</option> <option value="yu.ac.kr">yu.ac.kr</option> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> </select> </div> </div> <div> <label>대학, 학과(*)</label> <select name = "department" id = "university" onchange = "changeDepartment()" required = "required"> <option> 대학 선택 </option> <option> 문과대학 </option> <option> 인문대학 </option> <option> 자연과학대학 </option> <option> 공과대학 </option> <option> 기계IT대학 </option> <option> 소프트웨어융합대학 </option> <option> 사회과학대학 </option> <option> 경영대학 </option> <option> 의과대학 </option> <option> 약학대학 </option> <option> 생명응용과학대학 </option> <option> 생활과학대학 </option> <option> 사범대학 </option> <option> 음악대학 </option> <option> 예술대학 </option> </select> <select name = "department_select" id = "department" required = "required"> <option> 학과 선택 </option> </select> </div> <div> <label>성별(*)</label> <input type = "radio" name = "gender" id = "id-gender-male"/ required = "required" value = "male"> <label for = "id-gender-male">남</label> <input type = "radio" name = "gender" id = "id-gender-female"/ required = "required" value = "female"> <label for = "id-gender-female">여</label> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>선택 입력 사항</legend> <div class = "phone"> <label>휴대전화 번호</label> <select name = "memberPhone_sub"> <option> 010 </option> </select> <input type = "text" name = "memberPhone" id = "memberPhone"> </select> </div> </fieldset> <div> <input type = "checkbox" name = "agree" id = "id-agree"/ required = "required"> <label for = "id-agree"> 개인정보 수집에 동의합니다. </label> </div> <button type = "submit">가입하기 </button> </form> </body> <script type ="text/javascript" src = "scripts/project.js"></script> </html>@media screen and (max-width: 600px) { .id { flex-direction: row; align-items: flex-start; } #id-account { margin-top: 10px; } } h1 { text-align: center; font-size: 25pt; font-weight: 500; } legend { text-align: center; font-weight: 300; position: relative; } fieldset { display: flex; flex-direction: column; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } div{ font-weight: 300; line-height: 250%; padding: 5px; } fieldset { line-height: 500%; } .required-text{ font-size: 100%; color: #FF0000; font-weight: bold; } .phone{ justify-content: center; } fieldset { display: flex; flex-wrap: wrap; } .alert-message { color: #FF0000; font-size: 14px; font-weight: 900; position: relative; } .alert-container { position: absolute; top: -20px; margin-right: 100px; } .submit-button { width: 100px; } .id, .password, .repassword { align-items: center; display: flex; margin-right: 1100px; } .id label, .password label, .repassword label { flex: 1; } .id input[type="text"], .password input[type="password"], .repassword input[type="password"] { flex: 1; } select.box { flex: 0; display: flex; align-items: center; margin-right: 800px; } .id-nickname{ margin-right: 500px; } option { font-size: 8px; } .info .box#domain-list option { font-size: 8px; background-color: #ffffff; } .at-symbol { margin: 0 5px; } .form-item label[for="id-name"] { margin-right: 5px; } .form-item { display: flex; align-items: center; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } .email-label { display: flex; align-items: center; } .email-inputs { display: flex; align-items: center; } /*중복확인 기능 버튼*/ button[type="submit"] { width: 100px; /* 적당한 가로 길이로 지정 */ }window.addEventListener('load', function() { clearMessages(); var formElem = document.querySelector('form'); formElem.onsubmit = submitForm; }); function clearMessages(){ var messages = document.getElementsByClassName('alert-message'); for(var i = 0; i < messages.length; i++){ messages[i].style.display = 'none'; } } function showMessage(inputElement, message){ var messageElem = inputElement.parentNode.querySelector('.alert-message'); messageElem.style.display = 'block'; messageElem.innerText = message; inputElement.focus(); } function submitForm() { //acount info var accountInput = document.querySelector('input[name="login_id"]'); var passwordInput = document.querySelector('input[name="password"]'); var passwordConfirmInput = document.querySelector('input[name="repassword"]'); var nickNameInput = document.querySelector('input[name="nickname"]'); //select, radio. checkbox var departmentInput = document.querySelector('select[name="department"]'); var departmentSelectInput = document.querySelector('select[name="department_select"]'); var telephoneInput = document.querySelector('select[name="memberPhone_sub"]'); var telephone2Input = document.querySelector('input[name="memberPhone"]'); var radioInput = document.querySelector('input[name="gender"]:checked'); var checkInput = document.querySelector('input[name="agree"]'); var emailIdInput = document.querySelector('#domain-txt'); var emailDomainInput = document.querySelector('#domain-txt1'); var emailDomainSelect = document.querySelector('#domain-list'); console.log("아이디:", accountInput.value); console.log("비밀번호:", passwordInput.value); console.log("비밀번호 확인:", passwordConfirmInput.value); console.log("닉네임:", nickNameInput.value); console.log("대학 선택:", departmentInput.value); console.log("학과 선택:", departmentSelectInput.value); console.log("휴대전화 번호 앞자리:", telephoneInput.value); console.log("휴대전화 번호:", telephone2Input.value); console.log("성별:", radioInput.value); console.log("동의여부:", checkInput.checked); var emailDomain = emailDomainSelect.value === 'type' ? emailDomainInput.value : emailDomainSelect.value; var email = emailIdInput.value + '@' + emailDomain; console.log("이메일:", email); var success = true; if (accountInput.value.length < 6) { showMessage(accountInput, '다시 설정해주세요.'); success = false; } if (passwordInput.value.length < 8) { showMessage(passwordInput, '다시 설정해주세요.'); success = false; } if (passwordConfirmInput.value !== passwordInput.value) { showMessage(passwordConfirmInput, '비밀번호를 동일하게 입력해주세요.'); success = false; } return success; } const domainInputEl = document.querySelector('#domain-txt1') const domainListEl = document.querySelector('#domain-list') // select 옵션 변경 시 domainListEl.addEventListener('change', (event) => { // option에 있는 도메인 선택 시 if(event.target.value !== "type") { // 선택한 도메인을 input에 입력하고 disabled domainInputEl.value = event.target.value domainInputEl.disabled = true } else { // 직접 입력 시 // input 내용 초기화 & 입력 가능하도록 변경 domainInputEl.value = "" domainInputEl.disabled = false } }) function changeDepartment() { // 첫 번째 select 요소의 값을 가져옵니다. var university = document.getElementById("university").value; // 두 번째 select 요소의 값을 초기화합니다. document.getElementById("department").innerHTML = ""; // 대학 소속에 따라 다른 학과 종류를 보여줍니다. if (university === "문과대학") { // 대학1의 학과 종류를 추가합니다. var option1 = document.createElement("option"); option1.text = "중국언어문화학과"; document.getElementById("department").add(option1); } else if (university === "인문대학") { // 대학2의 학과 종류를 추가합니다. var option2 = document.createElement("option"); option2.text = "국어국문학과"; document.getElementById("department").add(option2); var option3 = document.createElement("option"); option3.text = "일어일문학과"; document.getElementById("department").add(option3); var option4 = document.createElement("option"); option4.text = "영어영문학과"; document.getElementById("department").add(option4); var option5 = document.createElement("option"); option5.text = "유럽언어문화학부"; document.getElementById("department").add(option5); var option6 = document.createElement("option"); option6.text = "철학과"; document.getElementById("department").add(option6); var option7 = document.createElement("option"); option7.text = "역사학과"; document.getElementById("department").add(option7); var option8 = document.createElement("option"); option8.text = "문화인류학과"; document.getElementById("department").add(option8); } else if (university === "자연과학대학") { // 대학3의 학과 종류를 추가합니다. var option9 = document.createElement("option"); option9.text = "수학과"; document.getElementById("department").add(option9); var option10 = document.createElement("option"); option10.text = "통계학과"; document.getElementById("department").add(option10); var option11 = document.createElement("option"); option11.text = "물리학과"; document.getElementById("department").add(option11); var option12 = document.createElement("option"); option12.text = "화학과"; document.getElementById("department").add(option12); var option13 = document.createElement("option"); option13.text = "생명과학과"; document.getElementById("department").add(option13); } else if (university === "공과대학") { // 대학3의 학과 종류를 추가합니다. var option14 = document.createElement("option"); option14.text = "건설시스템공학과"; document.getElementById("department").add(option14); var option15 = document.createElement("option"); option15.text = "환경공학과"; document.getElementById("department").add(option15); var option16 = document.createElement("option"); option16.text = "도시공학과"; document.getElementById("department").add(option16); var option17 = document.createElement("option"); option17.text = "건축학과"; document.getElementById("department").add(option17); var option18 = document.createElement("option"); option18.text = "신소재공학과"; document.getElementById("department").add(option18); var option19 = document.createElement("option"); option19.text = "화학공학과"; document.getElementById("department").add(option19); var option20= document.createElement("option"); option20.text = "파이버시스템공학과"; document.getElementById("department").add(option20); } else if (university === "기계IT대학") { // 대학3의 학과 종류를 추가합니다. var option21= document.createElement("option"); option21.text = "기계공학과"; document.getElementById("department").add(option21); var option22= document.createElement("option"); option22.text = "전기공학과"; document.getElementById("department").add(option22); var option23= document.createElement("option"); option23.text = "전자공학과"; document.getElementById("department").add(option23); var option24= document.createElement("option"); option24.text = "컴퓨터공학과"; document.getElementById("department").add(option24); var option25= document.createElement("option"); option25.text = "정보통신공학과"; document.getElementById("department").add(option25); var option26= document.createElement("option"); option26.text = "미래자동차공학과"; document.getElementById("department").add(option26); var option27= document.createElement("option"); option27.text = "로봇기계공학과"; document.getElementById("department").add(option27); var option28= document.createElement("option"); option28.text = "로봇공학과"; document.getElementById("department").add(option28); var option29= document.createElement("option"); option29.text = "파이버시스템공학과"; document.getElementById("department").add(option29); } else if (university === "소프트웨어융합대학") { // 대학3의 학과 종류를 추가합니다. var option30 = document.createElement("option"); option30.text = "소프트웨어융합학부"; document.getElementById("department").add(option30); }else if (university === "사회과학대학") { // 대학3의 학과 종류를 추가합니다. var option31 = document.createElement("option"); option31.text = "정치외교학과"; document.getElementById("department").add(option31); var option32 = document.createElement("option"); option32.text = "행정학과"; document.getElementById("department").add(option32); var option33 = document.createElement("option"); option33.text = "심리학과"; document.getElementById("department").add(option33); var option34 = document.createElement("option"); option34.text = "사회학과"; document.getElementById("department").add(option34); var option35 = document.createElement("option"); option35.text = "미디어커뮤니케이션학과"; document.getElementById("department").add(option35); var option36 = document.createElement("option"); option36.text = "경찰행정학과"; document.getElementById("department").add(option36); var option37 = document.createElement("option"); option37.text = "군사학과"; document.getElementById("department").add(option37); }else if (university === "경영대학") { // 대학3의 학과 종류를 추가합니다. var option38 = document.createElement("option"); option38.text = "경제금융학부"; document.getElementById("department").add(option38); var option39 = document.createElement("option"); option39.text = "경영학과"; document.getElementById("department").add(option39); var option40 = document.createElement("option"); option40.text = "무역학과"; document.getElementById("department").add(option40); var option41 = document.createElement("option"); option41.text = "회계세무학과"; document.getElementById("department").add(option41); var option42 = document.createElement("option"); option42.text = "항공운송학과"; document.getElementById("department").add(option42); var option43 = document.createElement("option"); option43.text = "산업경영학과"; document.getElementById("department").add(option43); }else if (university === "의과대학") { // 대학3의 학과 종류를 추가합니다. var option44 = document.createElement("option"); option44.text = "의예과"; document.getElementById("department").add(option44); }else if (university === "약학대학") { // 대학3의 학과 종류를 추가합니다. var option45 = document.createElement("option"); option45.text = "약학부"; document.getElementById("department").add(option45); }else if (university === "생명응용과학대학") { // 대학3의 학과 종류를 추가합니다. var option46 = document.createElement("option"); option46.text = "식품경제외식학과"; document.getElementById("department").add(option46); var option47 = document.createElement("option"); option47.text = "원예생명과학과"; document.getElementById("department").add(option47); var option48 = document.createElement("option"); option48.text = "식품공학과"; document.getElementById("department").add(option48); var option49 = document.createElement("option"); option49.text = "생명공학과"; document.getElementById("department").add(option49); var option49 = document.createElement("option"); option49.text = "의생명공학과"; document.getElementById("department").add(option49); var option50 = document.createElement("option"); option50.text = "조경학과"; document.getElementById("department").add(option50); var option51 = document.createElement("option"); option51.text = "산림자원학과"; document.getElementById("department").add(option51); }else if (university === "생활과학대학") { // 대학3의 학과 종류를 추가합니다. var option52 = document.createElement("option"); option52.text = "가족주거학과"; document.getElementById("department").add(option52); var option53 = document.createElement("option"); option53.text = "주거환경학과"; document.getElementById("department").add(option53); var option54 = document.createElement("option"); option54.text = "식품영양학과"; document.getElementById("department").add(option54); var option55 = document.createElement("option"); option55.text = "체육학과"; document.getElementById("department").add(option55); var option56 = document.createElement("option"); option56.text = "의류패션학과"; document.getElementById("department").add(option56); var option57 = document.createElement("option"); option57.text = "휴먼서비스학과"; document.getElementById("department").add(option57); }else if (university === "사범대학") { // 대학3의 학과 종류를 추가합니다. var option58 = document.createElement("option"); option58.text = "국어교육과"; document.getElementById("department").add(option58); var option59 = document.createElement("option"); option59.text = "영어교육과"; document.getElementById("department").add(option59); var option60 = document.createElement("option"); option60.text = "한문교육과"; document.getElementById("department").add(option60); var option61 = document.createElement("option"); option61.text = "수학교육과"; document.getElementById("department").add(option61); var option62 = document.createElement("option"); option62.text = "유아교육과"; document.getElementById("department").add(option62); var option63 = document.createElement("option"); option63.text = "특수체육교육과"; document.getElementById("department").add(option63); }else if (university === "음악대학") { // 대학3의 학과 종류를 추가합니다. var option64 = document.createElement("option"); option64.text = "음악과"; document.getElementById("department").add(option64); var option65 = document.createElement("option"); option65.text = "성악과"; document.getElementById("department").add(option65); var option66 = document.createElement("option"); option66.text = "기악과"; document.getElementById("department").add(option66); }else if (university === "예술대학") { // 대학3의 학과 종류를 추가합니다. var option67 = document.createElement("option"); option67.text = "회화과"; document.getElementById("department").add(option67); var option68 = document.createElement("option"); option68.text = "트랜스아트과"; document.getElementById("department").add(option68); var option69 = document.createElement("option"); option69.text = "시각디자인학과"; document.getElementById("department").add(option69); var option70 = document.createElement("option"); option70.text = "산업디자인학과"; document.getElementById("department").add(option70); var option71 = document.createElement("option"); option71.text = "생활제품디자인학과"; document.getElementById("department").add(option71); var option72 = document.createElement("option"); option72.text = "음악학과"; document.getElementById("department").add(option72); }else{ // 대학3의 학과 종류를 추가합니다. var option73 = document.createElement("option"); option73.text = ""; document.getElementById("department").add(option73); } } /*중복 기능 생성*/ const checkDuplicate = () => { const input = document.getElementById('id-account'); const value = input.value; // 중복 확인 여부 체크 로직 if (value === '중복') { document.getElementById('account-alert').innerHTML = '중복된 아이디입니다.'; } else { document.getElementById('account-alert').innerHTML = ''; } } document.getElementById('id-account').addEventListener('keyup', checkDuplicate);하라는 대로 했는데도 바뀌는 게 없어서 다시 올립니다!!제가 첫 번째 질문으로 아이디(*)의 위치가 label이 화면을 줄여도 그대로이면 좋겠다고 했으나 화면을 줄이면 글씨가 세로로 바뀌진 않아도 세로로 정렬이 됩니다. 그렇다고 가로로 정렬이 되게 바꾸어도 다시 화면을 줄여도 세로로 글씨가 바뀝니다. alert-message가 나왔을 경우 label과 그 input창의 위치가 바뀝니다. 여전히 그대로라서 해결책을 주셨으면 합니다.이 마지막 사진이 1,2번 기능을 넣더라도 그대로 유지되며 오른쪽에 글씨가 들어가더라도 화면의 크기를 줄이더라도 이 형태가 그대로 유지되었으면 합니다.
