[리액트(React) Study Log] [Person App-014] Adding Styling with Stylesheets

[리액트(React) Study Log] [Person App-014] Adding Styling with Stylesheets

 

1. CSS 파일을 이용한 Person class styling

 - react styling 은 두 가지 방법이 있음 : CSS file styling, inline styling

 - Person class 의 최상위 element div 에 className 지정.

//src-Person-Person.js

 

...

 

const person = (props) => {

    return (

        <div className="Person">

...

 - Person class 에 대한 css style object 생성.

/* src-Person-Pserson.css */

 

.Person {

    width: 60%;

    margin: 16px auto;

    border: 1px solid #eee;

    box-shadow: 0 2px 3px #ccc;

    padding: 16px;

    text-align: center;

}