소개
이 프로젝트에서는 HTML 과 CSS 를 사용하여 사용자 명함을 만드는 방법을 배우게 됩니다. 목표는 사용자의 정보를 보여줄 수 있는 시각적으로 매력적이고 잘 구조화된 명함을 만드는 것입니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 프로젝트를 설정하고 필요한 파일을 여는 방법
- CSS 를 사용하여 카드와 사용자 아바타 요소를 중앙에 배치하는 방법
- 왼쪽 텍스트 요소 (레벨 및 포인트) 를 수평으로 중앙에 배치하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- 명함을 위한 HTML 페이지를 구조화할 수 있습니다.
- CSS 를 사용하여 페이지의 요소를 스타일링하고 배치할 수 있습니다.
- 요소를 수평 및 수직으로 중앙에 배치하는 기술을 적용할 수 있습니다.
프로젝트 설정
이 단계에서는 프로젝트를 설정하고 편집기에서 파일을 엽니다.
다음 파일과 디렉토리가 포함된 프로젝트 폴더를 엽니다:
├── avatar.png
├── style.css
└── index.html
여기서:
index.html은 메인 페이지입니다.style.css는 필요한 스타일을 추가해야 하는 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.
명함 및 아바타 중앙 정렬
이 단계에서는 style.css 파일의 TODO 섹션을 완료하여 카드와 사용자 아바타 요소를 중앙에 배치합니다.
style.css파일에서 TODO 섹션을 찾습니다.- 카드 (
class = card) 와 사용자 아바타 (class = avatar) 요소를 수평 및 수직으로 중앙에 배치하기 위해 필요한 CSS 규칙을 추가합니다.
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
style.css파일에 변경 사항을 저장합니다.- 브라우저를 새로 고쳐 완성된 결과를 확인합니다. 완성된 결과는 다음과 같습니다:
축하합니다! 사용자 명함 프로젝트를 성공적으로 완료했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
