TIL 210728

jm·2021년 7월 28일
0

구글 메인화면 클론코딩 - 4

한달이 넘도록 업데이트가 없던 (사실은 외면하고 있었던) 구글 클론코딩을 수정했다.

수정한 부분

모바일에서 옹졸해진 툴팁박스의 width를 조절하고 늘어난 만큼 툴팁박스 위치를 조금 수정해주었다.


a 태그에 span을 두개나 넣은 이상한 마크업을 수정했다. 처음부터 div로 할 걸🥲

추가한 부분

드롭다운 메뉴

HTML

<div class="header-apps tooltip">
  <span class="material-icons">apps</span>

  <div class="dropdown">
    <div class="dropdown-content">
       <span class="material-icons">
       	 account_circle
       </span>
       <span class="text">Google 계정</span>
   </div>
   <div class="dropdown-content">
     <span class="material-icons">
       search
     </span>
       <span class="text">검색</span>
   </div>
   
   (이하생략)
   
</div>

지금 생각 해보니까 dropdown 클래스와 dropdown-content의 관계를 div>div 보다는 ul>li 했으면 더 의미있는 마크업이었을 것 같다.

CSS

/* dropdown */

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -95px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-wrap: wrap;
  padding: 16px;
  width: 280px;
  max-height: 400px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 1px 1px 5px #969696;
  overflow: scroll;
  visibility: hidden;
  z-index: 2;
}

.dropdown.show {
  visibility: visible;
}

.dropdown-content {
  width: 80px;
  height: 85px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}

.dropdown-content:hover {
  background-color: rgba(218, 230, 249, 0.728);
}

.dropdown-content .material-icons {
  font-size: 40px;
  margin-bottom: 5px;
  color: #1a73e8;
}

.dropdown-content .text {
  font-size: 14px;
}

.dropdown-blank {
  width: 80px;
  height: 85px;
  border-radius: 15px;
}

.another-contents {
  display: inline-block;
  margin: 0 auto;
  margin-top: 20px;
  width: 180px;
  height: 36px;
  border: 1px solid #cacaca;
  border-radius: 6px;
  background-color: #fff;
  color: #1a73e8;
}

.another-contents:hover {
  border-color: #639fee0f;
  background-color: #639fee0f;
}

내가 아는 CSS 속성은 다 집어 넣은 것 같다👀

  • z-index


.dropdown이 main의 로고와 인풋 뒤로 가지 않게 z-index 속성을 주어 앞으로 오게 만들었다.

  • visibility

.dropdown을 visibility: hidden; 으로 설정하고 JS를 이용하여
.show 라는 클래스가 추가 되었을 떄 visibility: visible; 로 설정이 바뀌도록 했다.

JavaScript

const apps = document.querySelector(".header-apps");
const dropdown = document.querySelector(".dropdown");

apps.addEventListener('click', () => {
  dropdown.classList.toggle('show');
});

apps.addEventListener('mouseleave', () => {
  dropdown.classList.remove('show');
});

원래 의도는 두번째 addEventListener의 이벤트를 blur로 하려고 했는데 이것저것 해봐도 작동이 안되서 결국 mouseleave로 하게 되었다.

이렇게 오늘의 목표였던 드롭다운 메뉴 구현하기는 성공했다. 문제는..

수정할 부분

  • 드롭다운 js 수정
  • 툴팁 위치 드롭다운 메뉴 위로 올라오게 수정

모바일이나 태블릿 화면과 컴퓨터의 크롬 브라우저에서는 드롭다운 이벤트가 정상으로 작동했지만 사파리에서는...

어휴...

문제의 원인 생각해보기

아무래도 이벤트에 blur가 아닌 mouseleave를 사용해서 그런 것 같다. blur가 왜 안되는지는 아직도 모르겠지만 그 이유를 다시 찾아봐야겠다.. DOM 공부를 더 해야겠다..

github

https://github.com/JiminKim-dev/google-clone/

0개의 댓글