웹 개발 튜토리얼

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

이 프로젝트에서는 Echarts 라이브러리를 사용하여 실시간 판매 대시보드를 만드는 방법을 배웁니다. 대시보드는 판매량 및 볼륨 데이터를 시각적으로 매력적이고 이해하기 쉬운 형식으로 표시합니다.

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

이 프로젝트에서는 HTML, CSS, JavaScript (jQuery) 를 사용하여 상호작용 영화 컬렉션 웹 애플리케이션을 만드는 방법을 배웁니다. 이 애플리케이션을 통해 사용자는 좋아하는 영화를 표시할 수 있으며, 즐겨찾는 영화 컬렉션이 생성되면 성공 메시지가 표시됩니다.

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

이 프로젝트에서는 사용자가 투표 옵션을 생성하고 관리하며 필요에 따라 옵션을 삭제할 수 있는 투표 애플리케이션을 구축하는 방법을 배웁니다. 이 애플리케이션은 다중 선택 지원 및 공개 투표 결과 기능도 포함합니다.

이 프로젝트에서는 사용자가 선택한 마크다운 텍스트의 제목 수준을 조정할 수 있는 VSCode 확장 기능을 만들어 보겠습니다.

이 프로젝트에서는 React 를 사용하여 드래그 앤 드롭 퍼즐 게임을 만들 것입니다. React 컴포넌트, 상태 관리 및 사용자 상호 작용 처리를 배우는 초보자에게 훌륭한 프로젝트입니다. 이 프로젝트가 끝나면 기능적인 퍼즐 게임을 갖게 될 것입니다.

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

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 간단한 'Fruit for Fun' 게임을 만드는 방법을 배웁니다. 이 게임은 게임 보드의 사각형을 클릭하여 과일 이미지 쌍을 맞추는 방식으로 진행됩니다.

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

이 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 간단한 폴딩 아코디언을 만드는 방법을 배웁니다. 폴딩 아코디언은 사용자가 콘텐츠 섹션을 확장하고 축소할 수 있게 해주는 일반적인 UI 요소로, 정보를 간결하고 체계적으로 표시하는 데 유용한 기능입니다.

이 프로젝트에서는 JavaScript 와 jQuery 를 사용하여 간단한 경품 추첨 애플리케이션을 만드는 방법을 배웁니다. 이 애플리케이션은 경품 목록을 회전시키고 회전이 멈출 때 당첨 경품을 표시하여 경품 추첨을 시뮬레이션합니다.

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

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 간단한 과일 쌓기 게임을 만드는 방법을 배웁니다. 목표는 페이지 상단에서 떨어지는 과일 아이템을 하단의 상자에 쌓는 것입니다. 상자에 동일한 과일이 세 개 있으면 자동으로 제거됩니다.

2048 은 전 세계적으로 선풍적인 인기를 얻고 있는 매우 인기 있고 배우기 쉬운 게임입니다. 아직 플레이해보지 않으셨다면, 모바일 폰에서 다운로드하여 시도해 볼 수 있습니다. 이 프로젝트는 HTML, CSS, JavaScript 및 jQuery 를 사용하여 2048 게임의 웹 버전을 만드는 방법을 안내합니다.

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

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