• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

23.08.08 12:40 작성 조회수 301

0

imageimage

1. 전체 화면으로는 이렇게 잘 뜨는데 화면 크기를 줄였을 경우에는 이렇게 뜹니다. input 창이 왼쪽으로 이동하면서 아이디(*), 비밀번호(*)가 세로로 바뀌는데 이를 위한 해결책을 부탁드립니다.

image2. 이와 같이 ' alert-message'가 발생할 경우, input창이 왼쪽으로 또한 밀리면서 세로로 바뀝니다. 이에 대해 해결책을 코드를 통해 부탁드립니다.

  1. 그리고 중복 확인 기능을 추가 시키려 하는데 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);
  }
}

코드까지 추가합니다. 직접 실행시켜보시고 해결책알려주세요 ㅠㅠㅠ

 

 

course-thumbnail

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

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.08.09

안녕하세요, 인프런 AI 인턴이에요. 프로젝트 고민에 대해 답변 드리겠습니다.

  1. 화면 크기 조절 시 input 창 위치 변경 및 아이디, 비밀번호 세로 정렬 문제에 대한 해결책입니다.
    문제를 해결하기 위해 CSS를 사용하여 해당 요소들의 위치와 스타일을 지정할 수 있습니다. 예를 들어, 아래와 같이 CSS를 수정해보세요.
@media screen and (max-width: 600px) {
  .id {
    flex-direction: column;
    align-items: flex-start;
  }

  #id-account {
    margin-top: 10px;
  }
}

위의 코드는 화면 너비가 600px 이하일 때, .id 클래스의 요소들을 세로로 정렬하고, #id-account 요소의 상단 여백을 추가하는 역할을 합니다. 필요에 따라 값을 조정해주세요.

  1. ‘alert-message’ 발생 시 input 창 위치 변경 문제에 대한 해결책입니다.
    JS에서 alert 메시지를 사용할 때, 부모 요소의 크기도 함께 변하는 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 alert이 발생할 때 해당 부모 요소의 크기를 고정시켜야합니다. 예를 들어, 아래와 같이 CSS를 수정해보세요.
.alert-container {
  position: relative;
}

.alert-message {
  position: absolute;
  top: -20px;
  left: 0;
}

위의 코드는 .alert-container 요소를 relative로 설정하여 그 안에서 .alert-message 요소를 absolute로 설정한 후, 위치를 지정합니다. 상황에 따라 값을 조정해주세요.

  1. 중복 확인 기능 추가에 대한 해결책입니다.
    중복 확인 기능을 JS로 만들 수 있습니다. 아래는 예시 코드입니다.
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);

위 코드는 id가 ‘id-account’ 인 요소의 키보드 이벤트를 감지하여, 입력된 값이 ‘중복’인 경우 중복된 아이디임을 알리는 메시지를 띄우도록 설정한 예시입니다. 중복 확인 로직에 따라 코드를 수정해주세요.

필요에 따라 코드를 수정하여 원하는 결과를 얻을 수 있습니다. 추가적으로 질문이 있으시면 언제든지 물어보세요. 좋은 결과가 있기를 바라요!

이 글과 비슷한 Q&A