HTML 튜토리얼

이 랩에서는 신진 웹 개발자 Alex 의 시각을 통해 웹 개발 세계에 발을 들여 동적 개인 재정 추적기를 만드는 작업을 수행합니다. 사용자가 일일 지출 및 수입을 입력하고 추적할 수 있는 사용자 친화적인 애플리케이션을 구축합니다. 목표는 명확합니다. 직관적이고 매력적인 인터페이스를 개발하여 사용자가 번거로움 없이 재정을 쉽게 관리할 수 있도록 하는 것입니다. 이 프로젝트는 개인 재정 관리를 단순화할 뿐만 아니라 JavaScript 및 DOM 조작의 기본 개념을 소개하는 것을 목표로 합니다.

이 프로젝트는 Flask 웹 애플리케이션 내에서 TensorFlow.js 를 사용하여 사전 훈련된 MobileNetV2 모델을 배포하는 과정을 안내합니다. MobileNetV2 는 주로 이미지 분류에 사용되는 경량 딥 뉴럴 네트워크입니다. TensorFlow.js 는 머신 러닝 모델을 브라우저에서 직접 실행할 수 있게 하여 대화형 웹 애플리케이션을 가능하게 합니다. Python 웹 프레임워크인 Flask 는 애플리케이션을 호스팅하는 백엔드 역할을 합니다. 이 프로젝트가 끝나면 MobileNetV2 모델을 사용하여 즉석에서 이미지를 분류하는 웹 애플리케이션을 실행하게 됩니다.

이 프로젝트에서는 웹사이트의 디스플레이 문제를 해결하고, 적절한 스타일과 레이아웃을 적용하는 방법을 배웁니다. 목표는 완성되지 않은 웹사이트를 원하는 최종 제품처럼 보이도록 만드는 것입니다.

이 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 Whack-a-Mole 게임을 만드는 방법을 배웁니다. 게임은 지정된 시간 제한 내에 구멍에서 무작위로 나타나는 두더지를 두드리는 방식으로 진행됩니다. 필요한 HTML, CSS 및 JavaScript 파일을 만들고 단계별로 게임 로직을 구현합니다.

이 Lab 에서 Alex 의 개인 재정 추적기 개발 여정은 고급 단계로 접어들어, 정교한 이벤트 처리 기술을 통해 애플리케이션의 상호 작용성을 향상시키는 데 중점을 둡니다. 장면은 기술 스타트업의 브레인스토밍 세션에서 시작되며, Alex 는 재정 기록을 재정렬하기 위해 드래그 앤 드롭 기능을 추가할 것을 제안합니다. 이 야심찬 목표는 사용자에게 개인 재정 관리의 유동적인 특성을 반영하여 기록을 직관적으로 정리할 수 있는 방법을 제공하는 것을 목표로 합니다. 이를 달성하려면 Alex 는 고급 DOM 이벤트를 탐색하고 시각적으로 매력적이고 사용자 친화적인 방식으로 요소를 조작해야 합니다.

이 프로젝트에서는 간단한 웹 기반 그림판 애플리케이션을 단계별로 만들 것입니다. 각 단계는 이전 단계를 기반으로 구축되어 애플리케이션에 기능을 점진적으로 추가할 수 있습니다. 이 프로젝트가 끝나면 사용자가 그림을 그리고, 브러시 색상을 변경하고, 브러시 크기를 조정하고, 캔버스를 지울 수 있는 완벽하게 작동하는 그림판을 갖게 됩니다.

JavaScript 를 사용하여 간단한 슬라이딩 퍼즐 게임을 만드는 프로젝트에 오신 것을 환영합니다. 이 가이드가 끝나면 브라우저에서 플레이할 수 있는 3x3 슬라이딩 퍼즐 게임을 갖게 됩니다. 이 게임은 숫자 타일, 타이머, 게임 시작, 일시 중지 및 재설정 컨트롤을 특징으로 합니다.

