JQuery를 이용한 웹프론트 페이지 클론코딩

 
2022/12/26

지난주 수목 이틀에 걸쳐서 진행했던 웹페이지 구현 실습내용들!!

이미 상용되고 있는 페이지 원본의 형태를 보고

그대로 구현해보고 (HTML, CSS)

기능은(JS) 완전 기초적인 것만 넣었다!

 

 

 1. 잡코리아X알바몬 회원가입 사이트(팀과제) 

 

참고사이트(원본) :  https://www.jobkorea.co.kr/Join/M_Regist

 

오븐앱 와이어프레임

 

직접 디자인한 모습

팀원분이 css 다해주시고 나는 기능구현만 ㅎㅎ

 

 

회원가입의 기능구현을 위한 유효성 검사

기능제어 부분은 크게 두가지로

자바스립트와 jQuery 섞어서 사용했다

 

 

1) 입력되지 않거나 입력형태를 준수하지 않은 폼의 제출을 막고 적절한 경고창 띄우기

 

form태그의 onsubmit 이벤트 속성에

유효성 검사식을 담은 check함수를 핸들러로 연결하여

조건에 맞지 않은 데이터들이면

false값을 반환해 제출을 막는다.

function check(){
    const name = $('#inputName');
    const id = $('#inputId');
    const pw = $('#inputPw');
    const mail = $('#inputEmail');
    const phone = $('#inputPhone');
    const num = $('#inputNum');

    //이름, 아이디, 비밀번호, 이메일, 휴대폰번호, 인증번호중 하나라도 비어있으면 경고창뜨고 넘어가지 못하게 막음
    if( name.val()=="" | id.val()=="" | pw.val()=="" | mail.val()=="" | 
        phone.val()=="" | num.val()=="" ){
        window.alert("필수입력정보는 모두 입력해주셔야합니다.");
        return false;
    }

    //이름 정규표현식에 맞지 않으면 못넘어감 + 경고창(실명만 입력해주세요)
    const regName = /^[가-힣]{2,5}$/;
    if(! regName.test(name.val()) ){
        window.alert("이름은 실명만 입력해주세요.");
        name.focus();
        return false;
    }

    //아이디가 정규표현식에 맞지 않으면 못넘어감 + 경고창(6-14자의 영문, 숫자만 입력해주세요)
    const regId = /^([a-z]|[A-z]|\d){6,14}$/;
    if(! regId.test(id.val()) ){
        window.alert("아이디는 6-14자의 영문, 숫자만 입력해주세요.");
        id.focus();
        return false;
    }

    //비밀번호가 정규표현식에 맞지 않으면 못넘어감 + 경고창(8-16자의 영문, 숫자, 특수기호만 입력해주세요)
    const regPw = /^(\w|\d|[!@#$%^&*]){8,16}$/;
    if(! regPw.test(pw.val()) ){
        window.alert("비밀번호는 8-16자의 영문, 숫자, 특수기호만 입력해주세요.");
        pw.focus();
        return false;
    }

    //이메일 정규표현식에 맞지 않으면 못넘어 + 경고창(올바른 이메일 형식을 기입해주세요)
    const regMail = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    if(! regMail.test(mail.val()) ){
        window.alert("올바른 이메일 형식을 기입해주세요.");
        mail.focus();
        return false;
    }

    //휴대폰번호 정규표현식에 맞지 않으면 못넘어감 + 경고창(올바른 이메일 형식을 기입해주세요)
    const regPN = /^010-([0-9]{4})-?([0-9]{4})$/;
    if(! regPN.test(phone.val()) ){
        window.alert("올바른 휴대폰번호 형식(010-XXXX-XXXX)을 기입해주세요.");
        phone.focus();
        return false;
    }

    //인증번호 정규표현식에 맞지 않으면 못넘어감 + 경고창(인증번호는 숫자 4자리 입니다.)
    const regN = /^\d{4}$/;
    if(! regN.test(num.val()) ){
        window.alert("인증번호는 숫자 4자리 입니다.");
        num.focus();
        return false;
    }

    //가입하기 버튼 누를시에 -> 필수동의 항목 선택 안하면 경고창뜨게, form 넘어가지 못하게함
    //                     -> 개인정보 유효기간 선택안하면 경고창 뜨게, form 넘어가지 못하게
    const check1 = $('.chk');
    // console.log(check1);
    if( !check1[0].checked || !check1[1].checked || !check1[2].checked ){
        window.alert("필수동의항목을 반드시 동의해주셔야합니다.");
        return false;
    }

    const check2 = document.getElementsByName('impo');
    if( !check2[0].checked & !check2[1].checked & !check2[2].checked ){
        window.alert("개인정보 유효기간을 반드시 선택해주셔야 합니다.");
        return false;
    }
}

 

 

 

2) 전체동의 체크박스의 기능

 

종속된 checkbox의 checked 속성 상태와 최상위 checkbox의 checked속성 상태를 일치시켜줬다

$('#lb_chk_age1').on('click', function(){
    const box = document.getElementsByClassName('checked');
    for(let i=0; i<box.length; i++){
        box[i].checked = this.checked;
    }
});

 

 

 

---

 

 2. 올리브영 온라인 쇼핑몰 사이트(개인과제) 

 

개인과제를 고민하다가 올영세일한다는 알림톡받고 올영온라인 쇼핑몰로 정했다

 

참고사이트(원본) :  https://www.oliveyoung.co.kr/store/main/main.do?oy=0

 

대기업 사이트라 그런가.. 사진으로 떼우는거 거의없고

직접 작성한 것들이 많아서 퍼올만한게 많이 없었다...

 

오븐앱 와이어프레임

 

 

구현한 디자인

 

좀 막혔던 부분은 드롭다운 네비게이터 부분?

네비게이터 부분을 3개 넣었는데

본화면의 수직 네비게이터에 마우스 hover시에만 보이는

추가 드롭다운 네비게이터를 넣었다

 

 

.item li:hover{
    background-color: #333333;
}
.dropdown-content{
    display: none;
    position: absolute;
    z-index: 1;
    left: 180px;
    top: -30px;
    background-color: rgba(238, 232, 170, 0.8);
    width: 150px;
    box-sizing: border-box;
    padding: 20px;
}
.dropdown-content a{
    color:#505050;
    font-size: 10px;
}
.dropdown-content a:hover{
    background-color: #DCDCDC;
}
.dropdown:hover .dropdown-content{
    display: block;
}

 

 

dropdown div의 display속성이 none에서 block으로 바뀔때

z-index를 이용해 최상단에 위치시키고자

position값을 absolute로 설정했는데

 

절대위치에 드롭다운div가 고정돼서

화면 크기에 따른 동적조정이 안됨...

화면크기를 키우니 드롭다운 div의 위치가 난장판이 되었다

 

 

.item li:hover{
    background-color: #333333;
}
.dropdown-content{
    display: none;
    position: relative;
    left: 180px;
    top: -30px;
    background-color: rgba(238, 232, 170, 0.8);
    width: 150px;
    box-sizing: border-box;
    padding: 20px;
}
.dropdown-content a{
    color:#505050;
    font-size: 10px;
}
.dropdown-content a:hover{
    background-color: #DCDCDC;
}
.dropdown:hover .dropdown-content{
    display: block;
}

 

position을 relative로 바꾸어봤다

z-index없이도 최상위로 등장해서 해결된줄 알았는데..?

이번에 연관요소(relative요소)의 높이가 같이 변해버림

 

 

.item li:hover{
    background-color: #333333;
    height: 26px;
}
.dropdown-content{
    display: none;
    position: relative;
    left: 180px;
    top: -30px;
    background-color: rgba(238, 232, 170, 0.8);
    width: 150px;
    box-sizing: border-box;
    padding: 20px;
}
.dropdown-content a{
    color:#505050;
    font-size: 10px;
}
.dropdown-content a:hover{
    background-color: #DCDCDC;
}
.dropdown:hover .dropdown-content{
    display: block;
}

 

나름 해결방안!

hover상황에서 상위 li의 높이를

기존의 것과 같은 26px로 고정해서 해결!!!

 

 

 

 

그리고 기능구현 부분..! 시간이 없어서 딴거는 못하구

2, 4번째 section에서 버튼을 누르면 화면이 슬라드되는 효과와

함께 넘어가는 동적구현을 해보았습니다!!

 

이 부분과 관련해서 강사님이 캐러셀 라이브러리  CDN으로 연결해서 하는 방법을 추천해주셨는데..

이미 구현해놓은 css가 너무 복잡했고 라이브러리 구조도 이해못하겠고..

여러모로 힘들어서 그냥 순수 제이퀘리로 하기로 마음먹었다!!!

 

저는 jQuery에서 animate()함수를 사용해보았다!

이는 css 속성이 변경되는 이벤트에 진행시간을 지정하여 동적인 효과를 줄 수 있는 함수이다.

 

 $(선택자).animate( property [, duration ] [, easing ] [, complete ] ); 

 

위와같은 형태를 가진다.

각각 변경할 속성과 속성값(property) / 진행시간(duration)

/ 효과방식(easing) / 속성변경후 진행할 작업(complete)까지

선택적으로 입력이 가능하다.

 

$(function () {
    $("#btnslide1").click(function () {
      $(".part2").animate({ "margin-left": "-100px" }, 900, function () {
        $(".group1:first-child").insertAfter(".group1:last-child");
        $(".part2").css({ "margin-left": "-9px" });
      });
    });
});

$(function () {
    $("#btnslide2").click(function () {
      $(".part4").animate({ "margin-left": "-50px" }, 900, function () {
        $(".group2:first-child").insertAfter(".group2:last-child");
        $(".part4").css({ "margin-left": "-8px" });
      });
    });
});

 

 

현재 브라우저 요소 상태는

영역(part2, part4)에서 보여줄 수 있는 <div>묶음 3개에

각각 group1, group2라는 클래스를 부여해놓고 overflow:hidden 으로 숨겨놓은 상태

 

버튼을 클릭하면

part 부분자체의 왼쪽 마진이100픽셀 감소하는 작업이 0.9초에 거쳐 진행되어서 밀면서 이동하는 듯한 효과를 준다!

 

속성변경후 작업으로 group클래스 내

div들의 순서를 바꿔가면서 무한으로 슬라이드가 되도록 설정하고 &

새로운 슬라이드된 파트영역은 기존 마진(8px)으로 설정했습니다.

 

 

 

완성본