묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[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번 기능을 넣더라도 그대로 유지되며 오른쪽에 글씨가 들어가더라도 화면의 크기를 줄이더라도 이 형태가 그대로 유지되었으면 합니다.
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
참고자료
안녕하세요,pdf 192페이지 내용 "수강생 참고자료에서 다운받을 수 있습니다." 라고 나와있는데자료 압축 풀면 animation 폴더 빼고 나머지는 빈폴더인데, 제가 못찾는 걸까요?확인 부탁드립니다.
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
프로젝트 고민 다시올립니다.
1. 전체 화면으로는 이렇게 잘 뜨는데 화면 크기를 줄였을 경우에는 이렇게 뜹니다. input 창이 왼쪽으로 이동하면서 아이디(*), 비밀번호(*)가 세로로 바뀌는데 이를 위한 해결책을 부탁드립니다.2. 이와 같이 ' alert-message'가 발생할 경우, input창이 왼쪽으로 또한 밀리면서 세로로 바뀝니다. 이에 대해 해결책을 코드를 통해 부탁드립니다.그리고 중복 확인 기능을 추가 시키려 하는데 js으로 만들 수 있나요? 만들 수 있다면 알려주시면 감사하겠습니다.<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> 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; } .alert-container { display: flex; flex-direction: column; } .submit-button { width: 100px; } .id, .password, .repassword { display: flex; align-items: center; 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); } } 코드까지 추가합니다. 직접 실행시켜보시고 해결책알려주세요 ㅠㅠㅠ
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
draggable 관련 질문입니다.
<h1 draggable="true">움직일 수 있는 태그 </h1> 에서 드래그가 작동하지 않습니다 어떤 문제일까요...?
-
해결됨떠먹는 Three.js
강의 영상에서 보이는 색과 다른 색상이 나옵니다.
과일과 나무 만들기 실습 중에 있습니다. 그런데 강의에서 보이는 bodyMaterial과 THREE.DirectionalLight에 들어가는 색상 코드를 그대로 사용했는데 색이 다르게 나오는 건 왜 그런 건가요..?이전 강의들에서도 색상이 다르게 나왔었습니다.
-
미해결자바스크립트 : 기초부터 실전까지 올인원
타임즈뉴스 401에러
잘 되고 있다가 카테고리별 검색에 필요한 URL 입력 하면서부터 에러가 났어요. const getNewsByTopic = (event) => { console.log("클릭됨", event.target.textContent); let topic=event.target.textContent.toLowerCase() let url=new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&page_size=10&topic=${topic}`); console.log(url) }선생님 왜 에러가 난건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git 수업 부분 오류 발생했습니다
git remote add origin https://github.com/JIWONKIMS/grab-market-client.git git branch -M main git push -u origin main터미널에 입력했을 때 마지막 git push -u origin main 부분을 실행하면 아래 에러가 뜹니다fatal: failed to load library 'libcurl-4.dll' 에러 해결법이 뭔가요?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
다음 버튼을 누르면 다음질문으로 넘어가게 만들고 싶어요.
안녕하세요.강의 잘 듣고 있습니다.다음 문제를 넘어갈때 답을 고르는게 아니라다음 버튼을 만들어서 그 버튼을 누르면 넘어가게 만들고 싶은데요. 어떻게 코드를 짜면 될지 너무 고민입니다 ㅠㅠ 혹시 알려주실 수 있나요? 간단하게 어떤 방식으로 짜면 된다라는 힌트라도 주시면 감사하겠습니다 ㅠㅠ
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
연봉 질문합니다.
신입 식대포함 연봉2700인데 가야할지 고민입니다..식대포함인걸 모르고 있었는데 고민이네요 조언 부탁드립니다. 그 외의 조건은 괜찮다고 생각합니다
-
미해결처음 만난 리액트(React)
코드 에러입니다.
안녕하세요. 혹시 이 부분에서 어떤 에러가 있는지 알 수 있을까요?
-
미해결자바스크립트 : 기초부터 실전까지 올인원
to do list
선생님 수업 너무 재미있어서 열심히 듣고 있습니다.선생님 to do list를 모두 따라하고 슬라이드 메뉴도 따러서 했는데요, 질문이 있습니다.값을 입력하고 플러스 버튼을 클릭하면 All 이라는 탭에 메뉴바가 보이게 하고싶은데 어떻게 해야하는지 아무리 고민을 해봐도 답을 찾지 못해서 질문드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D3 유형 우측 메가 메뉴 질문
안녕하세요저는 전에 배우던 스타일이 있어서메뉴 만들때.menu를 .gnb로 하고.sub-menu를 div로 대신 ul로 해서 .lnb로 만듭니다.이대로 스타일 적용하고 메가 메뉴 만들 때 혹시 주의 사항이 있는지, 시험 때 이대로 풀어도 되는지 궁금합니다.이대로 적용했을 때는 브라우저에 결과는 잘 나왔었습니다. html css js 저는 와이어프레임 만들 때 border를 사용하지 않고background-color로 사용하였습니다. 혹시 문제가 있는지 여쭈어봅니다. 코드 복사해서 수정합니다. html<div class="navi"> <ul class="gnb"> <li><a href="#">OnSale</a> <ul class="lnb"> <li><a href="#">할인행사</a></li> <li><a href="#">덤증정</a></li> </ul> </li> <li><a href="#">기획전</a> <ul class="lnb"> <li><a href="#">봄 먹거리</a></li> <li><a href="#">여름 먹거리</a></li> <li><a href="#">가을 먹거리</a></li> <li><a href="#">겨울 먹거리</a></li> </ul> </li> <li><a href="#">푸른마을 레시피</a> <ul class="lnb"> <li><a href="#">메인요리</a></li> <li><a href="#">밑반찬</a></li> <li><a href="#">간식</a></li> <li><a href="#">브런치</a></li> </ul> </li> <li><a href="#">매장안내</a> <ul class="lnb"> <li><a href="#">신규매장</a></li> <li><a href="#">추천매장</a></li> <li><a href="#">공지사항</a></li> </ul> </li> </ul> </div>css.navi { width: 90%; margin: 20px auto; background-color: greenyellow; } .gnb {} .gnb>li { text-align: center; position: relative; } .gnb>li>a { display: block; padding: 5px; border: 1px solid black; background-color: #fff; transition: 0.5s; } .gnb>li:hover>a { background-color: gray; } .lnb { display: none; position: absolute; top: 0; left: 100%; width: calc(100vw - 210px); padding: 6px; background-color: rgba(0, 0, 0, 0.5); } .lnb>li { float: left; } .lnb>li>a { display: inline-block; width: 120px; transition: 0.5s; } .lnb>li>a:hover { color: white; background-color: gray; }js$('.gnb>li').mouseenter(function(){ $('.lnb').stop().fadeIn() }); $('.gnb>li').mouseleave(function(){ $('.lnb').stop().fadeOut() });
-
미해결프로그래밍 시작하기 : 웹 입문 (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> 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; } .alert-container { display: flex; flex-direction: column; } .submit-button { width: 100px; } .id, .password, .repassword { display: flex; align-items: center; 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); } } 제가 input창을 margin-right 1100px로 아이디, 비밀번호, 비밀번호 input 입력 창을 동일한 위치에 두었는데요. 화면을 줄이면 이 input 입력 창이 왼쪽으로 밀려서 아이디(*)와 같은 label이 세로로 바뀌는데요.. 이 해결책을 알려주셨음 좋겠어요.그리고 빨간색 alert-message가 나와도 1번과 같은 현상이 나타납니다. 이에 대한 해결책을 부탁 드립니다.그리고 중복 확인 기능을 추가 시키려 하는데 js으로 만들 수 있나요? 만들 수 있다면 알려주시면 감사하겠습니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
선생님 Section4에 제목 오타난것같습니다!
Starfiled => Starfield 인 것 같습니다!
-
미해결CSS 레이아웃 - flex & grid
flex-box 하위 요소 아이템들은 자동적으로 높이값 flex-box 높이값과 같아진다고했는데,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강의를 듣던중 flex-box 안에 있는 하위 요소들이 자동적으로 flex-box 높이 값을 먹는다고 했는데 실제로, <ul class="container"> <li class="item">호랑이</li> <li class="item">고양이</li> <li class="item">냥냥이</li> <li class="item">강아지</li> <li class="item">고슴도치</li> </ul> .container { display : flex} 적용했을경우 li 태그들이 container 와 높이가 같은걸 확인 할 수있었습니다. 그런데 왜 <div class="container"> <div class="item">호랑이</li> <div class="item">고양이</li> <div class="item">냥냥이</li> <div class="item">강아지</li> <div class="item">고슴도치</li> </div>인경우 container 하위 요소 div 들은 자신의 높이값을 유지하나요 ?
-
미해결따라하며 배우는 HTML, CSS
도표자료를 열 수 없습니다.
도표자료를 다운 받았는데, 확장자도 업고.. docx로 확장자를 바꿔도 파일이 제대로 열리지 않습니다.
