개발 · 프로그래밍웹 개발

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)대시보드

(4.5)60개의 수강평 ∙ 5,268명의 수강생

인프런

HTML/CSS JavaScript

33,000원

지식공유자: 인프런

총 56개 수업 (13시간 18분)

수강기한:

수료증: 발급

난이도: --

지식공유자 답변: 미제공

폴더에 추가2.8K

다른 수강생들이 자주 물어보는 질문이 궁금하신가요?

미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
이미지랑 아이콘 파일을 어떻게 찾아요?
인스타그램 포스팅 카드 만들기 수업에 사용된 이미지랑 아이콘 파일을 어떻게 찾아요?
민수 · 20일 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
70
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
이미지가 왜 안뜨나 했더니 Ctrl + shift + I로 오류 찾았을 때Not allowed to load local resource가 뜨네요Html 문서와 같은 장소에 이미지 파일이 있거나그보다 하위 폴더에 있을 때만 이미지가 뜨고 상위 폴더에 있거나 절대 경로로 접근은 보안상의 이유로 차단되어있는 것 같네요 구글 이미지 링크주소 복붙은 정상적으로 되는데 간혹 안되는 이미지 파일도 있네요
GemstoneK · 1달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
113
답변
2
미해결
프로그래밍 시작하기 : 웹 입문 (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번 기능을 넣더라도 그대로 유지되며 오른쪽에 글씨가 들어가더라도 화면의 크기를 줄이더라도 이 형태가 그대로 유지되었으면 합니다.
taeyun1118 · 8달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
233
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (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); } } 코드까지 추가합니다. 직접 실행시켜보시고 해결책알려주세요 ㅠㅠㅠ
taeyun1118 · 8달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
298
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (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으로 만들 수 있나요? 만들 수 있다면 알려주시면 감사하겠습니다.
taeyun1118 · 8달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
193
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
화면 오른쪽 스크롤이 넘어가질 않아요!
<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href = "styles/card.css"> </head> <body> <section class = "container"> <article class = "card"> <header> <div class = "circle-image"> <img src = "images/profile.png"/> </div> <div class = "card-username"> <span>taeyun_kwon1118</span> </div> <div class = "option-more"> <button class = "transparent-button"><img src = "images/icons/mark.png"/></button> </div> </header> <main> <div class = "carousel" data = "0"> <div> <ul> <li><img src = "images/mountain1.jpg"/> </li><li><img src = "images/mountain2.jpg"/> </li><li><img src = "images/mountain3.jpg"/> </li><li><img src = "images/mountain4.jpg"/></li> </ul> <div class = "slide slide-left"> <button class = "transparent-button"><img src = "images/icons/arrow-left.png"/></button> </div> <div class = "slide slide-right"> <button class = "transparent-button"><img src = "images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class = "card-container"> <div class = "card-buttons"> <div> <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/chat.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/paper-plane.png"/> </button> </div> <div class = "last-card-button"> <button class = "transparent-button"> <img src = "images/icons/bookmark.png"/> </button> </div> </div> <div class = "card-likes"> taeyun_kwon1118님 외 여러 명이 좋아합니다 </div> <div class = "card-contents"> <ul> <li> <div> <span>taeyun_kwon1118</span> 여행 사진 올립니다. 좋아요 부탁 드려요 !!! </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 1 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 2 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> </ul> </div> <div class = "card-time"> 7일 전 </div> </div> </main> <footer class = "card-comment"> <input type = "text" placeholder = "댓글 달기..." name = "comment"> <div> <button class = "transparent-button"> 게시</button> </div> </footer> </article> </section> <script type = "text/javascript" src = "scripts/carousel.js"></script> <script type = "text/javascript" src = "scripts/smoothscroll.min.js"></script> </body> </html>!function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c<o.scrollHeight:"X"===t?o.clientWidth+c<o.scrollWidth:void 0}function a(t,l){var e=o.getComputedStyle(t,null)["overflow"+l];return"auto"===e||"scroll"===e}function d(t){var l,e,i,c,n=(s()-t.startTime)/r;c=n=n>1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();window.addEventlistener('load', function(){ var carousels = document.getElementsByClassName('carousel'); for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); } }); function addEventToCarousel(carouselElem){ var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비 값 조정 var liWidth = liElems[0].clientWidth;//600px var adjustedWidth = liElems.length * liWidth; ulElem.style.width = adjustedWidth + 'px'; //슬라이드 버튼 이벤트 등록 var slideButtons = carouselElem.querySelectorAll('.slide'); for(var i = 0; i < slideButtons.length; i++) { slideButtons[i].addEventlistener('click', createListenerSlide(carouselElem)); } } function createListenerSlide(carouselElem){ return function(event){ var clickedButton = event.currentTarget; var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; var currentIndex = carouselElem.attributes.data.value; if(clickedButton.className.includes('right') && currentIndex < licount - 1){ currentIndex ++; scrollDiv(carouselElem, currentIndex); } else if(clickedButton.className.includes('left') && currentIndex > 0){ currentIndex --; scrollDiv(carouselElem, currentIndex); } // indicator update // slide button 보여줌 여부 update // 새롭게 보여지는 이미지 인덱스 값을 현재 data값으로 업데이트 carouselElem.attributes.data.value = currentIndex; } } function scrollDiv(carouselElem, nextIndex){ var scrollable = carouselElem.querySelector('div'); var liWidth = scrollable.clientWidth; var newLeft = liWidth * nextIndex; scrollable.scrollTo({left: newleft, behavior: 'smooth'}); }
taeyun1118 · 8달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
284
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
학과 설정
지금까지 HTML 학습한거로 질문을 드리자면, 폼에 조건 지정이 가능한가요? 예를 들어 대학 소속에 따라 학과 종류가 다른데, 이에 대해 앞에 선택한 option에 따라서 뒤에 option이 달라지는 것은 어떻게 만드는 건가요?
taeyun1118 · 9달 전 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
136
답변
2
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
회원가입폼 검증 -2 에서 문제가생겼습니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>회원가입</title> <meta name="keyword" content="회원가입,html"> </head> <style> .alert-message { margin: 0 10px; color: #f09090; font-size: 14px; font-weight: 900; } </style> <body> <h1>회원가입</h1> <hr />  <form action="validation.html" methed="POST"> <fieldset> <legend>계정정보</legend> <div> <label for="id-account">아이디</label> <input type="text" name="account" id="id-account" required="required"> <span class="alert-message" id="id-account-alert">test</span> </div> <div> <label for="id-password">비밀번호</label> <input type="password" name="password" id="id-password" required="required"> <span class="alert-message">test</span> </div> <div> <label for="id-password2">비밀번호 확인</label> <input type="password" name="password2" id="id-password2" required="required"> <span class="alert-message">test</span> </div> </fieldset> <fieldset> <legend>프로필</legend> <div> <label for="id-name">이름</label> <input type="text" name="name" id="id-name" required="required"> <span class="alert-message">test</span> </div> <div> <label>생년월일</label>  <input type="number" name="birth-year" placeholder="년" min="1900" max="2222" required="required"> <select name="birth-month" id="" required="required"> <option value="">월</option> <option value="1">1월</option> <option value="2">2월</option> <option value="3">3월</option> <option value="4">4월</option> <option value="5">5월</option> <option value="6">6월</option> <option value="7">7월</option> <option value="8">8월</option> <option value="9">9월</option> <option value="10">10월</option> <option value="11">11월</option> <option value="12">12월</option> </select> <input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required"> <span class="alert-message">test</span> </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> <input type="radio" name="gender" id="id-unknown" required="required" value="unknown"> <label for="id-unknown">기타</label> <span class="alert-message">test</span> </div> </fieldset> <div> <input type="checkbox" name="agree" id="id-agree" required="required"> <label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label> </div>  <button type="submit">가입하기</button> </form> <script type="text/javascript" src="scripts/validation.js"></script> </body> </html> 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 showM(inputElement, message){ var messageEle = inputElement.parentNode.querySelector('span'); messageEle.style.display ='lnline'; messageEle.innerText =message; inputElement.focus(); } function submitForm(){ var accountInput=document.querySelector('input[name="account"]'); var passwordInput=document.querySelector('input[name="password"]'); var passwordConfirmInput=document.querySelector('input[name="password2"]'); var selectInput=document.querySelector('select[name="birth-month"]'); var radioInput=document.querySelector('input[name="gender"]:checked'); var checkInput=document.querySelector('input[name="agree"]'); console.log(accountInput.value); console.log(passwordInput.value); console.log(passwordConfirmInput.value); console.log(selectInput.value); console.log(radioInput.value); console.log(checkInput.value); if(accountInput.value.length<6){ showM( accountInput , '아이디는 6글자이상이여야합니다.'); } return false; }; '아이디는 6글자이상이여야합니다이라는 오류가 안나와요
락곤 · 2022.10.05 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
174
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
card.html 버튼 위치
1. .slide-left 와 .slide-right가 사진의 중간에 위치하는 것이 아닌 웹페이지 전체의 중간에 위치하는 것 같은데 왜 그런지 모르겠습니다. 2. 또한 footer의 위치도 마찬가지입니다. 이 경우 .carousel footer의 속성에서 position: absolute를 지우면 가운데로 오긴 하는데 그렇게 해도 되는건가요? 답변 미리 감사합니다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel="stylesheet" href="styles/card.css"> </head> <body> <section class="container"> <article class="card"> <header> <div class="circle-image"> <img src="images/profile.png"> </div> <div class="card-username"> <span>inflearn</span> </div> <div class="option-more"> <button class="transparent-button"><img src="images/icons/mark.png"></button> </div> </header> <main> <div class="carousel" data="0"> <div> <ul> <li><img src="images/mountain1.jpg"></li><li><img src="images/mountain2.jpg"></li><li><img src="images/mountain3.jpg"></li><li><img src="images/mountain4.jpg"></li> </ul> <div class="slide slide-left"> <button class="transparent-button"> <img src="images/icons/arrow-left.png"> </button> </div> <div class="slide slide-right"> <button class="transparent-button"> <img src="images/icons/arrow-right.png"> </button> </div> </div> <footer> <div class="active"> </div> <div></div> <div></div> <div></div> </footer> </div> <div class="card-container"> <div class="card-buttons"> <div> <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> <div> <button class="transparent-button"><img src="images/icons/chat.png"></button> </div> <div> <button class="transparent-button"><img src="images/icons/paper-plane.png"></button> </div> <div class="last-card-button"> <button class="transparent-button"><img src="images/icons/bookmark.png"></button> </div> </div> <div class="card-likes"> 좋아요 999,999개 </div> <div class="card-content"> <ul> <li> <div> <span>inflearn.user</span> 본문 내용 </div> </li> <li class="comment"> <div> <span>inflearn.user</span> 댓글 하나 <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> </li> <li class="comment"> <div> <span>inflearn.user</span> 댓글 둘 <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> </li> </ul> </div> <div class="card-time"> 7일 전 </div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글 달기 ..." name="comment"> <div> <button class="transparent-button">게시</button> </div> </footer> </article> </section> </body> </html> * { padding: 0; margin: 0; } ul, li { list-style: none; } .transparent-button { background-color: transparent; border: 0; outline: 0; cursor: pointer; } .container { width: 100%; background-color: #f0f0f0; padding: 20px 0; } article.card { width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /***HEADER 시작***/ article.card header { height: 40px; padding: 10px; } article.card header > div { display: inline-block; vertical-align: middle; } .circle-image { height: 100%; padding: 5px; box-sizing: border-box; } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /***HEADER 종료***/ /***CONTENT 시작***/ .card-container { padding: 5px 10px; } /*버튼*/ .card-buttons { padding: 0 5px; margin-top: 5px; } .card-buttons > div { display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button { float: right; margin-right: 0; } /*좋아요*/ .card-likes { font-size: 13px; font-weight: 900; padding: 5px; } /*본문*/ .card-content { padding: 2px 5px; font-size: 13px; } .card-content li > div { padding: 1px 0; } .card-content li > div > span { font-weight: 900; } .card-content li.comment > div > button { float: right; } .card-content li.comment > div > button > img { width: 12px; margin-right: 5px; } /*시간*/ .card-time { padding: 3px; font-size: 11px; color: #a0a0a0; } /***CONTENT 시작***/ /***FOOTER 시작***/ footer.card-comment { position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input { width: 100%; height: 100%; outline: 0; border: 0; padding: 0 15px; color: #606060; /* box-sizing: border-box;*/ } footer.card-comment > div { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button { color: #0095f6; opacity: 0.5; padding: 10px 5px; } /***FOOTER 종료***/ /*캐러셀*/ article.card main .carousel { width: 100% position: relative; } article.card main .carousel > div { overflow: hidden; } article.card main .carousel ul { width: 10000px; } article.card main .carousel ul > li { display: inline-block; } article.card main .carousel ul > li img { width: 600px; } .slide { position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; } .slide img { opacity: 0.75; } .slide-right { right: 0; } .carousel footer { position: absolute; height: 20px; text-align: center; width: 100%; } .carousel footer div { width: 6px; height: 6px; background-color: #a8a8a8; display: inline-block; border-radius: 50%; } 차례대로 html과 css코드입니다.
9279482 · 2022.08.13 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
317
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 여러번 HTML, JS코드를 리뷰했는데도 잘 동작이 되지 않습니다. HTML, JS코드 첨부하겠습니다. <!DOCTYPE html> <html> <head> <title>Instagram</title> <link rel="stylesheet" type="text/css" href="styles/card.css"> </head> <body> <section class="container"> <article class="card"> <header> <div class="circle-image"> <img src="images/profile.png"> </div> <div class="card-username"> <span>Test User</span> </div> <div class="option-more"> <button class="transparent-button"> <img src="images/icons/mark.png"> </button> </div> </header> <main> <div class="carousel" data="0"> <div> <ul> <li><img src="images/mountain1.jpg"> </li><li><img src="images/mountain2.jpg"> </li><li><img src="images/mountain3.jpg"> </li><li><img src="images/mountain4.jpg"></li> </ul> <div class="slide slide-left" style="display: none;">  <button class="transparent-button"> <img src="images/icons/arrow-left.png"> </button> </div> <div class="slide slide-right"> <button class="transparent-button"> <img src="images/icons/arrow-right.png"> </button> </div> </div> <footer> <div class="active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class="card-container"> <div class="card-buttons"> <div> <button class="transparent-button"> <img src="images/icons/heart.png"> </button> </div> <div> <button class="transparent-button"> <img src="images/icons/chat.png"> </button> </div> <div> <button class="transparent-button"> <img src="images/icons/paper-plane.png"> </button> </div> <div class="last-card-button"> <button class="transparent-button"> <img src="images/icons/bookmark.png"> </button> </div> </div> <div class="card-likes"> 좋아요 99,328개 </div> <div class="card-content"> <ul> <li> <div> <span> Test User </span> 본문 내용 </div> </li> <li class="comment"> <div> <span> Test User </span> 댓글 1 <button class="transparent-button"> <img src="images/icons/heart.png"> </button> </div> </li> <li class="comment"> <div> <span> Test User </span> 댓글 2 <button class="transparent-button"> <img src="images/icons/heart.png"> </button> </div> </li> </ul> </div> <div class="card-time">13일 전</div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글 달기" name="comment"> <div> <button class="transparent-button">게시</button> </div> </footer> </article> </section> <script type="text/javascript" src="scripts/carousel.js"></script> <script type="text/javascript" src="scripts/smoothscroll.min.js"></script> </body> </html> window.addEventListener('load',function(){ var carousels=document.getElementsByClassName('carousel'); //make carousel Event for(var i=0;i<carousels.length;i++){ addEventTocarousel(carousels[i]); } }); function addEventTocarousel(carouselElement){ var ulElem = carouselElement.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //width 조절 var liwidth = liElems[0].clientWidth; var adjustedwidth = liElems.length * liwidth; ulElem.style.width = adjustedwidth + 'px'; //slide button event var slideButtons = carouselElement.querySelectorAll('.slide'); for(var i=0; i<slideButtons.length;i++){ slideButtons[i].addEventListener('click',createListenerslide(carouselElement){ }) } } function createListenerslide(carouselElement){ return function(event){ var clickedButton = event.currentTarget; //값 가져오기 var liElems = carouselElement.querySelectorAll('li'); var licount=liElems.length; var currentIndex=carouselElement.attributes.data.value; //slidebutton check if(clickedButton.className.includes('right')&&currentIndex < licount-1){ currentIndex++; scrollDiv(carouselElement,currentIndex); } else if(clickedButton.className.includes('left')&&currentIndex >0){ currentIndex--; scrollDiv(carouselElement,currentIndex); } //indicator update updateIndicator(carouselElement, currentIndex); //decide slide button hide updateSlideButtonVisible(carouselElement, currentIndex, licount) //index value update carouselElement.attributes.data.value = currentIndex; } } function scrollDiv(carouselElement,nextIndex){ var scrollable = carouselElement.querySelector('div'); var liwidth = scrollable.clientWidth; var newleft = liwidth * nextIndex; scrollable.scrollTo({left: newleft, behavior: 'smooth'}); } function updateIndicator(carouselElement, currentIndex){ var indicators = carouselElement.querySelectorAll('footer > div'); for(var i=0;i<indicators.length;i++){ if(currentIndex == i){ indicators[i].className='active'; } else{ indicators[i].className=''; } } } function updateSlideButtonVisible(carouselElement, currentIndex, licount){ var left=carouselElement.querySelector('.slide-left'); var right=carouselElement.querySelector('.slide-right'); if(currentIndex>0){ left.style.display = 'block' //보이도록 } else{ left.style.display = 'none' //숨김 } if(currentIndex<licount -1){ right.style.display = 'block'; } else{ right.style.display = 'none'; } }
Suk · 2022.06.29 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
156
답변
2
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
carousel의 footer부분에
carousel footer부분 ....에서 div안에 아무것도 안넣었는데 어떻게 ....이 나오는 건가요??
w01085914442 · 2022.06.18 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
123
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
margin 값에 관한 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! css 2_14 실습을 따라하다가 궁금증이 생겨 질문 남깁니다. 영상에 나온대로 .cell 에 margin: 0 1%; 을 줬는데 개발자 도구에서 확인했을 때 margin 값이 cell의 1%가 아닌 건 어떤 이유에서일까요? cell의 너비가 253인데 margin 값은 8.427로 잡혀서요 너비 margin을 1%로 설정했다면 2.53이 되어야하지 않나요? 단위가 다른 건지.. 어떤 이유에서 값이 다르게 나온 건지 궁금합니다.
qwop_01 · 2022.06.14 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
193
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
function clearMessages() 함수의 원리를 알고싶습니다
9분쯤에 작성하시는 함수(clearMessages()) 원리를 좀 자세히 알고 싶습니다. for문을 사용하는 이유도요
mok0618 · 2022.05.13 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
131
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
removeEventListener
이 강의에서 addEventListener 를 통해 만든 클릭함수를 없애고 싶을땐 removeEventListener를 어떻게 사용해야 할까요? logo.addEventListener('click',function(){ alert('안녕하세요! 구글입니다.'); }); 이걸 지우고 싶습니다..
초보개발자임 · 2022.05.04 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
102
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
버튼을 눌렀을때 케러셀의 이동
버튼을 눌렀을때 한칸씩 가지 않고 두칸씩 이동하는 이유는 어느부분 에서 있을끼요???? window.addEventListener('load', function() { var carousels = document.getElementsByClassName('carousel'); //dom문법을 쓴다는건 객체를 의미한다 //케러셀 이벤트를 등록하는 로직 //캐러셀 랭스: for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열) } }); //carouselELem에는 carousels[i]가 들어가짐 function addEventToCarousel(carouselElem) { var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비값 조정 var liWidth = liElems[0].clientWidth; //현재 li의 너비값 : 600px이옴 var adjustedWidth = liElems.length * liWidth; //이미지 갯수 * 너비 ulElem.style.width = adjustedWidth + 'px';//2400px이 됌 //슬라이더 버튼 이벤트 등록 , 슬라이드에 대한 객체 정보 다빼옴 var slideButtons = carouselElem.querySelectorAll('.slide'); //슬라이드 버튼 갯수만큼 반복 for (var i=0; i < slideButtons.length; i++) { //왼쪽버튼 오른쪽버튼 총 2번을 반복한다. slideButtons[i].addEventListener('click', createListenerSlide(carouselElem)); } } //슬라이드 버트을 누를때 이벤트를 클로저로 사용하기위해 //클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해 //버튼이 담겨잇는 케러셀만 가져올수있도록 클로저를 이용 function createListenerSlide(carouselElem) { return function(event) { //event는 매개변수고 이 블록안에서 사용가능 var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기 //클릭이라는 이벤트가 발동됐을때 return함수가 호출이된다. // 값 가져오기 var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; //길이는 4야 var currentIndex = carouselElem.attributes.data.value; //currentIndex : 현재 보고있는 이미지의 순번 //carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다 //슬라이드 버튼 체크 right값을 포함하는지 //-1해주는이유는 4개일경우 마지막은 3이 마지막이기때문 if(clickedButton.className.includes('right') && currentIndex < liCount - 1) { currentIndex ++; scrollDiv(carouselElem, currentIndex); //위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할 } else if(clickedButton.className.includes('left') && currentIndex > 0) { currentIndex --; //0이면 왼쪽으로 못넘김 scrollDiv(carouselElem, currentIndex); } //인디케이터 업데이트 updateIndicator(carouselElem, currentIndex); //슬라이드 버튼 보여줌 여부 업데이트 updateSlideButtonvisible(carouselElem, currentIndex, liCount); //새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트 carouselElem.attributes.data.value = currentIndex; //만약 currentIndex가 2라면 1에서 2로 바뀌는것 } } //다음으로 이동할 매개변수로 nextIndex 이용 //여기서 왜 2칸씩 가게될까 function scrollDiv(carouselElem, nextIndex) { var scrollable = carouselElem.querySelector('div');//오버플로 히든되는 var liWidth = scrollable.clientWidth;//div의 사이즈 600이라 600이올거임 var newLeft = liWidth * nextIndex; //2번을 하야된다 하면 1200px이 움직일것 scrollable.scrollTo({left: newLeft, behavior: 'smooth'}); } //querySelectorAll 이기 때문에 배열로 받아온다 function updateIndicator(carouselElem, currentIndex) { var indicators = carouselElem.querySelectorAll('footer > div'); for (var i = 0; i < indicators.length; i++) { if (currentIndex == i) { indicators[i].className = 'active';//객체이므로 .className을 쓰는거지 } else { indicators[i].className = ''; } } } function updateSlideButtonvisible(carouselElem, currentIndex, liCount) { var left = carouselElem.querySelector('.slide-left'); var right = carouselElem.querySelector('.slide-right'); if (currentIndex > 0) { left.style.display = 'block'; } else { left.style.display = 'none'; } if(currentIndex < liCount - 1) { right.style.display = 'block'; } else { right.style.display = 'none'; } }
정준영 · 2022.04.21 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
494
답변
2
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
html 파일 올립니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 원형 이미지가 적용이 안되네요 전 글에 css 파일 있습니다!
dklzc · 2022.04.04 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
136
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
이미지가 안가려지는 에러
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있* { padding: 0; margin: 0; } ul, li { list-style: none; } button.transparent { background-color: transparent; border: 0; outline: 0; cursor: pointer; } .container { width: 100%; background-color: #f0f0f0; padding: 10px; } article.card { width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /* header 시작 */ article.card header { height: 40px; padding: 10px; } article.card header > div { display: inline-block; /* 수평정렬 */ vertical-align: middle; } .circle-image { height: 100%; padding: 5px; box-sizing: border-box; /* padding을 줘도 넘치지 않도록 border-box 설정 */ } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /* header 종료 */ /* content 시작 */ .card-container { padding: 5px 10px; } /* 버튼 css */ .card-buttons { padding: 0 5px; margin-top: 5px; } .card-buttons > div { display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button { float: right; margin-right: 0; } /* 좋아요 */ .card-likes { padding: 5px; font-size: 13px; font-weight: 900; } /* 본문 */ .card-content { padding: 2px 5px; font-size: 13px; } .card-content li > div { padding: 1px 0; } .card-content li > div > span { font-weight: 990; } .card-content li.comment > div > button { float: right; } .card-content li.comment > div > button > img { width: 12px; margin-right: 5px; } /* 시간 */ .card-time { padding: 3px; font-size: 11px; color: #a0a0a0; } /* 푸터*/ footer.card-comment { position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 15px; color: #606060; box-sizing: border-box; /* 넘치길래 추가함 */ } footer.card-comment > div { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); /* 위로 50퍼 올린다 */ /* 여기가 젤 어렵네 */ } footer.card-comment > div > button { color: #0095f6; opacity: 0.5; /* opacity: 투명도 */ padding: 10px 5px; } /* 케러셀*/ article.card main .carousel { width: 100%; /* 600px에 맞게 100퍼센트로 지정 */ position: relative; /* slide의 부모태그 */ } article.card main .carousel > div { overflow: hidden; /* overflow hidden을 통해 넘치는걸 가려짐 */ } article.card main .carousel ul { width: 10000px; /* 이걸 키우고 li를 고정시켜 슬라이드 될수있게 */ } article.card main .carousel ul > li { display: inline-block; } article.card main .carousel ul > li img { width: 600px; } .slide { position: absolute; top: 50%; transform: translateY(-50%); /* 헷갈리는 부분 */ padding: 10px; } .slide img { opacity: 0.75; } .slide-right { right: 0; /* 오른쪽에서 시작하도록 right 0주기 */ } .carousel footer { position: absolute; height: 20px; text-align: center; width: 100%; bottom: -20px; /* height 20px 뛰움으로써 밑으로 내렸지만 더 명세적으로 bottom: -20px*/ } .carousel footer div { width: 6px; height: 6px; background-color: #a8a8a8; /* 네모난거 4개는 상자에다 배경색을 넣은것 인디케이터 */ display: inline-block; border-radius: 50%; } .carousel footer div.active { background-color: #0095f6; } //위에까지가 css 자료 //여기부터 자바스크립트!! window.addEventListener('load', function() { var carousels = document.getElementsByClassName('carousel'); //케러셀 이벤트를 등록하는 로직 for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열) } }); function addEventToCarousel(carouselElem) { var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비값 조정 var liWidth = liElems[0].clientWidth; //현재 li의 너비값 var adjustedWidth = liElems.length * liWidth; //이미지 갯수 * 너비 ulElem.style.width = adjustedWidth + 'px'; //슬라이더 버튼 이벤트 등록 , 슬라이드에 대한 객체 정보 다빼옴 var slideButtons = carouselElem.querySelectorAll('.slide'); //슬라이드 버튼 갯수만큼 반복 for (var i=0; i < slideButtons.length; i++) { slideButtons[i].addEventListener('click', createListenerSlide(carouselElem)); } } //클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해 function createListenerSlide(carouselElem) { return function(event) { //event는 매개변수고 이 블록안에서 사용가능 var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기 // 값 가져오기 var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; //길이는 4야 var currentIndex = carouselElem.attributes.data.value; //currentIndex : 현재 보고있는 이미지의 순번 //carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다 //슬라이드 버튼 체크 right값을 포함하는지 //-1해주는이유는 4개일경우 마지막은 3이 마지막이기때문 if(clickedButton.className.includes('right') && currentIndex < liCount - 1) { currentIndex ++; scrollDiv(carouselElem, currentIndex); //위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할 } else if(clickedButton.className.includes('left') && currentIndex > 0) { currentIndex --; //0이면 왼쪽으로 못넘김 scrollDiv(carouselElem, currentIndex); } //인디케이터 업데이트 updateIndicator(carouselElem, currentIndex); //슬라이드 버튼 보여줌 여부 업데이트 updateSlideButtonvisible(carouselElemm, currentIndex, liCount); //새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트 carouselElem.attributes.data.value = currentIndex; } } //다음으로 이동할 매개변수로 nextIndex 이용 function scrollDiv(carouselElem, nextIndex) { var scrollable = carouselElem.querySelector('div');//오버플로 히든되는 var liWidth = scrollable.clientWidth;//div의 사이즈 600이라 600이올거임 var newLeft = liWidth * nextIndex; //2번을 하야된다 하면 1200px이 움직일것 scrollable.scrollTo({left: newLeft, behavior: 'smooth'}); } function updateIndicator(carouselElem, currentIndex) { var indicators = carouselElem.querySelectorAll('footer > div'); for (var i = 0; i < indicators.length; i++) { if (currentIndex == i) { indicators[i].className = 'active'; } else { indicators[i].className = ''; } } } function updateSlideButtonvisible(carouselElem, currenIndex, liCount) { var left = carouselElem.querySelector('.slide-left'); var right = carouselElem.querySelector('.slide-right'); if (currenIndex > 0) { left.style.display = 'block'; } else { left.style.display = 'none'; } if(currenIndex < liCount - 1) { right.style.display = 'block'; } else { right.style.display = 'none'; } } 현재 에러 1.이미지가 한개만 보여야하는데 가려지지않는다 2.자바스크립트를 통해 다음사진으로 넘겨지지만 네번째 사진이 보여지지않고 세번째사진도 넓이에 맞지않다. 어느 코드에서 문제가 있는걸까요 선생님 ㅜㅜ
정준영 · 2022.04.03 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
212
답변
5
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
circle -image 적용이 되지 않습니다.
문제가 뭘까요....
dklzc · 2022.04.01 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
131
답변
1
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
버튼 자바스크립트 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화window.addEventListener('load', function() { var carousels = document.getElementsByClassName('carousel'); //케러셀 이벤트를 등록하는 로직 for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열) } }); function addEventToCarousel(carouselElem) { var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비값 조정 var liWidth = liElems[0].clientWidth; var adjustedWidth = liElems.length * liWidth; ulElem.style.width = adjustedWidth + 'px'; //슬라이더 버튼 이벤트 등록 var slideButtons = carouselElem.querySelectorAll('.slide'); //슬라이드 버튼 갯수만큼 반복 for (var i=0; i < slideButtons.length; i++) { slideButtons[i].addEventListener('click', createListenerSlide(carouselElem)); } } //클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해 function createListenerSlide(carouselElem) { return function(event) { //event는 매개변수고 이 블록안에서 사용가능 var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기 // 값 가져오기 var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; var currentIndex = carouselElem.attributes.data.value; //currentIndex : 현재 보고있는 이미지의 순번 //carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다 //슬라이드 버튼 체크 right값을 포함하는지 //-1해주는이유는 다섯개일경우 마지막은 4가 마지막이기때문 if(clickedButton.className.includes('right') && currentIndex < liCount - 1) { currentIndex ++; scrollDiv(carouselElem, currentIndex); //위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할 } else if(clickedButton.className.includes('left') && currentIndex > 0) { currentIndex --; //0이면 왼쪽으로 못넘김 scrollDiv(carouselElem, currentIndex); } //인디케이터 업데이트 //슬라이드 버튼 보여줌 여부 업데이트 //새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트 carouselElem.attributes.data.value = currentIndex; } } function scrollDiv(carouselElem, nextIndex) { var scrollable = carouselElem.querySelector('div'); var liWidth = scrollable.clientWidth; var newLeft = liWidth * nextIndex; scrollable.scrollTo({left: newLeft, behavior: 'smooth'}); } 버튼을 눌러도 사진이 오른쪽으로 가지 않는데 어느 코드에서 에러가 난걸까요?????
정준영 · 2022.03.30 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
317
답변
2
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
vertical align middle 적용 질문
article.card header > div { display: inline-block; /* 수평정렬 */ vertical-align: middle; } 여기서 왜 적용이 안될까요? ㅜㅜㅜ
정준영 · 2022.03.29 · 프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
투표점수
0
조회수
104
답변
1

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)대시보드

이미지랑 아이콘 파일을 어떻게 찾아요?

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

프로젝트 고민 해결이 안되어 다시 올립니다.

프로젝트 고민 다시올립니다.

친구와의 프로젝트 고민

화면 오른쪽 스크롤이 넘어가질 않아요!

학과 설정

회원가입폼 검증 -2 에서 문제가생겼습니다

card.html 버튼 위치

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

carousel의 footer부분에

margin 값에 관한 질문입니다.

function clearMessages() 함수의 원리를 알고싶습니다

removeEventListener

버튼을 눌렀을때 케러셀의 이동

html 파일 올립니다!

이미지가 안가려지는 에러

circle -image 적용이 되지 않습니다.

버튼 자바스크립트 오류

vertical align middle 적용 질문