focus2 addEventLister 중 Blur와 Focus는 어떻게 쓸까? https://ko.javascript.info/focus-blur focus와 blur ko.javascript.info 기술에 대해 제일 잘 써져 있는 것은 공식 문서기때문에 제일 앞에 첨부를 하고 Blur와 Focus에 대해 내가 이해한 내용을 쉽게 풀어서 써보려고 한다. Blur와 Focus는 addEventListener의 한 종류로써 focus는 이벤트를 쓴 요소에 포커스를 두었을때 발생하고 blur는 이벤트를 쓴 요소에 포커스를 잃었을때 발생한다. 모든 태그에 쓸 수 있는 줄 알았는데 사용자와 상호작용하는 태그들에만 사용이 가능하고 div, span 같은 태그에는 적용이 안된다고 한다. 하지만! 하고 싶을 때는 html의 tabindex 속성을 쓰면 된다. 속성값은 숫자로 표현되며 1에 포커.. 2023. 6. 14. opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기 프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만 메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다. 실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요. 메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요. 먼저 DOM으로 필요한 값들을 불러왔다. const man = document.getElementById("man"); 버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다. 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다. 이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아.. 2023. 6. 13. 이전 1 다음