본문 바로가기
728x90

JavaScript35

15. 자바스크립트로 스타일 수정하기 [모던자바스크립트 프로그래밍의 정석] CSS 속성에 접근하고 수정하기 자바스크립트를 사용해 각 요소의 스타일 정보를 가져올 수도 있고, 원하는 스타일 속성을 바꿀 수도 있습니다. CSS 속성에 접근하려면 요소에 접근한 후 예약어 .style 과 CSS 속성을 사용해야 합니다. ClassList 프로퍼티 자바스크립트로 CSS 속성을 조절하는 기능은 다양하게 활용할 수 있습니다. 그중에서도 classList는 DOM에서 자주 사용하는 프로퍼티 입니다. CSS를 공부했으면 웹 요소에 2개 이상의 클래스 스타일을 적용할 수 있다는 것을 알 것입니다. 자바스크립트를 사용하면 클래스 스타일을 추가 또는 삭제 하면서 다양한 효과를 만들 수 있는데, 이것을 classList라는 프로퍼티 때문입니다. classList는.. 2023. 1. 4.
14. 웹 요소에 접근 [모던자바스크립트 프로그래밍의 정석] querySelector( ) 함수 먼저 웹 요소에 접근할 때 자주 쓰는 CSS 선택자에 대해서 가볍게 살펴 보겠습니다. id 선택자와 class 선택자, 타입 선택자를 비롯하여 하위 선택자, 자식 선택자 등을 자주 사용합니다. 선택자 기능 사용 예시 타입 선택자 특정 태그를 사용한 모든 요소 p { ... } class 선택자 클래스명을 사용하는 특정 부분 .accent { ... } id 선택자 id명을 사용하는 특정 부분 #container { ... } 하위 선택자 A 요소의 하위에 있는 모든 B 요소 form input { ... } 자식 선택자 A 요소의 하위에 있는 요소 중 자식 레벨의 B 요소 ul > li { ... } querySelectot( ) .. 2023. 1. 4.
13. DOM [모던자바스크립트 프로그래밍의 정석] DOM 웹에서 자바스크립트를 사용하는 큰 이유는, 어떤 조건에 맞거나 사용자 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응을 하기 때문 입니다. 이렇게 하려면 웹 문서에 담겨 있는 모든 요소를 따로 제어 할수 있어야 합니다. DOM이란, 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법을 말합니다. DOM에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의합니다. 웹 문서는 여러 가지 태그가 서로 포함 관계를 가지고 있습니다. 예를 들어 태그 안에 태그가 들어 있는 때 처럼 말입니다. 이런 포함 관계 때문에 각 태그 간에는 '부모'와 .. 2023. 1. 4.
12. 전개 구문과 타이머함수 [모던자바스크립트 프로그래밍의 정석] 전개 구문 전개 구문은 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨 주거나 배열과 배열을 합할 때 처럼 배열을 하나의 덩어리로 처리해야 할 때 아주 유용합니다. 전개 구문이란, 말 그대로 '값을 펼쳐주는 구문'입니다. 전개 구문에서는 3개의 마침표를 이용해서 '...' 기호를 사용합니다. console.log( ...fruits) 전개 구문은 함수를 선언할 때 사용할 수도 있습니다. 함수를 선언 하면서 몇개의 인수를 받게 될지 알수 없는 경우도 있습니다. 이때 전개 구문을 사용해서 매개변수를 만드는데, 이것을 나머지 매개변수 라고 합니다. setInterval( ) 일정한 시간마다 함수를 반복해서 실행하는 함수로, 시간은 밀리초 단위를 사용합니다. 1 2 3 4.. 2023. 1. 3.
728x90

티스토리툴바