javascript30 자바스크립트 querySelector와 querySelectorAll 개념과 활용 오늘은 자바스크립트의 내장 함수인 querySelector에 대해서 정리해 보려고 한다. querySelector 함수는 document 요소를 간단하게 조회 및 조작할 수 있는 기능이다. 자바스크립트 기반의 개발을 하게 된다면 자주 사용하는 함수이지만 습관처럼 사용하는 것보다 기능을 조금 더 깊이 있게 배우고 익혀두는 것이 좋다. querySelector 자바스크립트의 querySelector 함수는 객체 DOM을 통해 HTML 내에서 요소를 선택하는 데 사용되는 기능이다. 이 함수는 css 선택자를 사용하여 요소를 선택하고 반환한다. 1. 요소 선택 querySelector를 사용하여 HTML 내에서 원하는 요소를 선택할 수 있으며, 선택자를 사용하여 단일 요소를 선택하며, 해당 요소가 여러 개 존재.. 2024. 4. 16. [자바스크립트 + Chart.js] Radar Chart 만들기 (레이더 차트) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Radar Chart를 만들어 보려고 합니다. 레이더 차트는 보통 제품이나 서비스들을 비교해야 하는 경우, 사람의 분석 능력 비교, 이상치를 식별해야 하는 경우 등에서 활용할 수 있습니다. 저는 아직까지 레이더 차트를 사용해 본 적은 없지만 한 번쯤은 사용해보고 싶었기 때문에 이렇게 포스팅을 통해서라도 학습을 하고자 했습니다. 차트 관련 라이브러리들은 사용법이 워낙 간단하고 데이터 세팅만 잘해준다면 어렵지 않기 때문에 한 번만 학습해 놔도 필요한 상황이 온다면 활용하기 좋을 것 같습니다. 레이더 차트 동일한 지점에서 시작하는 축에 표시된 3개 이상의 정량적 변수의 2차원 차트 형태로 다변량 데이터를 표시하는 그래픽 방법입니다. 차트의 형태는 거.. 2023. 2. 15. [자바스크립트 + Chart.js] 폴라 차트 (Polar Chart) 만들기 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Polar Chart를 만들어 보려고 합니다. Polar Chart란 원형에서 각 축과 반경축을 사용하여 시각화하는 차트입니다. 지난번 포스팅의 파이 차트와 유사하면서 다른 느낌의 차트입니다. 어떻게 다른지 예제를 통해서 알아보고 파이 차트와 비교까지 해보도록 하겠습니다. 1. Polar Chart 예제 import Chart.js 우선 Chart.js 라이브러리를 cdn 방식을 통해 연동해 줬습니다. HTML canvas 요소 추가 다음은 HTML 영역에 canvas 태그 요소를 추가해 줍니다. Chart.js는 canvas를 기반으로 차트를 그리기 때문에 반드시 canvas 태그로 생성해 줘야 하며, 자바스크립트에서 canvas를 호출할 값.. 2023. 2. 14. [자바스크립트 + Chart.js] Pie 차트 예제 만들기 (Pie Chart, Doughnut Chart) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Pie 모양의 차트와 Doughnut 모양의 차트를 만들어 보려고 합니다. 요즘 차트 만드는 것을 많이 하다 보니 계속 차트 관련 글을 작성하고 있는데요. 차트 만드는 게 처음에는 조금 어려운 것 같아도 하다 보면 시각적인 효과가 크다 보니 재미있기도 하고 배우는 것도 금방인 것 같아요! 지난번에는 막대 차트와 라인 차트를 만들었고, 오늘은 이어서 Pie와 Doughnut 차트를 만들려고 합니다. 두 모양 모두 원 모양으로 Pie는 피자 조각처럼 생겼고, Doughnut은 가운데가 뚫려있는 도넛의 모양을 하는 차트입니다. 이런 모양의 차트는 유사한 데이터의 비중을 서로 비교할 때 적절한 것 같아요! 그럼 Pie 차트와 Doughnut 차트는 어.. 2023. 2. 12. 자바스크립트 chart.js 라인 차트 만들기 (line chart) 안녕하세요. 오늘은 자바스크립트와 chart.js를 활용한 Line Chart를 만들어 보려고 합니다. Line Chart는 말 그대로 라인 형태의 시각화 차트입니다. Line Chart는 보통 날짜, 시간 기준으로 해서 데이터의 변화하는 과정은 라인으로 이어서 볼 때 효과가 좋습니다. 그 외에도 기준만 잘 잡아준다면 데이터의 흐름을 파악하는데 활용도가 정말 높습니다. 정말 간단하면서도 활용도 높은 Line Chart를 하나씩 배워보도록 하겠습니다. 1. Line Chart 기본 예시 chart.js 라이브러리 import chart.js를 사용하기 위해 위와 같이 chart.js 라이브러리를 import 시켜줍니다. 저는 간단하게 cdn 방식으로 연동을 하였고, 상황에 따라 직접 설치하여 import .. 2023. 2. 6. 자바스크립트 chart.js Stacked Bar Chart 만들기 (스택 Bar 차트) 안녕하세요. 오늘은 지난 포스팅에 이어서 bar chart를 응용한 stacked bar chart를 만들어보려고 합니다. stack은 의미 그대로 쌓아 올리는 개념으로 bar chart를 데이터 유형별로 쌓이는 형태로 만드는 방식입니다. stack 형태의 bar chart도 활용하기가 아주 좋습니다. 하나의 시스템에서도 다양한 데이터를 시각화하기 위해서 다양한 방식의 차트를 필요로 합니다. 그럼 stacked 형태의 bar chart 만들기를 시작해 보겠습니다. 1. Stacked Bar Chart 예시 chart.js 라이브러리 import 가장 먼저 chart.js 라이브러리를 cdn 형식으로 import 시켜줬습니다. DOM canvas 요소 추가 chart.js는 기본적으로 canvas 요소에 .. 2023. 2. 5. 자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) 안녕하세요. 오늘은 bootstrap5의 carousel (캐러셀) 기능에 대해 포스팅하려고 합니다. carousel의 뜻은 회전목마를 의미하며, 의미하는 것처럼 이미지 같은 요소를 회전시켜 가며 효과를 주는 기능입니다. 보통 슬라이드쇼라고도 합니다. 보통 홈페이지를 소개하는 요소가 있거나 광고할 요소가 많은 경우에 carousel 기능을 활용해서 한 화면에서 다양한 이미지나 영상을 보여줄 수 있습니다. 효과가 아주 좋습니다! carousel 캐러셀 carousel은 회전목마를 의미하며, 이미지나 영상과 같은 요소를 회전시켜가며 효과를 주는 기능 (슬라이드쇼와 같은 효과) 1. carousel 컴포넌트 Previous Next 간단한 샘플 이미지 3개를 연동해서 carousel 컴포넌트를 활성화시켰습니다.. 2023. 2. 3. 자바스크립트 bootstrap5 아코디언 만들기 (accordion) 안녕하세요. 오늘은 자바스크립트 bootstrap5의 아코디언 기능 구현하는 방법을 포스팅하려고 합니다. 아코디언은 목록형 요소에 세부적인 내용을 포함시켜 접어두고 필요할 때 열어볼 수 있는 기능입니다. 아코디언 기능도 다른 기능들과 마찬가지로 활용도가 높기 때문에 예제를 보고 구현해 보는 것도 좋을 것 같습니다! 그럼 아코디언 기능은 어떤 식으로 구현이 되고 작동이 되는 것인지 예시 코드를 통해 확인해 보도록 하겠습니다. Accordion 아코디언 목록형 DOM 영역에서 세부적인 내용을 포함시켜 접어두고 필요한 경우에 열어볼 수 있는 기능 1. Accordion 기본 사용 예시 Accordion Item #1 안녕하세요. Accordion Item #1 Accordion Item #2 안녕하세요. Ac.. 2023. 2. 3. 자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스) 안녕하세요. 오늘은 자바스크립트에서 bootstrap5의 Offcanvas 기능을 구현해 보려고 합니다. 웹페이지를 이용하다 보면 사이드나 상단, 하단부에 표시되는 컴포넌트 기능입니다. 하나의 페이지에서 보일 정보도 많고 기능도 많다 보니까 간단하게 사이드에 기능을 숨겨놓고 페이지 이동 없이 간단하게 부가적인 기능들을 활용할 수 있습니다. bootstrap에서 제공되는 기능이며, 이름 또한 bootstrap에서 만들어서 그런지 이름이 생소하긴 하지만 사용하다 보면 또 익숙해지긴 합니다. :) 그러면 Offcanvas가 무엇인지 어떤 기능을 할 수 있는지 예제를 통해 하나씩 알아보도록 하겠습니다. Offcanvas 오프캔버스 웹페이지의 사이드 (좌측, 우측, 상단, 하단)에 표시되는 컴포넌트 부가적인 기능.. 2023. 2. 2. 자바스크립트 bootstrap 5 경고창 만들기 안녕하세요. 오늘은 자바스크립트에서 bootstrap 5의 경고창 컴포넌트 만드는 방법을 정리해 보려고 합니다. 자바스크립트의 기본 alert이 있지만 style이 기본 style이고, 자바스크립트의 내장 기능이기 때문에 변경하는 것이 어렵습니다. 그래서 bootstrap의 기능을 빌려 alert을 사용하면 style이 적용된 alert을 간단하게 활용하여 사용할 수 있습니다. 그럼 예제를 통해 하나씩 알아보도록 하겠습니다. Alert 경고창 bootstrap에서는 alert 경고창의 스타일 8가지를 지원하고 있습니다. 색상에 따라 나타내는 내용, 상황을 다르게 줄 수 있는 효과가 있습니다. 기본적으로 간단한 알림을 줄 때에는 파란색, 성공을 알릴 때에는 초록색, 실패를 알릴 때에는 붉은색 등 표시를 다.. 2023. 2. 1. 이전 1 2 3 다음 728x90
