준비 및 빌드를 중지하는 방법

다시 오신 것을 환영합니다!

우리가 중단한 부분 - GitHub

오늘 우리가 하는 일:

기본 계층 응용 프로그램 빌드

뒤에서 시작

지난 장에서 논의한 바와 같이, 우리는 디자인을 구성 요소의 계층 구조로 분해했습니다. 디자인 내의 모든 구성 요소는 하나의 구성 요소인 App 구성 요소 위에 구축됩니다.

앱 구성 요소는 웹 페이지의 배경 역할을 하며 애플리케이션 전체에 컨텍스트를 제공합니다.

웹 페이지의 주요 기능은 밝음에서 어두움으로의 세로 그라데이션이므로 여기서부터 시작하겠습니다.

새 App.css 파일이 포함된 Styles라는 새 디렉토리를 생성합니다. 이제 앱 구성 요소로 가져옵니다.

import './styles/App.css'

function App() {
  return (
    <>
      Hello World!
    </>
  );
}

CSS Gradient이라는 깔끔한 웹사이트를 사용하여 CSS를 쉽게 생성하여 배경을 만들 수 있습니다.

body {
  background: linear-gradient(0deg, rgba(0, 3, 10, 1) 0%, rgba(0, 25, 34, 1) 100%);
  height: 2779px;
}

구성 요소 추가를 시작할 때까지 설계에서 지정한 높이를 하드 코딩했습니다.

구조가 필요하다

이제 Body 구성 요소를 믹스에 추가하여 시작할 수 있는 배경을 완성했습니다.

이를 위해 컴포넌트 디렉토리 내에 새로운 Body 컴포넌트를 생성합니다.

본문은 응용 프로그램 내의 주요 구성 요소를 수용하고 사용자가 사이트를 탐색하는 중심이 됩니다. 그러나 당분간은 CSS를 구현할 것입니다.

Body 구성 요소 내에서 먼저 Body.css 파일을 가져와야 합니다. 이 작업을 10분 동안 잊어버렸습니다. Figma 사양에 따라 불투명도가 80%인 중앙 검정색 배경을 만들어야 합니다. 이를 달성하기 위해 다음을 구현합니다.

.frame {
  background: rgba(0, 0, 0, .8);
  height: 2779px;
  width: 720px;
}

.x-center {
  margin: auto;
}

function Body() {
  return (
    <div className='frame x-center'>

    </div>
  )
}

이렇게 하면 다음이 생성됩니다.

최종 바닥글

마치기 직전에 바닥글의 프레임을 추가합니다. 유사한 프로세스를 따르면 다음과 같이 끝납니다.

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 71, 98, 0.2);
  height: 79px;
  width: 100%;
}

import '../styles/Footer.css'

function Footer() {
  return (
    <>
      <div className='footer'></div>
    </>
  )
}

최종 디자인은 현재 다음과 같아야 합니다(축소됨).

GitHub

현재 위치를 확인하려면 각 게시물 끝에 있는 최종 커밋link을 따라가면 됩니다!