HTML의 img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다. 이는 자체적으로 닫히는 태그이며, 이미지를 페이지에 표시할 때 필요한 여러 속성들 설정할 수 있습니다. 기본적으로 이미지의 경로, 대체 텍스트(alt 속성), 너비와 높이 등을 지정할 수 있습니다. img 기본 사용 img 주요 속성 src (source) 이미지를 불러올 경로를 지정합니다. alt (alternative text) 이미지가 로드되지 않거나 접근성 … Read more
브라우저에서 클립보드 기능을 사용하려면 자바스크립트의 Clipboard API를 사용하여 복사, 붙여넣기 등의 작업을 수행할 수 있습니다. Clipboard API를 사용하면 텍스트를 복사하거나 붙여넣는 기능을 웹 애플리케이션에 추가할 수 있습니다. 이는 Clipboard 객체를 통해 클립보드 기능과 상호작용하며, 사용자가 데이터를 복사하거나 붙여넣을 수 있게합니다. 클립보드 복사 navigator.clipboard.writeText() 메소드를 사용하여 텍스트를 복사할 수 있습니다. writeText() 메소드는 Promise 객체를 리턴하며, 성공적으로 … Read more
CSS 미디어 쿼리(Media Query)는 웹 페이지를 다양한 화면 크기와 해상도에 맞게 조정하는 CSS 기술입니다. 즉, 사용자의 디바이스나 화면 환경에 따라 스타일을 다르게 적용할 수 있습니다. 이를 통해 HTML 요소의 레이아웃을 반응형으로 만들 수 있습니다. 미디어 쿼리 기본 구조 이는 @media 규칙을 사용하여 정의합니다. 이 규칙은 특정 조건(화면의 너비, 높이, 해상도 등)에 따라 스타일을 적용할 수 … Read more
CSS의 Flexbox 레이아웃은 웹 페이지를 구성할 때 자주 사용하는 모델입니다. Flexbox 레이아웃을 사용하면 HTML 요소가 일정한 공간에 배치되며, 다양한 화면 크기와 조건에서 적절하게 배치합니다. 이는 주로 수평, 수직 레이아웃을 쉽게 처리할 수 있게 해 줍니다. 기본 개념 이 레이아웃은 두 가지 주요 개념으로 구성됩니다: Flexbox 기본 속성 Flex Container 속성: Flex Item 속성: 예제 1: … Read more
async await 명령어는 자바스크립트에서 비동기 코드를 더 직관적이고 동기적인 방식으로 작성할 수 있게 해주는 문법입니다. 이 두 가지는 Promise 객체를 기반으로 동작하며, 비동기 작업을 보다 쉽게 처리할 수 있도록 도와줍니다. async await 기본 개념 예제 1: 기본적인 사용 위의 예제를 개발자 도구에서 실행하면 이미지와 같은 결과를 얻을 수 있습니다. 먼저 getData() 함수가 async로 정의되어 있고, … Read more
Promise 객체는 비동기 작업의 완료 또는 실패를 처리해줍니다. 이는 비동기 작업이 끝날 때 결과를 처리하여 콜백 지옥을 피하게 해주고 코드의 가독성과 유지보수성을 높여줍니다. Promise 기본 개념 이 객체는 세 가지 상태를 가집니다: 객체가 생성되자마자 비동기 작업을 실행하고, then 또는 catch 메소드를 통해 작업의 성공 실패 결과를 처리할 수 있습니다. Promise 생성자 객체 생성 시 executor … Read more
canvas 요소는 2D 그래픽을 그릴 수 있게 하는 매우 강력한 도구입니다. 이를 활용하면 다양한 시각 효과나 인터랙티브한 그래픽을 구현할 수 있습니다. 또한 Pointer Events는 마우스, 터치, 스타일러스 등 다양한 입력 장치를 효율적으로 처리할 수 있게 해 주는 API입니다. 이 포스트에서는 Pointer Events와 canvas를 사용해 그림판을 만드는 방법을 알아보겠습니다. Pointer Events 란? Pointer Events는 마우스 이벤트(Mouse … Read more
HTML5의 canvas 요소는 그림 그리기, 애니메이션 렌더링 등에 사용할 수 있는 요소입니다. 이는 비트맵 이미지를 처리할 수 있는 렌더링 화면을 제공하며, 자바스크립트로 직접 제어하여 다양한 형태의 그래픽을 그릴 수 있게 해줍니다. 이번 포스트에서는 자바스크립트로 canvas에 도형을 그리는 방법을 알아보고, 여러 가지 예제를 통해 그 사용법을 익혀보겠습니다. 그리기 기본 설정 그림을 그리려면 먼저 HTML에 <canvas> 요소를 … Read more
자바스크립트에서 Pointer Events를 사용한 드래그 앤 드롭 예제를 알아보겠습니다. Pointer Events는 Mouse Events, Touch Events 등을 하나의 API로 통합하여 다양한 입력 장치에서 더 일관성 있는 이벤트 처리를 할 수 있도록 해줍니다. 드래그 앤 드롭 HTML 구조 먼저, 간단한 HTML 구조를 만들어 드래그 앤 드롭할 요소를 설정합니다. 자바스크립트로 드래그 앤 드롭 기능 구현 이제 Pointer Events를 … Read more
Pointer Events는 마우스나 터치, 펜 등 다양한 입력 장치에서 발생하는 이벤트를 하나의 API로 통합하여 처리하도록 만들어진 W3C의 표준입니다. 이 API는 Mouse Events, Touch Events와 같은 개별 이벤트들을 하나로 통합하여 다양한 입력 장치를 일관성 있게 다룰 수 있도록 해줍니다. Pointer Events는 HTML5에서 처음 도입되었으며 주로 터치와 마우스 이벤트를 통합하여 모바일과 데스크탑 환경에서 모두 잘 작동하도록 도와줍니다. … Read more
재귀함수(Recursive Function)는 여러가지 문제해결 방법론 중의 하나로, 함수가 자기 자신을 반복적으로 호출하여 문제를 해결합니다. 이는 기본적으로 종료 조건과 재귀 조건을 가지고 있어야 합니다. 재귀함수 기본 구조 Base Case: 재귀 호출을 종료할 조건을 말합니다. 이 조건을 만나면 더 이상 재귀 호출을 하지 않고 결과 값을 리턴합니다. Recursive Case: 자기 자신을 호출하는 부분으로 문제를 더 작은 단위로 … Read more
Math.PI는 자바스크립트에서 원주율(π)의 값, 약 3.141592를 나타내는 상수입니다. 원주율은 원의 둘레와 지름의 비율이며, 자바스크립트에서는 Math.PI를 사용하면 이 값을 바로 참조할 수 있습니다. 예제 1: 원의 둘레 구하기 원의 둘레는 “2 x π x 반지름”으로 계산할 수 있습니다. 여기서 Math.PI를 사용하여 원의 둘레를 계산할 수 있습니다. 개발자 도구에서 예제 코드를 실행하면 위의 이미지와 같은 결과를 얻을 … Read more
시간 측정 시 performance.now() 메소드를 사용해 고정밀 측정 결과를 얻을 수 있습니다. 이 메소드는 밀리초 단위로 현재 시간을 리턴하여 매우 정확한 시간 측정 작업이 가능합니다. 함수 실행 시간 측정 예시 개발자 도구를 통해 위의 코드를 실행하면 이미지와 같은 결과를 확인할 수 있습니다. 위의 예제 코드에서는 실행에 시간이 조금 걸리는 test() 함수를 먼저 작성했습니다. 다음으로 performance.now() … Read more