스파르타 코딩클럽 - 리액트 1주차(13)

1. 1주차 마지막 숙제

• App.js

import './App.css';

import Start from "./Start";

class App extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            name: "손가락"
        };
    }

    render () {
        return(
            <div className="App">
                <Start name={this.state.name}/>
            </div>
        );
    }
}
export default App;

• Start.js

import React from "react";
import img from "./hand_one_finger.png";

const Start = (props) => {

    return (
        <div className="container">
            <div className="header">
            <img className="header__img" src={img}/>
            <h1>나는 <span>{props.name}</span>에 대해 얼마나 알고 있을까?</h1>
            <input className="header__description" type="text" placeholder="내 이름"/>
            <button className="btn">시작하기</button>
        </div>
        </div>
    );
}

export default Start;

• App.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Btn */
.btn {
  padding: 8px 24px;
  background-color: rebeccapurple;
  border-radius: 10px;
  color: white;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  padding: 16px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px solid black;
  border-radius: 10px;
  width: 100vw;
  height: 100vh;
  max-width: 500px;
  padding: 0vh 16px;
  margin: 0px auto;
}

.header h1 {
  text-align: center;
  font-size: 1.5em;
  line-height: 1.4;
}

.header h1 span {
  color: white;
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 5px;
}

.header__img {
  width: 200px;
  margin: 50px;
}

.header__description {
  padding: 10px;
  margin: 24px 0;
  border: 1px solid black;
  border-radius: 10px;
  width: 100%;
}

• 결과
  

1주차 끝~~~