728x90 반응형 querySelector5 [JAVASCRIPT] 4. 마우스 오버 효과 01 e.preventDefault() a태그 링크를 걸리지만 기본 명령어를 무시하고 원하는 명령어를 넣어보기 e.preventDefault(); 기존 명령어를 삭제함 네이버 02 마우스 오버 효과 ● mouseenter : = mouse hover 박스 핑크로 변했다가 마우스 떼면 아쿠아색으로 바꿔주기 scale 키웠다가 원래 크기로 변경해주기 같은 방법(너비 높이 값 지정) 03 반복된 요소에 이벤트 한꺼번에 연결하기 ● querySelectorAll 요소를 한꺼번에 지정 let : 변하는 값 e.preventDefalut(); 기본으로 갖고있는 명령어를 멈춤 item1 item2 item3 item4 04 클릭이벤트를 발생할 때 증가, 감소하는 프로그램 1씩 증가 1씩 감소 증가 감소 05 박스 돌.. 2023. 6. 23. [JAVASCRIPT] 자바스크립트 이벤트 연결하기 ● .addEventListener : 이벤트 발생시키는 명령어 ● 화살표 함수 link.addEventListener("click",function(){}); link.addEventListener("click",()=>{}); >> 두가지 방법으로 화살표함수를 넣을 수 있다. a태그가 우선시 되기 때문에 링크를 클릭하셨군요가 안나온다. ● preventDefault: 고유의 명령어를 무시하고 내가 원하는 값을 나오게 해주는 명령어다. a태그 속성값을 무시하고 원하는 값을 출력하게 하는 명령어 [박스 클릭했을 때 색상 변경하는 방법] 클릭이벤트 2023. 6. 22. [JAVASCRIPT]요소 선택하기 자바스크립트는 따로 링크를 걸지 않고 사용할 수 있다. frame 은 section # wrap 안에 있는 article이 들어간 것을 볼 수 있다. querySelector는 하나의 요소를 선택할 수 있다. querySelectorAll 은 여러개의 article을 모두 선택할 수 있다. ● 배열 for() 여러개 복수로 할땐 쿼리셀랙트올 + for문 을 써야 하나하나 방에 값을 뿌려줄 수 있다 querySelectorAll 랑 for문은 세트다 items 아이템이라는 변수에 넣어서 층에 0부터 3번까지 4개의 인데스값을 받으면서 처리한다. 2023. 6. 21. [JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 html 골격만들기 css 로 박스 편집 자바스크립트로 박스 스타일 편집하기 박스 변수 지정해주기 style 편집해주기 배경색 변경 border 편집 transform 여백적용 id.style.명령어 = 로 스타일을 편집할 수 있다. 카멜표기법 : 두번째 단어에 대문자를 넣어주는 표기법 ex) fontSize, textAlign 2023. 6. 20. [JAVASCRIPT] 1. 기초 html 기본 골격 ● console.log - 결과값이 잘 나왔는지 확인하는 용도 ● 주석: // h1 에 들어간 값은 웹페이지에 직접영향을 주지만, console 은 확인만 가능하다. 자바스크립트에서 변수지정해주기 console.log(title); 로 결과값 확인 2023. 6. 19. 이전 1 다음 728x90
