airbnb 클론코딩

펭도리·2021년 3월 7일

addEventListener after before closest contains()hover

Project

목록 보기

3/5

airbnb를 만든 화면이다.

주된 컨텐츠

우측 상단 login_box 만들기
가운데 각 menubar의 title hover 작동
menubar의 hover 기능 && 클릭시 달력 동작 등
나머지 html 작업(사진 간격 등)

내가 완벽하게 하지 못한 작업

달력의 추가 기능들

체크인, 체크아웃을 자유롭게 선택하여 출력하기
그 외에 css 작업

login_box

addEventListener

document.createElement("div")를 통해 div 전체적인 div 박스를 하나 만들어 주었다.
classList.add로 class를 추가해 주었고 innerHTML를 통해 내용을 채워주었다.

구현을 하던 도중 클릭시 메뉴가 나타나게는 만들었는데 없어지지 않는 문제점을 마주하였다.
여기서 생각해낸것이 display:block를 add, remove 해주는 것이였다.
그렇게 무난하게 만들어 지는줄 알았지만 😱😱

역시 쉽다고 생각하면 바로 막히는게 생기는게 매력인 코딩😅

login_box부분 외에 다른 곳을 클릭할 경우 메뉴바가 사라지지 않았다. 이걸 해결하기위해 생각해낸 것이 closest였다.

closest

const close = e.target.closest(".loginbox");

🌟MDN참조🌟

기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.

위의 근거에 기반하여 click 시 정보를 e 변수에 담아주고 target으로 e의 정보를 들여다 볼 수 있게 된다.
그리고 closest는 내가 클릭한 부분의 자식요소의 id와 class에 대한 정보를 가지게 된다.
closest(".loginbox")로 지정해 줬기 때문에 내가 클릭한 부분에 loginbox라는 class를 가지고있는지 확인을 하게되고 가지고 있다면 해당되는 element를 반환하고 없다면 nulll를 반환하게 된다.

반환된 element

<button class="loginbox" type="button">
    <div id="loginbox_id">
        <div><img class="login_img1" src="./images/list.svg"></div>
        <div><img class="login_img2" src="./images/people.svg"></div>
    </div>
</button>

이것만으로 부족해서 contains API를 사용하였다.

const contain = tempDiv.classList.contains(TEMP_CLASS)

tempDiv 포함 그 하위 노드에 TEMP_CLASS라는 className을 가지고 있다면 true를 반환하고 없다면 false를 반환한다.

이렇게 버튼을 클릭했을 경우와 버튼이 아닌 다른곳을 클릭했을 경우 메뉴바가 사라지게 동작하게 하였다.

hover

:before 와 :after

가상요소 : 존재하지 않는 요소를 존재하는 것 처럼 선택하여 element처럼 사용할 수 있다. 그것이 :beofore 와 :after 이다.

input + span:after은 span 요소 콘텐츠의 끝에 새로운 콘텐츠를 생성한다는 뜻이다.
즉 span태그 뒤에 가상의 div? 같은 박스가 생겼다고 생각하면 이해하기 편하다.
width:0px였다가 input의 radio가 check되어있지 않고 hover시 글씨색변경 + width:15px로 변경하고 transition을 줌으로써 늘어나는듯한 효과를 주었다.