CSS 튜토리얼

LabEx 는 CSS 개발 환경을 신속하게 구축하고 실습할 수 있는 온라인 환경인 온라인 CSS 플레이그라운드 및 에디터를 제공합니다.

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

이 실습에서는 반응형 및 유연한 웹 레이아웃을 만들기 위한 CSS Flexbox 의 기본 사항을 배웁니다.

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

이 실습에서는 다양한 CSS 색상 및 배경 속성을 적용하여 웹 페이지 요소를 스타일링하는 방법을 배우게 됩니다. 색상 설정, 이미지 추가, 위치 및 반복 제어를 포함합니다.

이 실습에서는 간단한 HTML 요소를 스타일링하여 유틸리티 우선 CSS 프레임워크인 Tailwind CSS 의 기본 사항을 배우게 됩니다. CDN 을 추가하고 배경색, 텍스트 색상, 패딩 및 레이아웃에 대한 클래스를 적용합니다.

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

이 실습에서는 HTML 요소를 스타일링하기 위해 요소, 클래스, ID, 그룹화 및 자손 선택자를 포함한 CSS 선택자의 기본 사항을 배우게 됩니다.

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

이 실습에서는 콘텐츠, 패딩, 테두리, 마진을 포함한 CSS 박스 모델의 기본 사항과 box-sizing 을 사용하여 요소 크기를 제어하는 방법을 배웁니다.

이 실습에서는 외부 스타일시트를 생성하고 페이지 글꼴을 변경하기 위해 HTML 문서에 연결하는 방법을 포함하여 CSS 의 기본 사항을 배우게 됩니다.

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

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

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

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

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

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

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