프로젝트 의 CSS 스킬 트리

CSS Grid 로 코알라 얼굴 만들기

초급

이 프로젝트에서는 CSS Grid 레이아웃을 사용하여 코알라 얼굴을 만드는 방법을 배웁니다. 전체적인 얼굴 구조를 만들고, 눈, 코, 볼터치 요소를 그려 코알라의 얼굴 특징을 완성합니다.

cssweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 CSS 그리드 레이아웃을 사용하여 코알라 얼굴을 만드는 방법을 배우게 됩니다. 코알라의 전체적인 얼굴 구조를 만들고, 눈, 코, 그리고 블러쉬 요소를 그려 코알라의 얼굴 특징을 완성할 것입니다.

👀 미리보기

완성된 코알라 얼굴 디자인

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • 코알라 얼굴을 위한 그리드 레이아웃 설정 방법
  • 코알라의 눈 그리는 방법
  • 코알라의 코 그리는 방법
  • 코알라 얼굴에 블러쉬 그리는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 할 수 있게 됩니다:

  • CSS 그리드 레이아웃을 사용하여 복잡한 디자인 만들기
  • 그리드 내에서 다양한 요소의 위치를 지정하고 스타일링하기
  • border-radiusbackground-color와 같은 CSS 속성을 사용하여 사용자 정의 모양 및 디자인 만들기

강사

labby
Labby
Labby is the LabEx teacher.