묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(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로 확장자를 바꿔도 파일이 제대로 열리지 않습니다.
-
미해결처음 만난 리액트(React)
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?괄호를 따로 안써도 되는것 같은데, 어떤 의미인지가 궁금합니다.
-
미해결자바스크립트 제대로 배워볼래?
4-04(마지막강의)에 있는 json으로 된 js파일은 어디에 있을까요?
영상에서 자막으로 제공해주신 github에 접속하니없는 페이지라고 나오더라구요..
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
저는 잘 만들었다고 생각했는데 Tab키로 옵젝전환을 시켜보니..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="headerlogo 1"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">재단소개</a> <div class="sub-menu"> <a href="#none">설립취지</a> <a href="#none">연혁</a> <a href="#none">찾아오시는길</a> </div> </li> <li> <a href="#none">후원하기</a> <div class="sub-menu"> <a href="#none">국내후원</a> <a href="#none">국외후원</a> <a href="#none">맞춤후원</a> </div> </li> <li> <a href="#none">자료실</a> <div class="sub-menu"> <a href="#none">서식자료실</a> <a href="#none">사진자료실</a> <a href="#none">후원양식</a> </div> </li> <li> <a href="#none">스토리</a> <div class="sub-menu"> <a href="#none">웹진</a> <a href="#none">보고서</a> <a href="#none">나의 후원</a> </div> </li> </ul> </div> <div class="sub-back"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide 3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <span>공지사항</span> <div class="tab1"> <a class="open-modal" href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>휴대폰 인증 서비스 개선 작업 기간 연장</em><b>2020.01.07</b></a> <a href="#none"><em>카드사 부분 무이자 할부 이벤트</em><b>2019.12.31</b></a> <a href="#none"><em>올앳 시스템 작업 안내</em><b>2019.12.20</b></a> <a href="#none"><em>휴대폰 결제 시스템 작업이 완료되었습니다.</em><b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery 1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery 2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery 3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner 2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footerlogo 1"></a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="familysite"> <select> <option value="">Familysite</option> <option value="">연습용입니다</option> <option value="">이쪽도 재밌어요</option> <option value="">저쪽은 낭떠러지</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p> 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.<br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다.<br> 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다. </p> <a class="close-modal" href="#none">닫기</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; font-size: 15px; } a { text-decoration: none; color: #333333; } .container { margin: auto; /* border: 1px solid red; */ width: 1200px; } header { height: 100px; position: relative; z-index: 10; } header > div { height: 100px; /* border: 1px solid green; */ } .header-logo { width: 200px; float: left; } .header-logo > a { line-height: 130px; } .navi { width: 600px; float: right; } .menu { padding: 0; width: 600px; } .menu li { text-align: center; list-style: none; float: left; width: 25%; padding-top: 55px; } .menu li > a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { position: relative; display: none; } .sub-menu > a{ display: block; padding: 8px; transition: 0.5s; color: #fff; } .sub-menu > a:hover { background-color: #fff; color: #333333; } .sub-back { display: none; width: 100%; height: 150px; top: 100%; left: 0; background-color: #000; position: absolute; z-index: -1; } .slide { height: 300px; width: 1200px; position: relative; overflow: hidden; } .slide > div { position: absolute; width: 3600px; /* border: 1px solid black; */ left: 0; top: 0; height: 300px; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } .items { overflow: hidden; margin-top: 10px; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .tab-inner { width: 95%; margin: auto; } .tab-inner span { border: 1px solid black; border-radius: 5px 5px 0 0; display: inline-block; width: 80px; padding: 8px; text-align: center; background-color: #fff; border-bottom: 0; } .tab1 { border: 1px solid black; padding: 0 4px; height: 150px; background-color: #fff; margin-top: -2px; } .tab1 em { width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; position: relative; } .tab1 b { float: right; } .tab1 a { display: block; border-bottom: 1px solid black; padding: 2.5px; } .tab1 a:last-child { border-bottom: 0px; } .tab1 a b{ font-weight: normal; } .tab2 { background-color: #fff; margin-top: -2px; border: 1px solid black; text-align: center; padding-top: 20px; height: 130px; } .tab2 img { width: 120px; } .banner { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo > a { line-height: 130px; } .copyright { width: 800px; text-align: center; padding-top: 10px; overflow: hidden; } .copyright > a { box-sizing: border-box; } .copyright > p { padding-bottom: 10px; } .familysite { width: 200px; text-align: center; padding-top: 35px; } .modal { position: absolute; background-color: #00000049; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { position: absolute; transform: translate(-50%,-50%); width: 350px; background-color: #fff; top: 50%; left: 50%; padding: 20px; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.356); } .modal-content span { } .close-modal { float: right; border: 1px solid black; padding: 5px; } $('.menu li').mouseenter(function(){ $('.sub-menu,.sub-back').stop().slideDown() }); $('.menu li').mouseleave(function(){ $('.sub-menu,.sub-back').stop().slideUp() }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });이게 이렇게해서 Html, css ,jQuery 3개 잘 만들어 보았으나, 직접 웹 페이지에서 탭키로 누르려고하면 아이템 부분의 공지사항이랑 갤러리가 없어져버립니다.. 왜 이렇게 되는걸까요!..
-
미해결처음 만난 리액트(React)
chapter 05. 댓글 컴포넌트 만들기 오류 질문
댓글 컴포넌트 만들기를 하는데 왜 이렇게 오류가 생기는 건지 잘 모르겠습니다ㅜㅜ..
-
해결됨[웹 개발 풀스택 코스] HTML&CSS 기초
form 질문
div안에 form이 있는경우도 있고form안에 div가 있는 경우도 있는데 둘다 동작은 똑같이 되는건가요?
