Project/AWS-Front

화면 프로젝트 (3) - AWS 풀스택 과정 27일차

awspspgh 2024. 8. 21. 18:14

▣ 아이디 / 비밀번호 찾기 초안

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/idPw.css">
</head>
<body>
    <div class="inner">
        <div class="image">
            <a href="">
            <img src="../img/img_ezenInside2.png" alt="">
            </a>
        </div>
        <div class="top-container">
            <ul class="tab">
                <li class="tab__item active">
                    <a href="#tab1">아이디 찾기</a>
                </li>
                <li class="tab__item">
                    <a href="#tab2">비밀번호 찾기</a>
                </li>
            </ul>
            
            <!-- 탭 내용 영역 -->
            <div class="tab__content-wrapper">
                <div id="tab1" class="tab__content active">
                    <form action="">
                        <input type="email" class="text-field" id="email" placeholder="가입된 이메일">
                        <input type="button" class="btn" id="btn1" value="아이디 찾기">
                    </form>
                        <div class="bottom-content">
                            <div>※ 가입된 아이디가 있을 경우, 입력하신 이메일로 아이디를 안내해 드립니다.</div>
                            <div>※ 만약 이메일이 오지 않는다면, 스팸 편지함으로 이동하지 않았는지 확인해주세요.</div>
                            <div>※ 이메일로 서비스 제공자 사정에 의해 즉시 도착하지 않을 수 있으니, 최대 30분 정도 기다리신후 다시 시도해주세요.</div>
                        </div>
                </div>
                <div id="tab2" class="tab__content">
                    <form action="">
                        <input type="email" class="text-field" id="id" placeholder="가입된 아이디">
                        <input type="button" class="btn" id="btn2" value="비밀번호 찾기">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/idPw.js"></script>
</body>
</html>

 

- css

