프론트엔드 여섯 번째 교육 !!!

김윤경·2023년 5월 11일
CSSJavaScripthtml멋쟁이사자처럼언더독레볼루션프론트엔드
0

FrontEnd

목록 보기
6/12
post-thumbnail

2023.05.11 Today I Learned(TIL)

오늘은 쿠팡 로그인 페이지 클론 코딩 !

01. 파일 구조 만들기

➡ 먼저 img와 script 폴더, 그리고 index.html, style.css, reset.css, script.js 파일을 만들었다.

02. index.html 작성하기

01) 기본적으로 header, main, footer를 만든다.

<body>
	<h1></h1>
    <main></main>
    <footer></footer>
</body>

➡ 쿠팡 로그인 페이지에서 header는 쿠팡 로고 이미지를 넣는 것이므로 main과 footer만 만들었다 !

02) main에는 form 태그 안에 fieldset을 만들고 fieldset 안에 legend를 넣어준다.

<main>
	<form action="#" method="post" id="loginForm">
    	<fieldset>
                <legend class="skip">로그인 양식</legend>
        </fieldset>
   </form>
</main>

➡ fieldset : 범위, 영역을 지정하는 것
➡ legend : 영역이 어떤 내용인지 작성

03) fieldset 안에 ul과 li 태그를 넣고 ID와 PW를 넣을 수 있는 칸을 만든다.

<fieldset>
	<ul>
      <li>
        <span class="id_bg"><!-- 배경이미지(메일) --></span>
        <span><input type="text" name="user_id" placeholder="아이디(이메일)"></span>
      </li>
      <li class="error id_error">아이디(이메일)을 입력해주세요.</li>
      <li>
        <span class="pw_bg"><!-- 배경이미지(비밀번호) --></span>
        <span><input type="password" name="user_pw" placeholder="비밀번호"></span>
      </li>
      <li class="error pw_error">비밀번호를 입력해주세요.</li>
  </ul>
</fieldset>

➡ ID와 PW를 입력하는 칸은 input으로, ID와 PW를 입력하지 않았을 때 error를 띄우도록 html 코드를 작성했다.

04) fieldset 안에 div 태그를 넣고 div 태그 안에자동 로그인과 ID/PW를 찾는 칸을 만든다. 그리고 div 태그 바깥에 로그인 버튼을 만든다.

<fieldset>
  <div class="btn">
    <p>
      <label>
        <input type="checkbox" name="login_y" id="login_y">
        <span>자동로그인</span>
      </label>
    </p>
    <a href="#" class="idpw_search">아이디(이메일)/비밀번호 찾기</a>
  </div>
  <button type="submit" id="login_btn">로그인</button>
</fieldset>

➡

05) main 안에 회원가입 페이지와 연결되는 a 태그를 넣어준다

<main>
  <a href="#" class="join_link">회원가입</a>
</main>

06) HTML 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coupang Login page</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <script src="script/script.js"></script>
</head>
<body>
    <h1><a href="#"><img src="img/logo.png" alt="coupang logo"></a></h1>

    <main>
        <form action="#" method="post" id="loginForm">
            <fieldset>
                <legend class="skip">로그인 양식</legend>
                <ul>
                    <li>
                        <span class="id_bg"><!-- 배경이미지(메일) --></span>
                        <span><input type="text" name="user_id" placeholder="아이디(이메일)"></span>
                    </li>
                    <li class="error id_error">아이디(이메일)을 입력해주세요.</li>
                    <li>
                        <span class="pw_bg"><!-- 배경이미지(비밀번호) --></span>
                        <span><input type="password" name="user_pw" placeholder="비밀번호"></span>
                        <span class="pw_show_hide" title="문자보이기"></span>
                    </li>
                    <li class="error pw_error">비밀번호를 입력해주세요.</li>
                </ul>

                <div class="btn">
                    <p>
                        <label>
                            <input type="checkbox" name="login_y" id="login_y">
                            <span>자동로그인</span>
                        </label>
                    </p>
                    <a href="#" class="idpw_search">아이디(이메일)/비밀번호 찾기</a>
                </div>
                <button type="submit" id="login_btn">로그인</button>
            </fieldset>
        </form>
        <a href="#" class="join_link">회원가입</a>
    </main>

    <footer>
        &copy; Coupang Corp. All rights reserved.
    </footer>
