소플의 처음 만난 리액트_실습13

소플의 처음 만난 리액트_실습13

---

styled-components

- CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리

- 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음

- 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정

---

styled-components를 사용하여 스타일링해보기 실습

import styled from "styled-components";

const Wrapper = styled.div`
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: lightgrey;
`;

const Block = styled.div`
    padding: ${(props) => props.padding};
    border: 1px solid black;
    border-radius: 1rem;
    background-color: ${(props)=> props.backgroundColor};
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
`;

const blockItems = [
    {
        label : "1",
        padding: "1rem",
        backgroundColor: "red",
    },
    {
        label: "2",
        padding: "3rem",
        backgroundColor: "green",
    },
    {
        label: "3",
        padding: "2rem",
        backgroundColor: "blue",
    },
];
// 각각 만든 스타일 컴포넌트들을 사용 padding과 backgroundColor는 map()을 통해 blockItem에 있는 것을 적용
function Blocks(props) {
    return (
        <Wrapper>
            {blockItems.map((blockItem) => {
                return (
                    <Block
                        padding={blockItem.padding}
                        backgroundColor={blockItem.backgroundColor}
                    >
                        {blockItem.label}
                    </Block>
                );
            })}
        </Wrapper>
    );
}
export default Blocks;

 

초기 출력화면

개발자 도구 Styles탭에서 스타일을 변경해보았다.

align-items: baseline

align-items: stretch

flex-direction: column