CSS 연습문제

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

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

'Pet's House'라는 애견인들을 위한 가상 안식처에서, 창의적인 웹 디자이너 Taylor 는 웹사이트에 생기를 불어넣는 여정을 시작합니다.

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

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

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

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

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

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

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

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

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

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