오늘 목표
개인 프로젝트 페이지 수정
js 프로젝트 실전 들어가기
오늘 공부한 것
querySelector : 가장 먼저 찾아진 하나의 메서드만 반환
querySelectorAll : 문서 내에 있는 조건에 맞는 모든 객체
원래는 getElementsByClassName 이었던 것을 최근에 배운 querySelector 로 바꿨는데 함수가 자꾸 에러가 나서 찾아본 결과 querySelectorAll 을 써야 하는데 querySelector 를 써서 그랬던 것이었다 모든 객체를 가져와서 비교하고 적용해야 하는데 하나만 가져오니 에러가 났던 것이었다
어려웠던 부분
i = 0; i < tabcontent.length; i++이 부분에서 .length 는 문자의 개수가 아니라 tabcontent 를 가진 요소의 개수였다
tabcontent 클래스를 가진 요소의 수 보다 i 가 작으면 i++ 하라는 것
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}이 예제에서 결국 두개의 for 문은 적용되어있던 효과? 이벤트? 들을 없애는 기능을 한다
선택된 요소에만 이벤트를 넣기 위해 이벤트의 중접을 없애는 작업인 것이다
이미지에 호버 기능을 줬는데 적용이 안되서 여러가지 만져보다 display: grid; 가 적용된 요소에는 호버가 실행되지 않았다 왜인지는 모르겠지만 그래서 display: flex; 로 바꾸고
grid 를 써야 했던 이유인 title 중첩을 position: absolute 로 바꿔 해결했다