이전 프로젝트에서는 스레딩과 소켓을 활용하여 TCP 포트를 스캔하는 Python 포트 스캐너를 개발했습니다. 이번에는 외부 패키지를 사용하여 기능을 한층 더 개선해 보겠습니다.

이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 현대적이고 시각적으로 매력적인 Expense Splitter 웹 애플리케이션을 만들 것입니다. 이 애플리케이션을 사용하면 여러 사람 간에 비용을 분할하고 누가 누구에게 얼마를 빚지고 있는지 계산할 수 있습니다. 처음부터 시작하여 프로젝트를 점진적으로 구축하기 위한 각 단계를 다룰 것입니다.

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 틱택토 게임을 만드는 방법을 배웁니다. 틱택토는 3x3 격자판에서 두 명의 플레이어가 번갈아 가며 X 또는 O 를 표시하는 게임입니다. 가로, 세로, 대각선 중 한 줄을 먼저 완성하는 사람이 승리합니다. 필요한 HTML, CSS, JavaScript 파일을 생성하고 단계별로 게임 로직을 구현해 봅니다.

이 프로젝트에서는 입력하는 대로 실시간 HTML 미리보기를 제공하는 간단한 웹 기반 마크다운 에디터를 만들 것입니다. Ace Editor, marked, highlight.js 와 같은 라이브러리를 사용하여 마크다운으로 작성할 수 있을 뿐만 아니라 브라우저 세션 간에 데이터를 저장하고 미리보기에서 코드 조각을 강조 표시하는 직관적인 에디터를 개발합니다.

이 프로젝트는 간단한 이미지 자르기 도구를 만드는 과정을 안내합니다. 완료되면 사용자가 이미지를 업로드, 표시 및 자를 수 있는 대화형 애플리케이션을 갖게 됩니다.

이 프로젝트는 Flask 와 MySQL 을 사용하여 간단한 URL 단축기 서비스를 만드는 과정을 안내합니다. 데이터베이스 설정, 웹 인터페이스 디자인, URL 단축 기능 구현, 태그별 URL 검색, 분석 보기 등을 배우게 됩니다. 이 프로젝트는 초보자도 쉽게 따라 할 수 있으며, Python 을 사용한 웹 개발 및 데이터베이스 관리에 대한 포괄적인 통찰력을 제공합니다.

이 프로젝트에서는 ECharts 라이브러리를 사용하여 선 차트를 만드는 방법을 배웁니다. 차트는 사용자가 일주일 동안 매일 휴대폰을 사용하는 시간을 표시합니다.

이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 애플리케이션을 만드는 방법을 배웁니다. 이 웹 앱을 통해 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하며, 작업을 삭제할 수 있습니다. 이 프로젝트가 끝나면 현대적이고 사용자 친화적인 인터페이스를 갖춘 완벽하게 작동하는 Task Timer 웹 앱을 갖게 됩니다.

이 'jQuery 플립 퍼즐 게임' 프로젝트는 JavaScript, jQuery, Bootstrap 에 중점을 둔 웹 개발 실습 경험을 제공합니다. JavaScript 의 객체 지향 프로그래밍을 포함하며, 웹 개발 맥락에서 흔히 발생하는 'this' 바인딩 문제를 다룹니다. 이 게임은 사용자 인터페이스를 위해 jQuery 와 Bootstrap 3 을 사용하여 구현되었습니다. Bootstrap 에 대한 지식이 있으면 도움이 되지만, 프로젝트의 핵심 로직은 jQuery 와 JavaScript 로 구축되었습니다.

이 실습에서는 JavaScript 의 기본 사항을 배우고, HTML 파일에 직접 포함하는 방법과 외부 JavaScript 파일을 연결하는 방법을 알아봅니다.

이 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 재미있고 간단한 블록 회피 게임을 만들 것입니다. 이 게임은 플레이어가 검은색 블록을 클릭하여 점수를 얻고 흰색 블록을 클릭하지 않도록 하는 방식으로 진행됩니다. 단계별로 만들어 봅시다!