DOM은 HTML 문서의 계층 구조를 트리 형태로 표현하고 각 요소를 DOM 노드(DOM Node)로 다룹니다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델입니다. HTML 문서의 요소들을 자바스크립트에서 객체 형태로 다룰 수 있으며 웹 페이지와 상호작용할 수 있습니다. DOM Node 기본 개념 위의 예시와 같이 HTML 문서는 노드로 구성됩니다. DOM Node 접근 방법 자바스크립트로 HTML 요소에 … Read more
HTML에서 구조화된 데이터를 표현하려면 ul 같은 목록을 사용해야합니다. 목록 태그 중 대표적인 것은 ul (Unordered List)과 ol (Ordered List)입니다. 이 두 태그의 관련 속성, 스타일링 등을 자세히 알아보겠습니다. ul (Unordered List) – 순서 없는 목록 목록에 순서를 지정하지 않으려면 이 태그를 사용해야 합니다. 태그를 사용하면 각각의 항목 앞에 기본적으로 점(bullet)이 표시됩니다. 위의 예제를 HTML 파일로 … Read more
자바스크립트의 canvas 요소와 drawImage() 메소드를 사용하여 이미지를 그리는 방법은 쉽습니다. 또한 이를 통해 다양한 그래픽을 동적으로 생성할 수 있습니다. canvas는 HTML5에서 도입된 요소로, 자바스크립트로 그림을 그리거나 이미지를 삽입하는 데 사용됩니다. drawImage 기본 canvas 요소는 HTML에 정의하며, 자바스크립트를 사용하여 그림을 그립니다. 이미지를 삽입하려면 CanvasRenderingContext2D.drawImage() 메서드를 사용해야합니다. 이 메소드는 이미지 객체를 캔버스에 그리는 기능을 제공합니다. drawImage 크기 … Read more
requestAnimationFrame() 메소드는 자바스크립트에서 최적화된 성능으로 애니메이션을 구현하게해주는 중요한 메소드입니다. 이 메소드는 브라우저의 렌더링 주기(fps)에 맞춰 애니메이션을 부드럽게 실행하도록 도와줍니다. 특히 CPU와 GPU 자원을 효율적으로 사용할 수 있도록 해줍니다. requestAnimationFrame 기본 개념 메소드의 주요 기능은 화면을 새로 고칠 때마다 애니메이션을 한 프레임씩 실행해줍니다. 화면을 갱신하는 주기는 보통 60Hz, 즉 1초에 60번(16.7ms 간격)으로 설정되어 있습니다. 이 메서드는 … Read more