아름다운 홈페이지 레이아웃 만들기 | 웹 디자인 튜토리얼

소개

이 프로젝트에서는 LabEx Knowledge Network 웹사이트를 위한 간단하고 아름다운 홈페이지 레이아웃을 만드는 방법을 배우게 됩니다. 목표는 웹사이트의 콘텐츠와 기능을 효과적으로 제시하는 미적으로 보기 좋은 홈페이지를 디자인하는 것입니다.

👀 미리보기

LabEx 홈페이지 레이아웃 미리보기

🎯 과제

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

프로젝트 파일 및 구조 설정 방법
헤더 및 탐색을 포함한 페이지 상단 영역 스타일 지정 방법
헤더 영역 내부 콘텐츠 스타일 지정 방법
페이지 콘텐츠 영역 스타일 지정 방법
페이지 하단 (footer) 스타일 지정 방법

🏆 성과

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

CSS 를 사용하여 시각적으로 매력적인 레이아웃 생성
웹 페이지용 HTML 및 CSS 파일 구조화 및 구성
웹 페이지의 다양한 섹션에 CSS 스타일 적용
다양한 화면 크기에서 레이아웃이 반응형이고 일관되도록 보장

프로젝트 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

다음 파일과 디렉토리를 포함하는 프로젝트 폴더를 엽니다:
- css/style.css
- index.html
css/style.css 파일에 다음 코드를 추가하여 페이지의 기본 스타일을 설정합니다:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

이 코드는 모든 요소의 기본 margin 과 padding 을 재설정하고, box-sizing 속성을 border-box 로 설정하여 요소의 크기를 더 쉽게 제어할 수 있도록 합니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.

상단 영역 스타일 지정

이 단계에서는 헤더와 탐색을 포함하는 페이지의 상단 영역 스타일을 지정합니다.

css/style.css 파일에 다음 코드를 추가하여 상단 영역의 스타일을 지정합니다:

.top {
  background-color: #a6b1e1;
}

.nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px;
}

.nav > span {
  font-size: 18px;
  color: white;
  margin-right: 365px;
  font-weight: 600;
}

.nav_c span {
  font-size: 16px;
  color: white;
  margin-right: 28px;
  font-weight: 600;
}

.nav_c span:nth-child(7) {
  margin-right: 0px;
}

이 코드는 상단 영역의 배경색을 #a6b1e1로 설정하고, 너비가 1024px 인 헤더 영역을 가운데 정렬하며, 탐색 메뉴의 스타일을 지정합니다.

헤더 콘텐츠 스타일 지정

이 단계에서는 헤더 영역 내부의 콘텐츠 스타일을 지정합니다.

css/style.css 파일에 다음 코드를 추가하여 헤더 콘텐츠의 스타일을 지정합니다:

.header {
  width: 1024px;
  margin: 0 auto;
  height: 440px;
  padding-top: 13px;
}

.header_text {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}

.title_header {
  font-size: 45px;
  color: black;
  margin-bottom: 62px;
}

.title_p {
  font-size: 21px;
  font-weight: 200;
  color: white;
  margin-bottom: 36px;
}

.join {
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}

이 코드는 헤더 콘텐츠를 수직 및 수평으로 가운데 정렬하고, 제목, 단락 및 "Join" 버튼의 스타일을 지정합니다.

콘텐츠 영역 스타일 지정

이 단계에서는 페이지의 콘텐츠 영역 스타일을 지정합니다.

css/style.css 파일에 다음 코드를 추가하여 콘텐츠 영역의 스타일을 지정합니다:

.content {
  width: 1024px;
  margin: 74px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 302px;
}

.content .item {
  height: 144px;
  width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content .item span {
  font-size: 30px;
  font-weight: 200;
  color: black;
}

.content .item p {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}

이 코드는 콘텐츠 영역을 가운데 정렬하고, 행당 두 개의 항목이 있는 flex 레이아웃을 생성하며, 개별 콘텐츠 항목의 스타일을 지정합니다.

푸터 스타일 지정

이 단계에서는 페이지의 푸터 스타일을 지정합니다.

css/style.css 파일에 다음 코드를 추가하여 푸터의 스타일을 지정합니다:

.footer {
  width: 100%;
  height: 80px;
  border-top: 2px solid #aaa;
}

.footer_text {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  padding-top: 30px;
}

이 코드는 푸터의 높이를 80px 로 설정하고, #aaa 색상의 2px 테두리를 상단에 추가하며, 푸터 텍스트를 가운데 정렬합니다.

이 단계를 통해 LabEx Knowledge Network 홈페이지의 레이아웃 및 스타일 지정을 완료했습니다.

완성된 결과는 다음과 같습니다:

Image Description

요약

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

간단하고 아름다운 홈페이지 디자인

소개