CSS 튜토리얼

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

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

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

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

'Don't Step on the White Tile' 웹 기반 게임을 만드는 과정을 안내하는 프로젝트입니다. 이 단계를 따라 HTML, CSS 및 JavaScript 를 결합하여 플레이어가 흰색 타일을 밟지 않고 점수를 얻는 인터랙티브 게임을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 웹 개발 기술을 연습하려는 초보자에게 적합합니다.

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

몬티 홀 문제 시뮬레이션 프로젝트에 오신 것을 환영합니다. 몬티 홀 문제는 게임 쇼 시나리오를 기반으로 한 확률 퍼즐입니다. 이 프로젝트에서는 퍼즐을 시연하기 위한 간단한 웹 기반 시뮬레이션을 만드는 과정을 안내합니다. 마지막으로, 이론을 직접 테스트할 수 있는 기능적인 몬티 홀 시뮬레이션을 갖게 됩니다.

이 실습에서는 요소를 선택하고, 콘텐츠를 변경하고, 속성을 설정하고, 새 요소를 생성/추가하는 등 JavaScript DOM 조작의 기본 사항을 배우게 됩니다.

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

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

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

이 프로젝트는 GitHub 의 기여 그래프와 유사한 React 히트맵 캘린더를 만드는 과정을 안내합니다. 이러한 유형의 캘린더는 시간 경과에 따른 활동 데이터를 시각화하는 매력적인 방법이 될 수 있으며, 색상의 강도는 특정 날짜의 활동 수준을 나타냅니다. 이 프로젝트를 통해 React 애플리케이션에서 캘린더 히트맵을 통합하고 사용하는 방법을 명확하게 이해하게 될 것입니다.

이 프로젝트에서는 우주 테마 콘텐츠를 특징으로 하는 시각적으로 매력적인 캐러셀 레이아웃을 갖춘 Swiper 캐러셀 웹 앱을 만드는 방법을 배웁니다. 이 앱을 통해 사용자는 다양한 슬라이드를 탐색하고 우주에 대한 흥미로운 사실이 담긴 카드를 볼 수 있습니다.

이 프로젝트에서는 간단한 웹 기반 스크래치 카드 게임을 만드는 과정을 안내합니다. 이 게임을 통해 사용자는 회색 오버레이를 스크래치하여 '당첨' 또는 '다시 시도' 메시지를 표시하는 기본 이미지를 드러낼 수 있습니다. 구조는 HTML, 스타일링은 CSS, 상호 작용은 JavaScript 를 사용합니다.

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

누구나 한 번쯤은 클래식 게임인 지뢰 찾기를 해본 적이 있을 것입니다. 규칙은 간단하지만 중독성이 강하죠. 직접 만들어볼 생각을 해보신 적이 있나요? 오늘은 웹 기반의 지뢰 찾기 버전을 만들어 볼 것입니다. 먼저, 인터페이스의 스크린샷을 살펴보겠습니다.

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

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