본문 바로가기

웹 프론트엔드3

[JavaScript] addEventListener 작동오류 (addeventlistener is not a function) 특정 위치에 마우스를 올리면 버튼 색에 변화를 주려는 코드를 작성하던 중 addEventListener가 작동을 안한다..?! 원일을 파악해보니 DOM을 제어하기 위해 선언한 getElementsByClassName() 의 경우 객체를 배열로 출력하기에 발생한 문제이다. HOME SERVICE ABOUT PRICING CONTACT US class="navBtn" 을 제어하기 위해 getElementsByClassName() 사용할 경우 class에 해당하는 대상이 여럿임으로 배열로 출력이 진행된다 const navBtn = document.getElementsByClassName("navBtn") console.log(navBtn) 이제 발생한 문제를 해결해보자. 방법 1. DOM 객체 중 1개만 활용.. 2022. 6. 14.
HTML5 Semantic Elements (시멘틱 요소) 시멘틱 요소(Semantic Elements)란? 시멘틱 요소 = 의미가 있는 요소, HTML5 이전에는 , 등 범용적으로 사용할 수 있는 의미가 크게 없는 요소를 활용하여 layout을 구성하였으나, 이는 유지보수 및 협업시 해석하는데 오래 걸릴 수 있다. 각 요소별 의미있는 tag를 확용하여, 브라우저 및 개발자 모두에게 명확하게 사용할 수 있도록 하는 요소. Semeantic Elements 종류 이번에 공부하면서 사용된 요소는 다음과 같다. Happy holidays! Enjoy the holidays with your family and friends with these festive recipes and gift ideas! sweet berry pie the sweetest and easie.. 2022. 5. 10.
JS 클론코딩 정리. with 노마진코더 웹 프론트엔드 분야에 관심이 크게 생겨 JS 와 친해지기 위해 모두의 선생님인 니코쌤의 바닐라 JS 챌린지에 참여하게 됫다. 이해가 잘 되도록 하는 양질의 강의임에도 불구하고 지속적인 업데이트와, 내용 구성이 너무 좋아서 이래서 니코쌤 니코쌤 한다는걸 다시한번 느꼇다. I love nico쌤~! 강의 내용중 언제든지 복기 할 수있는 내용들을 정리해보려 한다, 단! 무료강의지만 챌린지의 내용은 블로그 공유가 불가한 점 참고하여 공통되는 기술적인 파트의 대한 내용을 정리하려한다. Part.1 JavaScript, Html, CSS 그게 뭔데? 본인도 어렴풋이 뭐 웹 언어하면 JavaScript, Html, CSS 이런거 쓰겠지~ 라고 생각만 하고 있었고 정확히 어떤식으로 동작이 이루어지는지 누가 물어본다면 .. 2022. 2. 16.