FE 교육 6주차 TIL

클론코딩!!!

이번주에는 쿠팡 로그인 페이지를 그대로 클론코딩 해봤다

위 웹페이지 이다!!!

코딩을 시작하기 전에!!!

깃허브에 레포지터리에 푸쉬하는 것을 복습겸 다시 해봤지만 여전히 어려웠다ㅠㅠㅠ
정리해보자면

local(내 pc)에서 해야될거

아래 내용을 순서대로 터미널(git Bash)에 입력한다.

git init
git remote add orgin 레포지터리 링크
git add .
git commit -m "커밋 메시지"
git push -u orgin main

git hub사이트에서 해야 될거

1. new repositiory
2. create repository

새롭게 배운 태그들

form 태그

: 특정한 양식을 보낼 때 사용(신청하거나 제출을 할 때)

fieldset 태그

: 범위를 지정할 때 사용해준다. ex) 개인정보영역, 설문 영역

legend 태그

: fieldset 태그안에 들어가며 상세내용을 담아주는 태그이다.

JS API들

querySelector()

document내에 있는 요소들 선택할 수있다.
따라서 html의 태그들을 클래스명 id명 속성값등으로 변수로 가져올 수 있다!!!!

예시 : 클래스명이 "pw_show_hide"인 요소를 선택해 pw_show_hide변수에 저장한다.

const pw_show_hide = document.querySelector('.pw_show_hide')

addeventListener()

어떤 요쇼에대해서 'click'이나 'keydown'등 이벤트가 발생하는 것에 대해서 다뤄줄 수 있는 API이다.

예시 input_id요소의 'click'이라는 이벤트가 발생했을 때 display속성값을 'block'으로 바꿔줘서 요소를 안보이게 해준다.

input_id.addEventListener('click', function(){
        id_error.style.display = 'block';
    })

windows.onload()

윈도우창이 열렸을때 함수가 실행되게 해주는 API이다.

위에 3개의 메쏘드를 통해서 이벤트가 발생했을 때 요소를 안보이게 하거나
요소의 이미지를 다른 이미지로 바꾸는등 웹페이지의 다양한 기능을 구현할 수 있었다.

CSS 선택자 작성하기

처음에는 HTML에 있는 모든 요소를 선택해준다.

h1 {}
h1 a {}
h1 a img {}

main {}
main #loginFrm {}
main #loginFrm fieldset {}
main #loginFrm fieldset ul {}
main #loginFrm fieldset ul li {}
main #loginFrm fieldset ul .error {}
main #loginFrm fieldset ul .id_error {}
main #loginFrm fieldset ul .pw_error {}
main #loginFrm fieldset ul li span {}
main #loginFrm fieldset ul li .id_bg {}
main #loginFrm fieldset ul li .pw_bg {}
main #loginFrm fieldset ul li span input {}
main #loginFrm fieldset ul li span input[type=text] {}
main #loginFrm fieldset ul li span input[type=password] {}
main #loginFrm fieldset ul li .pw_show_hide {}
main #loginFrm fieldset .btm {}
main #loginFrm fieldset .btm p {}
main #loginFrm fieldset .btm p label {}
main #loginFrm fieldset .btm p label input[name=login_y] {}
main #loginFrm fieldset .btm p label span {}
main #loginFrm fieldset .btm .idpw_serch {}
main #loginFrm fieldset #login_btn {}
main .join_link {}

footer {}

클론코딩을 하면서...

클론코딩으로 실제 페이지를 구현해보면서 지금까지 해왔던것의 성과를 어느정도 눈으로 직접확인하니 뭔가 뿌듯하고 앞으로도 잘할 수 있을 것같은 생각이 들었다!!!!