css100 챌린지, day6 구현하기 (with dom 이벤트)

1. 미리보기

버튼을 클릭했을 때 Dom이벤트를 어떻게 줄 수 있을까? css100 챌린지의 day 6를 구현하면서 알아보자!

See the Pen css100_day6 by KumJungMin (@kumjungmin) on CodePen.

2. 코드 설명

1) js와 css로 이벤트 주는 법?

• 우리는 preview(혹은 gif)에서, 버튼 클릭시 이벤트가 발생하는 걸 보았다.
• 그렇다면, 어떻게 dom에 이벤트를 줄 수 있을까?
• preview에서 살펴 본 이벤트 중, 검색창 이벤트 코드를 분석해보자.

2) 검색창 등장 이벤트

(1) 이벤트 발생시, 적용할 클래스 선언하기

• search 버튼 클릭시, 검색창(search-bar)에 이벤트를 적용하고자 한다.
• 이 경우, 검색창에 적용하고 싶은 class을 css에 선언한다.

  .visible-search {
  width : 70%;
  left : 10px;
  opacity : 1;
  }

  
  

(2) 이벤트를 적용할 dom 가져오기

• js에서 document.querySelector('.class')를 이용해 html에서 특정 dom을 가져올 수 있다.
• 이 변수를 사용해 우리는 dom 이벤트를 조작할 수 있다.

  let search = document.querySelector('.search');         //검색버튼
  let searchBar = document.querySelector('.search-bar');  //검색바

  
  

(3) 이벤트 함수 적용하기

• addEventListener("click", 함수)을 이용하면, 특정 dom에 click 이벤트가 발생시 함수를 실행시킬 수 있다.

  search.addEventListener("click", function() {
  ...
  })

앗, 혹시 classList.toggle('className')에 대해 알고 있는가?

• 이 classList를 사용하면 우리는 특정 dom에 class를 적용할 수 있다.
  (홀수번 클릭시 클래스 적용, 짝수번 클릭시 클래스 미적용)
• 앞서 우리는 css에서 search-bar에 적용하고 싶은 클래스(visible-search)를 선언했다.
• search버튼을 1번 클릭시 visible-search를 적용하고, 2번 클릭시 미적용하고 싶다면 아래와 같이 사용하면 된다.

search.addEventListener("click", function() {
  searchBar.classList.toggle('visible-search');
})

3) 최종

(1) html

: 검색아이콘(search), 검색창(search-bar)을 작성한다.

<span class="fa fa-search icon search"></span>
<input class="search-bar" placeholder="Search ..." />

(2) css

: 처음에는 검색창(search-bar)이 보이지 않게 opacity: 0을 준다.

.search{
  transition: 0.5s;
  cursor: pointer;
  &:hover {
    color: #7D68EE;
  }
}
.search-bar {
  position: absolute;
  width: 0;
  height: 20px;
  opacity: 0;     //투명도 0
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid white;
  border-radius: 15px;
  left: 220px;
  transition: 0.5s;
  &:focus {
    outline: none;
  }
}

/*animation class*/
.visible-search {
  width : 70%;
  left : 10px;
  opacity : 1;
}

(3) javascript

: search를 클릭했을 때, searchBar에 visible-search클래스를 적용한다.
: 결국, click시 opacity:0 => opacity:1이 되므로 검색창이 나타나게 된다.

let search = document.querySelector('.search');
let searchBar = document.querySelector('.search-bar');

search.addEventListener("click", function() {
  searchBar.classList.toggle('visible-search');
})