반응형 뉴스 웹사이트 홈페이지 제작

소개

이 프로젝트에서는 LabEx Daily 신문 웹사이트의 홈페이지를 만드는 방법을 배우게 됩니다. HTML 구조를 설정하고 CSS 를 사용하여 홈페이지의 다양한 섹션을 스타일링하는 역할을 맡게 됩니다.

👀 미리보기

LabEx Daily 홈페이지 미리보기

🎯 과제

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

LabEx Daily 홈페이지의 HTML 구조를 설정하는 방법
로고 및 탐색 버튼을 포함한 헤더 섹션을 스타일링하는 방법
전화 이미지와 콘텐츠 영역을 포함한 배너 섹션을 스타일링하는 방법
"Latest News" 및 "More" 텍스트를 포함한 탭 제목 섹션을 스타일링하는 방법
뉴스 항목의 레이아웃과 "More" 버튼을 포함한 뉴스 목록 섹션을 스타일링하는 방법
왼쪽 및 오른쪽 섹션을 포함한 푸터 섹션을 스타일링하는 방법

🏆 성과

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

반응형 (responsive) 하고 시각적으로 매력적인 뉴스 웹사이트 홈페이지를 만들 수 있습니다.
CSS 를 사용하여 웹 페이지의 다양한 섹션을 스타일링할 수 있습니다.
CSS 를 사용하여 요소를 배치하고 정렬할 수 있습니다.
원하는 디자인을 달성하기 위해 다양한 CSS 속성을 적용할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

이 질문에 대한 초기 코드는 이미 제공되었습니다. 코딩 환경을 열면 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

여기서:

css/style.css는 이 챌린지를 위해 완성해야 하는 스타일 파일입니다.
images는 프로젝트에서 사용되는 이미지 파일을 포함합니다.
index.html은 LabEx Daily 프로젝트의 홈페이지입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

LabEx Daily 홈페이지가 다음과 같이 보이도록 css/style.css 스타일 파일 (이미 제공된 기본 CSS 스타일은 수정하지 마세요) 을 완성하십시오 (전체 페이지 너비는 1024px입니다).

Image Description

헤더 스타일 지정

이 단계에서는 LabEx Daily 홈페이지의 헤더 섹션을 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
/* TODO */ 뒤에 다음 CSS 규칙을 추가하여 헤딩 스타일을 조정합니다:

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

이러한 CSS 규칙은 LabEx Daily 로고, "APP Download" 버튼 및 해당 호버 효과를 포함하여 헤더의 스타일을 지정합니다.

배너 스타일 지정

이 단계에서는 LabEx Daily 홈페이지의 배너 섹션을 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
다음 CSS 규칙을 css/style.css 파일에 추가합니다:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

이러한 CSS 규칙은 배경색, 전화 이미지의 위치, 제목과 설명이 있는 콘텐츠 영역을 포함하여 배너 섹션의 스타일을 지정합니다.

탭 제목 스타일 지정

이 단계에서는 LabEx Daily 홈페이지의 탭 제목 섹션을 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
다음 CSS 규칙을 css/style.css 파일에 추가합니다:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

이러한 CSS 규칙은 배경색, "Browse Content" 및 "Latest Content" 텍스트의 위치, 그리고 각 스타일을 포함하여 탭 제목 섹션의 스타일을 지정합니다.

뉴스 목록 스타일 지정

이 단계에서는 LabEx Daily 홈페이지의 뉴스 목록 섹션을 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
다음 CSS 규칙을 css/style.css 파일에 추가합니다:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

이러한 CSS 규칙은 뉴스 항목의 레이아웃, 이미지 크기 및 위치, 텍스트 스타일, 그리고 하단의 "Check out more in the app!" 버튼을 포함하여 뉴스 목록 섹션의 스타일을 지정합니다.

푸터 스타일 지정

이 마지막 단계에서는 LabEx Daily 홈페이지의 푸터 섹션을 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
다음 CSS 규칙을 css/style.css 파일에 추가합니다:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

이러한 CSS 규칙은 배경색, 왼쪽 및 오른쪽 섹션의 레이아웃, 텍스트 스타일, 그리고 QR 코드 이미지의 위치를 포함하여 푸터 섹션의 스타일을 지정합니다.

축하합니다! 이제 LabEx Daily 홈페이지의 스타일링을 완료했습니다. 이제 웹 브라우저에서 index.html 파일을 열어 최종 결과를 확인할 수 있습니다.

LabEx Daily homepage footer

요약

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

반응형 뉴스 웹사이트 홈페이지 구축

소개