#4 - Hidden Search

✨ HTML

input 태그

type, name, class, placeholder 등이 속성으로 있는데 type 을 꼭 까먹지 말고 적자

 <input
 	type="text"
    class="input"
    name="search"
    placeholder="Search..."
/>

✨ CSS

transition (애니메이션)

transition: width 0.3s ease;
width 자리에 들어가는 속성은 변하는 속성으로 위의 예제는 width 값이 변하면 transition이 발생한다.

❗️ 이때 flex는 그 자리에 들어갈 수 없음!!

이 속성은 변화하는 자식의 부모 요소에 넣어야 변화가 발생할 때랑 다시 돌아올 때 모두 속성이 적용된다.

✨ JavaScript

👀 내가 시도한 방법
search = true/false 로 상태 변경

1. 태그.style.속성 사용 ➡️ input.style.display = "none"

let search = false;

button.addEventListener("click", () => {
  if (search === true) {
    input.style.display = "none";
    search = false;
  } else {
    input.style.display = "block";
    search = true;
  }
});

2. classList.add("추가할 클래스") / remove("추가할 클래스") 사용

let search = false;

button.addEventListener("click", () => {
  if (search === true) {
    container.classList.remove("active");
    search = false;
  } else {
    container.classList.add("active");
    search = true;
  }
});

👀 더 좋은 방법
.classList.toggle() 사용

.classList.toggle()

클래스가 이미 존재하면 제거하고, 존재하지 않으면 추가한다.

btn.addEventListener('click', () => {
    search.classList.toggle('active')
    input.focus()
})

focus()

이 메서드는 input 요소에 포커스를 설정한다.
즉, 사용자가 페이지를 로드하거나 버튼을 클릭할 때 해당 input 필드에 커서가 자동으로 놓이게 되고 사용자가 즉시 입력을 시작할 수 있도록 도와준다.