소개
이 프로젝트에서는 CSS 그리드 레이아웃을 사용하여 코알라 얼굴을 만드는 방법을 배우게 됩니다. 코알라의 전체적인 얼굴 구조를 만들고, 눈, 코, 그리고 블러쉬 요소를 그려 코알라의 얼굴 특징을 완성할 것입니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 코알라 얼굴을 위한 그리드 레이아웃 설정 방법
- 코알라의 눈 그리는 방법
- 코알라의 코 그리는 방법
- 코알라 얼굴에 블러쉬 그리는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 할 수 있게 됩니다:
- CSS 그리드 레이아웃을 사용하여 복잡한 디자인 만들기
- 그리드 내에서 다양한 요소의 위치를 지정하고 스타일링하기
border-radius및background-color와 같은 CSS 속성을 사용하여 사용자 정의 모양 및 디자인 만들기
프로젝트 설정
이 단계에서는 프로젝트를 설정하고 편집기에서 파일을 엽니다.
다음 파일과 디렉토리가 포함된 프로젝트 폴더를 엽니다:
├── styles.css
└── index.html
여기서:
index.html은 메인 페이지입니다.style.css는 필요한 스타일을 추가해야 하는 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.
코알라 얼굴 부분의 위치는 다음 그리드 그림을 참조하십시오:
그리드 레이아웃 설정
이 단계에서는 코알라 얼굴을 위한 그리드 레이아웃을 만드는 방법을 배우게 됩니다.
- 코드 편집기에서
styles.css파일을 엽니다. - 다음 CSS 코드를
.face에 추가하여 그리드 레이아웃을 만듭니다:
.face {
z-index: 1;
width: 430px;
height: 380px;
background: #a0abb6;
border-radius: 50%;
display: grid;
grid-template-columns: 1fr repeat(4, 25px) 1fr;
grid-template-rows: 50px repeat(2, 1fr) 50px;
align-items: center;
}
이 코드는 6 개의 열과 4 개의 행으로 구성된 그리드 레이아웃을 만듭니다. 코알라 얼굴의 앞면과 뒷면은 왼쪽과 오른쪽에 있는 두 개의 동일한 너비의 열로 표현되며, 가운데 4 개의 열은 25px 너비입니다. 상단과 하단 행은 50px 높이이고, 가운데 두 행은 높이가 같습니다.
눈 그리기
이 단계에서는 코알라의 눈을 그리는 방법을 배우게 됩니다.
- 다음 CSS 코드를 추가하여 눈을 만듭니다:
.eye {
width: 30px;
height: 30px;
background: #090b0e;
border-radius: 50%;
justify-self: center;
}
.eye.left {
grid-area: 2/2/2/3;
}
.eye.right {
grid-area: 2/5/2/6;
}
이 코드는 두 개의 원형 눈을 만듭니다. 각 눈은 30px 너비와 30px 높이이며, 어두운 색상 (#090b0e) 과 50% 둥근 모서리를 가집니다. justify-self: center 속성은 눈을 해당 그리드 셀 내에서 가로로 가운데 정렬합니다. grid-area 속성은 왼쪽 및 오른쪽 눈을 올바른 그리드 셀에 배치합니다.
코 그리기
이 단계에서는 코알라의 코를 그리는 방법을 배우게 됩니다.
- 다음 CSS 코드를 추가하여 코를 만듭니다:
.nose {
background: #3b464f;
border-radius: 50% 50% 40% 40%;
height: 100%;
grid-area: 3/2/3/6;
}
이 코드는 어두운 색상 (#3b464f) 과 둥근 모서리를 가진 코 모양의 요소를 만듭니다. border-radius 속성은 코에 둥근 모양을 부여하며, 상단 모서리는 50% 둥글고 하단 모서리는 40% 둥글게 처리됩니다. height: 100% 속성은 코가 해당 그리드 셀의 전체 높이를 차지하도록 하며, grid-area 속성은 코를 올바른 그리드 셀에 배치합니다.
블러쉬 그리기
이 단계에서는 코알라 얼굴에 블러쉬를 그리는 방법을 배우게 됩니다.
- 다음 CSS 코드를 추가하여 블러쉬를 만듭니다:
.blush.left {
grid-area: 2/1/3/2;
align-self: end;
justify-self: end;
}
.blush.right {
align-self: end;
grid-area: 2/6/3/7;
}
이 코드는 두 개의 원형 블러쉬 요소를 생성하며, 각 요소는 너비 40px, 높이 30px 이며, 밝은 분홍색 (#f6b9bf) 과 50% 둥근 모서리를 갖습니다. grid-area 속성은 왼쪽 및 오른쪽 블러쉬 요소를 올바른 그리드 셀에 배치하고, align-self 및 justify-self 속성은 블러쉬 요소를 해당 그리드 셀 내에서 정렬합니다.
이 단계를 통해 코알라 얼굴 그리기 프로젝트를 완료했습니다. 축하합니다!
완성된 결과는 아래에 나와 있습니다:
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.