@font-face {
    font-family: "NotoSansKR";
    src: url(../font/NotoSansKR-VariableFont_wght.ttf);
}
body {
    font-family: "NotoSansKR";
}
.innner{
    width:1280px;
}
a {
    text-decoration: none;
    color: inherit;
}
.inner>.image{
    display: flex;
    justify-content: center;
    padding-top: 150px;
}
.inner>.image>a>img{
    width: 120px;
}
.top-container{
    width: 480px;
    border: 1px solid rgba(128, 128, 128, 0.185);
    border-radius: 20px;
    margin: 0 auto;
}
.inner>.top-container>.tab__content-wrapper>.tab__content.active>form>.text-field, .btn{
    width: 100%;
    height: 45px;
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: none;
    outline: none;
}
.inner>.top-container>.tab__content-wrapper>.tab__content.active>.bottom-content{
    width: 100%;
    font-size: 12px;
    color: gray;
}
.text-field{
    background-color: rgba(128, 128, 128, 0.048);
    font-size: 15px;
}
.btn{
    background-color: #FFAA00;
    color: white;
    font-size: large;
    font-weight: 700;
}
.btn:hover{
    background-color: #FF9900;
    cursor: pointer;
}
.tab {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.tab__item {
width: 100px;
text-align: center;
padding: 0.6rem 1.3rem;
margin: 0 10px 0 20px;
border: 1px solid #ddd;
border-radius: 2rem;
}
.tab__item.active {
display: inline-block;
border: 1px solid #FFAA00;
background-color: #FFAA00;
color: #fff;
}
.tab__content-wrapper {
padding: 1rem
}
.tab__content {
display: none;
}
.tab__content.active {
display: block;
}

 

- js

    const tabItem = document.querySelectorAll(".tab__item");
    const tabContent = document.querySelectorAll(".tab__content");
    
    tabItem.forEach((item, index) => {
    item.addEventListener("click", (e) => {
        e.preventDefault();
        
        tabContent.forEach((content) => {
        content.classList.remove("active");
        });
        
        tabItem.forEach((content) => {
        content.classList.remove("active");
        });
        
        tabItem[index].classList.add("active");
        tabContent[index].classList.add("active");
    });
    });

    // id alert
    document.getElementById('btn1').addEventListener('click',()=>{
        let email = document.getElementById('email').value;
        document.getElementById('email').value = '';
        if(email == 'user1234@gmail.com'){
            alert("아이디는 user1234입니다.");
        }else{
            alert("가입된 이메일이 아닙니다.");
            idFocus();
        }
    });
    document.getElementById('btn2').addEventListener('click',()=>{
        let id = document.getElementById('id').value;
        document.getElementById('id').value = '';
        if(id == 'user1234'){
            alert("비밀번호는 qwe123!@#입니다.");
        }else{
            alert("가입된 아이디가 아닙니다.");
            pwFocus();
        }
    });
    function idFocus(){
        let email = document.getElementById('email');
        email.focus();
    }
    function pwFocus(){
        let id = document.getElementById('id');
        id.focus();
    }

 

▷ 출력

아이디 찾기

 

비밀번호 찾기

 

◈ 탭메뉴 만들기

- html

<!-- 탭 버튼 영역 -->
<ul class="tab">
  <li class="tab__item active">
    <a href="#tab1">Tab 1</a>
  </li>
  <li class="tab__item">
    <a href="#tab2">Tab 2</a>
  </li>
  <li class="tab__item">
    <a href="#tab3">Tab 3</a>
  </li>
  <li class="tab__item">
    <a href="#tab4">Tab 4</a>
  </li>
</ul>

<!-- 탭 내용 영역 -->
<div class="tab__content-wrapper">
  <div id="tab1" class="tab__content active">첫번째 탭 내용</div>
  <div id="tab2" class="tab__content">두번째 탭 내용</div>
  <div id="tab3" class="tab__content">세번째 탭 내용</div>
  <div id="tab4" class="tab__content">네번째 탭 내용</div>
</div>

 

- css

a {
  text-decoration: none;
  color: inherit;
}
.tab {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.tab__item {
  padding: 0.6rem 1.3rem;
  margin-right: 1rem;
  border: 1px solid #ddd;
  border-radius: 2rem;
}
.tab__item.active {
  display: inline-block;
  border: 1px solid #b81c0f;
  background-color: #b81c0f;
  color: #fff;
}
.tab__content-wrapper {
  padding: 1rem
}
.tab__content {
  display: none;
}
.tab__content.active {
  display: block;
}

 

- js

// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.
const tabItem = document.querySelectorAll(".tab__item");
const tabContent = document.querySelectorAll(".tab__content");

// 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
tabItem.forEach((item, index) => {
  // 3. 탭 버튼에 클릭 이벤트를 준다.
  item.addEventListener("click", (e) => {
    // 4. 버튼을 a 태그에 만들었기 때문에, 
    // 태그의 기본 동작(링크 연결) 방지를 위해 preventDefault를 추가한다.
    e.preventDefault(); // a 
    
    // 5. 탭 내용 부분들을 forEach 문을 통해 한번씩 순회한다.
    tabContent.forEach((content) => {
      // 6. 탭 내용 부분들 전부 active 클래스를 제거한다.
      content.classList.remove("active");
    });

    // 7. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
    tabItem.forEach((content) => {
      // 8. 탭 버튼들 전부 active 클래스를 제거한다.
      content.classList.remove("active");
    });

    // 9. 탭 버튼과 탭 내용 영역의 index에 해당하는 부분에 active 클래스를 추가한다.
    // ex) 만약 첫번째 탭(index 0)을 클릭했다면, 같은 인덱스에 있는 첫번째 탭 내용 영역에
    // active 클래스가 추가된다.
    tabItem[index].classList.add("active");
    tabContent[index].classList.add("active");
  });
});

 

▷ 출력

 

- 느낀 점

오늘 회원가입 css 코드를 짜는 중에 이미지, 문자 위치 조정이 내 맘대로 되지 않아서 html를 중간중간 고쳐서 심리적으로 많이 지쳤지만.. 완성을 할 수 있다는 생각에 힘이 생기기도 했던 것 같다. 내일 회원가입의 핵심인 key value를 잘 활용하기 위해서 Local storage에 대해서 공부를 해봐야겠다.

'Project > AWS-Front' 카테고리의 다른 글

화면 프로젝트 (6) - AWS 풀스택 과정 30일차  (0) 2024.08.26
화면 프로젝트 (5) - AWS 풀스택 과정 29일차  (0) 2024.08.23
화면 프로젝트 (4) - AWS 풀스택 과정 28일차  (0) 2024.08.22
화면 프로젝트 (2) - AWS 풀스택 과정 26일차  (0) 2024.08.20
화면 프로젝트 (1) - AWS 풀스택 과정 25일차  (0) 2024.08.19

'Project/AWS-Front'의 다른글

  • 현재글화면 프로젝트 (3) - AWS 풀스택 과정 27일차

관련글

티스토리툴바