전체보기27 [Javascript 기초] DOM 스타일링 Javascript를 사용하여 DOM 객체의 style을 다루는 방법입니다. 1. style 변경 (단일 속성, 복수 속성) 2. style 읽어오기 (getComputedStyle) 1. style 속성 추가 style.css속성 또는 style.cssText를 사용하여 style을 정의할 수 있습니다. 1) style.css속성 : 기존에 정의된 style에 새로운 속성을 추가합니다. *css속성은 카멜 케이스로 작성합니다. ex) background-color > backgroundColor 2) style.cssText : 기존에 정의된 style을 지우고, cssText로 덮어 씁니다. See the Pen DOM 스타일링 by 김민기 (@srmvdusg-the-builder) on CodePe.. 2023. 8. 9. [Javascript 기초] Event가 발생한 대상 알아내기 Event가 발생 대상을 알아내는 방법으로는 e.target과 e.currentTarget이 있습니다. [e.target] 이벤트가 발생했을 마우스 포인터가 위치해 있는 요소를 반환 [e.currentTarget] 이벤트가 발생했을 때 이벤트 문에서 선택자 요소를 반환 이러한 코드에서 각 요소를 클릭했을 때의 결과이다. 2023. 7. 25. [Javascript 기초] Event 발생 시 전달되는 Event 객체 DOM과 관련된 이벤트가 발생하면 이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터 등 이벤트 관련 정보가 모두 event객체에 저장됩니다. Event 객체와 Event 타입 중 마우스, 휠 이벤트에 대해서 알아보겠습니다. 1. Event 객체 아래는 Event 객체입니다. Property / Method Type Read / Write Explanation bubbles bool R 이벤트가 버블링되는지를 나타냄 cancelable bool R 이벤트의 기본 동작 취소가능 여부 currentTarget element R 현재 이벤트를 처리중인 요소 defaultPrevented bool R true면 preventDefault() 호출상태 detail integer R 이벤트와 관련된 추가정보 ev.. 2023. 7. 19. [Javascript 기초] Event의 이해 및 Event 연결 Event는 무언가 일어나는 행위나 액션을 말합니다. Event는 DOM에서 마우스 클릭, 키보드를 누르는 것처럼 사용자의 액션의 의해서 발생하거나, API들이 비동기적 작업을 진행하기 위해 생성할 수 있습니다. [사용자가 발생시키는 이벤트] : click, mouseover, mousemove, mousewheel, scroll ... [시스템이 발생시키는 이벤트] : load, error 다음은 Event 연결 방법에 대해 알아보겠습니다. 1. onclick onclick의 경우 이전에 작성된 구문이 덮어씌워집니다. 때문에 onclick보다 addEventListener를 사용하여 이벤트를 연결시킵니다. 링크 2. addEventListener 기존에 작성된 구문을 유지하고, 추가로 이벤트를 연결합니.. 2023. 7. 18. 이전 1 2 3 4 5 6 7 다음