눈부신 로그인 페이지 디자인하기 - CSS, HTML 튜토리얼

소개

이 프로젝트에서는 아름다운 인터페이스를 갖춘 로그인 페이지를 디자인하고 스타일링하는 방법을 배우게 됩니다. 목표는 쾌적한 사용자 경험을 제공하는 시각적으로 매력적인 로그인 페이지를 만드는 것입니다.

👀 미리보기

완성된 로그인 페이지 디자인

🎯 과제

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

프로젝트 구조를 설정하고 제공된 파일을 이해하는 방법
로그인 페이지의 본문과 탐색 바를 스타일링하는 방법
아바타 이미지, 폼 컨테이너, 폼 요소 및 텍스트를 포함한 로그인 폼을 스타일링하는 방법

🏆 성과

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

CSS 를 사용하여 시각적으로 매력적인 로그인 페이지 레이아웃을 생성합니다.
입력 필드, 버튼 및 텍스트와 같은 로그인 폼의 다양한 요소를 스타일링합니다.
이미지와 배경 스타일을 통합하여 로그인 페이지의 전반적인 디자인을 향상시킵니다.

프로젝트 구조 설정

이 단계에서는 로그인 페이지의 프로젝트 구조를 설정하는 방법을 배우게 됩니다.

랩 환경을 열고 프로젝트 디렉토리로 이동합니다.
프로젝트 디렉토리 내에서 다음 파일 구조를 볼 수 있습니다:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

css/style.css 파일은 로그인 페이지를 스타일링하기 위해 CSS 코드를 작성하는 곳입니다. images 폴더에는 프로젝트에서 사용되는 이미지 파일이 포함되어 있습니다.
텍스트 편집기에서 index.html 파일을 엽니다. 이것은 로그인 페이지의 구조를 포함하는 HTML 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단에서 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

이 단계에서는 로그인 페이지의 본문과 탐색 바를 스타일링합니다.

텍스트 편집기에서 css/style.css 파일을 엽니다.
파일에 다음 CSS 코드를 추가합니다:

/* 여기에 CSS 코드를 추가하세요 */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

이 코드는 본문의 배경 이미지, 탐색 바 스타일을 설정하고 페이지 오른쪽 상단에 프로필에 접근할 수 있는 이미지를 추가합니다.

로그인 폼 스타일 지정

이 단계에서는 로그인 폼을 스타일링합니다.

css/style.css 파일에 다음 CSS 코드를 추가합니다:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

이 코드는 아바타 이미지, 폼 컨테이너, 폼 요소 (헤더, 버튼, 입력 필드) 및 폼 하단의 텍스트를 포함하여 로그인 폼을 스타일링합니다.

최종 결과 검토 및 테스트

이 단계에서는 완성된 페이지와 실제 제공된 페이지의 유사성을 테스트할 수 있습니다.

style.css 파일에 변경 사항을 저장합니다.
브라우저를 새로 고쳐 완성된 결과를 확인합니다. 이전 단계를 완료한 후, 아래와 같이 CSS 구문을 통해 페이지 레이아웃을 잡고 미화하여 로그인 페이지를 최대한 비슷하게 만들 수 있습니다.

Image Description

축하합니다! 로그인 페이지를 새롭게 단장하는 프로젝트를 성공적으로 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

페이지를 멋지게 꾸며보세요

소개