🦄 온보딩 스터디 3주차 1일 TIL
✨03/20 : 목표 : CSS 1강 + 네이버 검색바 만들기
오늘부터 온보딩 스터디 CSS과정을 시작한다. CSS는 이미 어느정도 다룰 줄 알기 때문에 부족했던 flex, grid 개념 등과 SASS 등에 대해 보충하여 공부해보려고 한다. 오늘은 CSS기초 강의 1강과 연습삼아 네이버 검색바를 만들어 보았다.
📒CSS 1강 + 네이버 검색바 만들기
01 네이버 검색바 만들기
Html
<body>
<div class="wrap">
<h1 class="logo"></h1>
<div class="searchBar">
<div class="inputBox">
<input type="text" class="searchInput" />
<div class="bottons">
<button class="keyboard">⌨️</button>
<button class="dropdownBtn">
<i class="fa-solid fa-caret-down"></i>
</button>
</div>
</div>
<button class="searchBtn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<ul class="dropdown" data-dropdown="false">
<li>List1</li>
<li>List2</li>
<li>List3</li>
<li>List4</li>
<li>List5</li>
</ul>
</div>
</div>
CSS
- boder나 padding 요소에 box-sizing : border-box 해주기
.searchBar {
width: 100%;
max-width: 586px;
display: flex;
border: 2px solid #5fc04c;
box-sizing: border-box;
position: relative;
}- dropdown메뉴 => 높이값이 없으면 해당 transition 효과가 잘 일어나지 않는다.
.dropdown {
width: 100%;
height: 0;
background-color: #fff;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 100%;
padding: 2%;
z-index: -1;
visibility: hidden;
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
}
.visible {
height: 180px; // 높이를 auto로 지정해주면 해당transition효과가 일어나지 않는다.
visibility: visible;
}- ul 안의 li리스트가 동적으로 생성될 때 ul의 높이도 같이 조정되도록 하려고 했는데, 원하는 것처럼 잘되지는 않았다. 그렇게는 잘 사용하지 않는다고 하니 아이러니 하지만 일단 높이값을 정해두고 만들었다.
JS
- 검색바 또는 드롭다운 버튼 클릭 시 검색리스트(ul)가 나오게 만들기
"use strict";
const searchBar = document.querySelector(".searchBar");
const dropDownBtn = document.querySelector(".dropdownBtn");
const dropDown = document.querySelector(".dropdown");
const handleClick = (e) => {
const target = e.target;
console.log(target.className);
if (
target.className === "fa-solid fa-caret-down" ||
target.className === "dropdownBtn" ||
target.className === "searchInput"
) {
dropDownClick();
}
};
const dropDownClick = () => {
// event로 접근하지 않아도, 선택자의 class나 속성값에 접근 가능하다.
const isDropDown = dropDown.getAttribute("data-dropdown");
dropDown.setAttribute("data-dropdown", !isDropDown);
dropDown.classList.toggle("visible");
dropDownBtn.classList.toggle("triangleUp");
};
searchBar.addEventListener("click", handleClick);❗event.target으로 굳이 접근하지 않아도 선택자의 class나 속성에 접근 가능하다.
event는 위임으로 원하는 요소 클릭 시 이벤트가 발생하도록 분기처리 하는 등에 사용하고,
요소에 접근하는 것은 class나 속성값으로 접근하는 것이 더 손쉽고 간편한 방법인 것 같다.
❗dataset 속성은 true나 false와 같은 boolean값도 전부 문자열데이터로 할당하기 때문에 비교연산자를 쓸 때, boolean이 아닌 문자열""로 비교해 주어야 한다. => isDropDown === true ❌ / isDropDown === "true" ⭕
- classList 속성 => classList .add() , classList .remove(), classList.toggle()
각각 기존의 클래스리스트에서 추가, 삭제, 토글 기능도 넣고 뺄 수 있다.
- className과의 차이점은 className은 아예 클래스 자체를 설정한 값으로 새로 생성하고, classList는 기존의 클래스리스트에서 추가 등 수정한다는 점이다.
- className으로 클래스명 가져와 비교할 때는 모든 클래스명을 다 써줘야 한다.(여러개 존재할 때 한개만 비교 시, false 반환) => target.className === "fa-solid" ❌ / target.className === "fa-solid fa-caret-down" ⭕
결과🙌 => 검색창 클릭 시 드롭다운
'항해99 > 온보딩 스터디' 카테고리의 다른 글
| [JS] 온보딩 3주 4일차 - 동기와 비동기, 콜백지옥과 Promise (0) | 2023.03.23 |
|---|---|
| [항해99] 온보딩 스터디 - 2주차 5일 TIL (0) | 2023.03.18 |
| [항해99] 온보딩 스터디 - 2주차 4일 TIL (0) | 2023.03.17 |
| [항해99] 온보딩 스터디 - 2주차 3일 TIL (0) | 2023.03.16 |
| [항해99] 온보딩 스터디 - 2주차 2일 TIL (0) | 2023.03.15 |
