CSS 튜토리얼

이 랩에서는 HTML 과 CSS 를 사용하여 3D 회전 큐브를 만들 것입니다. 이 큐브는 다채로운 면을 가지고 무한히 회전하여 시각적으로 매력적인 효과를 낼 것입니다. 이 프로젝트를 처음부터 구축할 수 있도록 각 단계를 안내해 드립니다.

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

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

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

안녕하세요, LabEx 에 오신 것을 환영합니다! 이 첫 번째 랩에서는 CSS 로 고전적인 'Hello, World!' 프로그램을 배우게 됩니다.

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

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

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

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

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

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

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

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

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

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

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

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

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