React 마지막 간단한 프로젝트 2일차- Home화면

완성본:https://github.com/qjawns0222/hompage.git

어제에 이어서 Home화면을 만들어보겠습니다.

4개의 페이지 중에 가장 간단 한 화면이 될것 입니다.

우선  어제 만든 Components 폴더에 Home.jsx 만들고(보여지는 부분)

src내부에 container폴더 만들어주시고 그안에 Home.container.jsx  생성(전달해줄 데이터 관련)

Components/css/Home.module.css 파일도 만들어주세요 (css설정)

그럼 우선 pagesdml Home.jsx 가서 return을 <Homecontainer />로 수정해주세요 import도 해주세요

import React from "react";

import Homecontainer from "../container/Homecontainer";

export default function Home() {

  return <Homecontainer />;

}

이렇게 함으로써 router에서 Home을 보이게 해줬고 여기서 Homecontainer을 보이게 해줬습니다.

그럼이제 Homecontainer로 이동하겠습니다.

import React from "react";

import Home from "../Components/Home";

export default function Homecontainer() {

  return <Home />;

}

여기서는 다시 Component의 Home을 보이게 해줬습니다.

Componenet/Home

import React from "react";

import Form from "./Form";

import style from "./css/Home.module.css";

export default function Home() {

  return (

    <Form>

      <h1 className={style.name}>천생슈퍼</h1>

      <div className={style.image}>

        <img

          className={style.img}

          src="https://raw.githubusercontent.com/qjawns0222/portfolio/main/img/%ED%8C%8C%EB%9E%80%EB%B6%88%20%EB%A1%9C%EA%B3%A0.png"

          alt="메인"

        />

      </div>

      <div className={style.description}>

        30년 전동의 김밥 가게

        <br />

        김밥과 오뎅이 주 메뉴이다

      </div>

    </Form>

  );

}

여기서 보시면 Form이 사용된것을 보실수 있습니다. 즉 Form내용에서 children부분에 작성된 내용이 드간 모습이 출력이 됩니다.

Home.module.css

.name {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 20vh;

  font-size: 50px;

}

.image {

  display: flex;

  justify-content: center;

}

.img {

  max-width: 500px;

}

.description {

  margin: 4%;

  text-align: center;

  font-weight: bolder;

  font-size: 28px;

}

@media only screen and (min-width: 100px) {

  .img {

    width: 200px;

  }

}

작성

@media 부분은 저렇게 {}안에 작성하면 ()안에 적혀있는 조건에 따라 css가 변경이됩니다.

즉 반응형으로 만들때 사용되는 방법입니다.

 

완성된 모양을 보면

이렇게 간단한 Home 화면을 만들었습니다.