인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
데이터 사이언스

/

데이터 분석

실무중심의 HTML5 시각화 프로그래밍

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

(3.5) 수강평 2개

수강생 34명

HTML/CSS

초급자를 위해 준비한
[데이터 분석, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • HTML5 시각화 프로그래밍

  • JavaScript 차트 프레임워크 사용법

  • 실시간 데이터 시각화

  • 암호화폐 데이터 수집 및 시각화

  • Canvas와 SVG의 차이점 이해

  • D3.js와 nvd3.js를 활용한 고급 데이터 시각화

  • eCharts를 사용한 모듈화된 차트 구현

웹 데이터 - html5 시각화 프로그래밍

과거의 데이터의 가치와 현재의 데이터의 가치는 다릅니다. 한국 또한 많은 발전을 이루었고 웹상에서 트래픽의 가치는 올드 미디어 매체들을 한참 넘어섰습니다. 웹은 내가 원하는 지표를 내가 보고싶을 때 보여주며, SNS는 데이터의 가치에 더 큰 생명을 불어 넣었습니다.

데이터는 인간이 가장 알아듣기 쉬운 형태로 표현되어야 합니다.데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.  그 중 차트는 가장 쉬운 언어표현 중 하나라고 볼 수 있습니다.

학습 목표

  • 데이터를 시각화 할 수 있다.

도움이 되는 분들

    • 대학생, 취업준비생, 사회초년생, 현업에 시각화 프로그래밍을 적용하려는 분께 매우 유익합니다.

참고 사항

  • 강좌에 사용되는 툴 WebStorm
    - 월 5.9$, 연 59$정도 하는 유료 툴로서 가볍고 구성이 알찬 매우 좋은 툴입니다.    이 툴을 예제로 주로 활용할것이며 저는 1년 개인용 라이센스를 통해 공부용으로 사용중인 툴입니다.
    학생들은 .edu 메일 등을 인증하면 무료로 사용할 수 있는 방법이 있으며 여러가지 Web 환경의 프레임워크를 제공하여 쉽게 구성할 수 있는 것이 장점입니다.
    이 툴은 유명한 jetbrains의 솔루션입니다.https://www.jetbrains.com/webstorm/

지식공유자 소개

최성욱
현업에서 웹 개발자로 약 7년 개발 시각화 관련 프로그래밍 약 5년 개발

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 개발자

  • 데이터 시각화에 관심 있는 사람

  • 프로그래밍 실무 경험을 쌓고 싶은 대학생

  • 암호화폐 데이터 분석에 관심 있는 사람

  • HTML5와 JavaScript를 활용한 프로젝트를 만들고 싶은 사람

안녕하세요
트레이딩온입니다.

커리큘럼

전체

17개 ∙ (6시간 11분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

2개

3.5

2개의 수강평

  • 차현식님의 프로필 이미지
    차현식

    수강평 1

    ∙

    평균 평점 5.0

    5

    88% 수강 후 작성

    시각화 프로그래밍에 관심이 많았는데 다양한 예제로 도움 받았습니다. 강의중 다뤘던 소스 코드를 받고 싶은데 어디서 받을수 있는지 궁금하네요. 공유 부탁드립니다.

    • norusalba님의 프로필 이미지
      norusalba

      수강평 3

      ∙

      평균 평점 3.7

      2

      59% 수강 후 작성

      주제는 좋은 것 같습니다. 좋은 강의를 제공해 주셔서 감사를 드립니다. 제가 드리고 싶을 말씀은 전체적인 내용이 정리가 안되있는 것 같습니다. 유료 강의인 만큼 사전에 outline과 전달하려는 메세지 및 정보가 정리되는 것이 좋을 것 같습니다. 온라인 강의라서 같이 코딩하는 것도 좋은 데요. 이럴 경우, 코딩하면 좋을 내용도 사전에 고민을 해보면 좋을 것 같습니다. 요점없이 코딩을 하는 것은 상대의 시간을 소중히 생각하지 않은 것 같습니다. (사실, 빠르게 넘겨 보았습니다)

      비슷한 강의

      같은 분야의 다른 강의를 만나보세요!

      [2024]리베하얀의 HTML 기초 실무강의 썸네일

      [2024]리베하얀의 HTML 기초 실무

      리베하얀

      HTML 기초문법을 다루는 강의입니다. 다양한 사례의 미션이 존재하며, 실무에서 사용가능한 최신문법까지 알려드립니다.

      입문

      입문

      HTML/CSS, nvda

      코딩이 에세이를 만났을 때, HTML Story강의 썸네일

      코딩이 에세이를 만났을 때, HTML Story

      SKm&service

      HTML을 읽어준다? 그것도 생활 속 에세이로? 소설책 읽듯 재미있는 이야기로 막힘없이 술술 이론을 익히고 내가 원하는 웹사이트를 프로토타입으로 만들 수 있게 됩니다

      입문

      입문

      HTML/CSS

      견고한 기본기 HTML&CSS강의 썸네일

      견고한 기본기 HTML&CSS

      제주코딩베이스캠프

      우리는 HTML, CSS를 잘 알아야 견고한 실력의 프론트엔드 개발자가 될 수 있다고 생각합니다.✍ HTML과 CSS의 종류부터 실무 활용까지, 이 강의로 언어를 올바르게 사용하는 방법을 배울 수 있습니다. 정성 들여 준비했으니 즐겨주세요 :)

      입문

      입문

      HTML/CSS

      부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기강의 썸네일

      부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

      Self-coding

      부트스트랩5 (Bootstrap5)의 클래스, 컴포넌트 등 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 3개의 프로젝트를 제작해봅니다.

      초급

      초급

      Bootstrap, HTML/CSS, JavaScript

      리베하얀의 CSS3 기초실무 - 2024강의 썸네일

      리베하얀의 CSS3 기초실무 - 2024

      리베하얀

      CSS 실무 20년이상 경력을 기반으로한 CSS 기초 강의에 오신 것을 환영합니다! 이 강의는 웹 퍼블리셔와 프론트엔드 개발자로 성장하기 위한 첫 걸음을 내딛는 여러분을 위해 준비되었습니다.

      입문

      입문

      HTML/CSS, nesting, css3

      웹 애니메이션의 새로운 표준, Web Animations API

      1분코딩

      라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

      초급

      초급

      Web Animations API, JavaScript, HTML/CSS

      HTML5 & CSS3 기초 문법 올인원강의 썸네일

      HTML5 & CSS3 기초 문법 올인원

      이룸코딩

      도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다.

      입문

      입문

      HTML/CSS

      아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지강의 썸네일

      아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

      이지웹

      전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

      초급

      초급

      HTML/CSS, JavaScript, jQuery

      떠먹는 Three.js강의 썸네일

      떠먹는 Three.js

      제주코딩베이스캠프

      Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

      초급

      초급

      Three.js, HTML/CSS, JavaScript

      풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

      풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

      잔재미코딩 DaveLee

      현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

      입문

      입문

      HTML/CSS, JavaScript, ES6

      Do It! 장고+부트스트랩: 파이썬 웹개발의 정석강의 썸네일

      Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

      SungYong Lee

      만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

      초급

      초급

      Python, Django, Bootstrap

      [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

      [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

      코딩웍스(Coding Works)

      웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

      입문

      입문

      HTML/CSS, jQuery, 웹 디자인

      코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)강의 썸네일

      코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

      제주코딩베이스캠프

      제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

      입문

      입문

      jQuery, JavaScript, Python

      효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

      효과적인 모바일 UX 만들기 (디자인 + 코딩)

      유용한IT학습

      Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

      초급

      초급

      HTML/CSS, jQuery, XD

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

      📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

      초급

      초급

      JavaScript, HTML/CSS, 객체지향

      웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

      웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

      webstoryboy

      웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

      초급

      초급

      HTML/CSS, jQuery, JavaScript

      디지털 매핑 / 데이터 시각화강의 썸네일

      디지털 매핑 / 데이터 시각화

      NJ Namju Lee

      디지털 매핑 워크숍을 통해 GIS(지리정보시스템, Geographic Information System) 데이터를 매핑하는 방법을 배웁니다. 데이터를 Canvas에 시각화하는 방법 등을 통해 직접 디지털 매핑 툴을 만들어보세요.

      초급

      초급

      GIS, TypeScript, HTML/CSS

      웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

      깡코딩

      웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

      초급

      초급

      인터랙티브 웹, JavaScript, HTML/CSS

      ₩33,000