</body>
</html>

03. reset.css 작성하기

크롬에 reset.css를 쳐서 복붙하면 된당 !

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

04. style.css 파일 구조 만들기

➡ css는 상위 선택자 - 하위 선택자 순으로 작성하는 것이 알아보기도 쉽고 코드를 읽을 때도 편하다.
➡ 대신 class명은 . 으로, id명은 # 으로 작성하는 것은 까먹지 말기 !!!

/* h1 */
h1 {}
h1 a {}
h1 a img {}

/* main */
main {}
main #loginForm {}
main #loginForm fieldset {}
main #loginForm fieldset legend {}
main #loginForm fieldset ul {}
main #loginForm fieldset ul li {}

/* main - user_id 부분 */
main #loginForm fieldset ul li .id_bg {}
main #loginForm fieldset ul li span {}
main #loginForm fieldset ul li span input[name=user_id] {}
main #loginForm fieldset ul li .error {}
main #loginForm fieldset ul li .error .id_error {}

/* main - user_pw 부분 */
main #loginForm fieldset ul li .pw_bg {}
main #loginFrm fieldset ul li span input {}
main #loginFrm fieldset ul li span input::placeholder {}
main #loginFrm fieldset ul li span input[type=text] {}
main #loginForm fieldset ul li span input[name=user_pw] {}
main #loginForm fieldset ul li .pw_show_hide {}
main #loginForm fieldset ul li .error {}
main #loginForm fieldset ul li .error .pw_error {}

/* main - 자동 로그인 부분 */
main #loginForm fieldset .btn {}
main #loginForm fieldset .btn p {}
main #loginForm fieldset .btn p label {}
main #loginForm fieldset .btn p label input[name=login_y] {}
main #loginForm fieldset .btn p label span {}

/* main - ID/PW 찾기 부분 */
main #loginForm fieldset .btn .idpw_search {}

/* main - 로그인 버튼 부분 */
main #loginForm fieldset #login_btn {}

/* main - 회원가입 페이지 연동 부분 */
main .join_link {}

/* footer */
footer {}

05. script.js 파일 - querySelector, addEventListener

01) querySelector
: 더 구체적이고 한정적으로 우리가 원하는 엘리먼트를 선택 가능

const pw_show_hide = document.querySelector('.pw_show_hide');
const input_id = document.querySelector('input[type=text]');
const input_pw = document.querySelector('input[type=user_pw]');
const id_error = document.querySelector('.id_error');
const pw_error = document.querySelector('.pw_error');

02) addEventListener
: 이벤트를 등록하는 가장 권장되는 방식, 여러 개의 이벤트 핸들러 등록 가능

/* ID 칸을 클릭했을 때 입력되지 않으면 에러를 띄움 */
input_id.addEventListener('click', function(){
  id_error.style.display = 'block';
})
/* PW 칸을 클릭했을 때 입력되지 않으면 에러를 띄움 */
input_pw.addEventListener('click', function(){
  pw_error.style.display = 'block';
})
/* PW를 보이게 하는 코드 */
let i = true;
pw_show_hide.addEventListener('click', function(){
  if(i==true){
    pw_show_hide.style.backgroundPosition = '-126px 0'
    i=false;
  }else{
    pw_show_hide.style.backgroundPosition = '-105px 0'
    i=true;
  }
})

06. 마무리

오늘은 클론 코딩을 해봤다.
CSS 파일에 코딩을 할 때 보이는 것부터 하나하나 적어서 헷갈렸는데, 저렇게 먼저 선택자를 적어놓고 스타일을 작성하는 것이 더 쉽다는 것을 알 수 있었다.
Javascript는 사실 조금 아쉬웠다. 시간이 30분밖에 안 남아서 좀 조급하게 나간 감이 없지 않아 있었당.
다음 주에 더 열심히 해야징 ~~~
오늘도 알차게 공부했당 ! ✨😊🌟

profile
김윤경
이전 포스트

프론트엔드 다섯 번째 교육 !!!

다음 포스트

프론트엔드 아홉 번째 교육 !!!

0개의 댓글