[React]리액트 - CSS

📝Styling

 

리액트 컴포넌트를 어떻게하면 원하게 만들고 원하는 곳에 배치 가능한지 알아보자

 📝CSS

CSS 선택기 (w3schools.com)

CSS Selectors

🚩 배치 관련 속성

화면에 엘리먼트들을 어떻게 배치할 것인가를 설정한다. 

display

엘리먼트를 어떻게 표시할 지 방법에 따라 설정하는 것 

div {
	display: none | block | inline | flex
}

• none : 엘리먼트를 화면에서 숨김
• block : 블록 단위로 element 배치
  • <p>, <div> <h1~6>
• inline : 엘리먼트를 라인 안에 넣을 것
• flex : 엘리먼트 블록 레벨의 flex container로 표시

visibility

엘리먼트를 화면에 보여주거나 감춤

div {
	visibility : visible | hidden
}

 

 

• visible : 엘리먼트를 화면에 보이게 하는 것
• hidden : 화면에서 안 보이게 감추는 것 

position

엘리먼트를 어떻게 위치시킬 것인지 설정

div {
	position : static | fixed | relative | absolute
}

• static : 원래의 순서대로 위치, 기본값
• fixed : 엘리먼트를 브라우저 윈도우에 상대적으로 위치시킴
• relative :  엘리먼트를 보통의 위치에 상대적으로 위치시킴
• absolute : 엘리먼트를 절대 위치에 위치시킴

🚩 Flexbox

css의 레이아웃 설정의 자유로운 구성에 불편하여 나오게 되었다.

위 그림처럼 Flexbox 컨테이너와 아이템으로 구성된다.

• Flex container는 여러 개의 엘리먼트(아이템)을 넣을 수 있다.
• fiex에 관련된 css 속성이 안에 순서에 대해 정의한다.

div {
     display: flex;
     flex-direction : row | column | row-reverse | column-reverse;
     align-items : stretch | flex-start | center | flex-end | baseline;
     justify-content : flex-start | center | flex-end | space-between | splace-around
}

• flex-direction

• align-items

• justify-content

📝 styled-components 

styled-component는 css 문법을 그래도 사용하면서 결과물을 스타일링된 컴포넌트로 만들어주는 오픈소스 라이브러리이다.

🚩 기본 사용법

import React from "react";
import styled from "styled-components";

const Button = styled.button`
    color: ${props => (props.dark ? "white" : "black")};
    background: ${props => (props.dark ? "black" : "white")};
    border: 1px solid black;
`;
function Sample(props){
    return (
        <div>
            <Button>Normal</Button>
            <Button dark>Dark</Button>
        </div>
    )
}
export default Button;

이렇게 각 컴포넌트에 스타일을 적용하고 사용할 수 있다. 물론 유연성을 props로 구현도 가능하다.

🚩 스타일 확장

import React from "react";
import styled from "styled-components";

const Button = styled.button`
    color: ${props => (props.dark ? "white" : "black")};
    border: 1px solid black;
`;
const RoundedButton = styled(Button)`
    border-radius: 16px;
`;
function Sample(props){
    return (
        <div>
            <Button dark>Normal</Button>
            <RoundedButton>Dark</RoundedButton>
        </div>
    )
}
export default Button;

위 코드처럼 다른 컴포넌트 스타일을 확장해서 사용할 수 있다. 

styled-components: Documentation

styled-components: Documentation