CSS 튜토리얼

이 실습에서는 다양한 CSS 속성을 사용하여 HTML 목록을 스타일링하여 가로 탐색 메뉴를 만드는 방법을 배웁니다.

이 실습에서는 다양한 CSS 속성을 사용하여 HTML 테이블의 가독성과 시각적 매력을 향상시키는 방법을 배웁니다.

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

이 실습에서는 텍스트 색상, 글꼴 크기, 글꼴 굵기, 정렬 및 줄 높이를 설정하는 방법을 포함하여 CSS 텍스트 스타일링의 기본 사항을 배우게 됩니다.

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

CSS 상대 위치 지정을 사용하여 이미지 및 요소의 레이아웃을 제어하는 방법을 배우고, 정확한 요소 배치를 통해 유연하고 동적인 웹 페이지 디자인을 만드세요.

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

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

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

이 프로젝트에서는 React 를 사용하여 간단한 Notes 앱을 만들 것입니다. 이 앱을 통해 사용자는 노트를 추가, 편집 및 삭제할 수 있습니다. 개발을 여러 단계로 나누어 각 단계가 특정 요구 사항을 충족하고 필수 기능을 추가하도록 할 것입니다.

CSS 에서 자손 선택자를 사용하여 중첩된 HTML 요소의 스타일을 지정하는 방법을 배우고, 웹 페이지 디자인을 개선하며 선택자 타겟팅 메커니즘을 이해하세요.

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

태그, 클래스, ID 선택자를 포함하여 웹 요소를 효율적으로 스타일링하는 기본적인 CSS 선택자 기술을 실용적인 예제와 모범 사례를 통해 알아보세요.

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

애완동물 애호가를 위한 가상 공간인 'Pet's House'에서 웹 개발자 Alex 가 CSS Grid 를 사용하여 서비스 쇼케이스를 개선하는 여정을 시작합니다.

번화한 Petville 도시에서 웹 개발자 Jordan 은 'Pet's House' 웹사이트를 재설계하는 임무를 맡았습니다.

'Pet's House'라는 프리미엄 펫 케어 서비스를 제공하는 웹사이트의 번잡한 디지털 환경에서, 재능 있는 웹 개발자인 주인공 Jordan 은 웹사이트의 레이아웃과 디자인을 향상시키는 임무를 맡았습니다.

이 랩에서는 기본적인 CSS 기술과 선택자를 사용하여 애완동물 서비스를 위한 스타일리시한 웹사이트를 만드는 웹 개발자의 역할을 수행합니다.