리액트 기본 배우기 -CSS에 대해-

프로그래밍/React

리액트 기본 배우기 -CSS에 대해-

1. CSS에 대해

웹개발에서 스타일링을 위해 대표적으로 사용하는 것이 CSS

CSS는 Cascading Style Sheets의 약자, 스타일링을 위한 일종의 언어

cascading은 계단식이라는 뜻으로, 여러가지 스타일이 정의되어 있는데,

한번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙이 있다.

하나의 엘리먼트가 여러개의 스타일 규칙을 만족하면, 해당 스타일을 마치 계단을 한칸씩 내려가는 것처럼 우선순위에 따라 하나씩 적용하게 된다.

결과적으로 하나의 스타일이 여러개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러개의 스타일이 적용될 수 있다.

엘리먼트에 스타일이 적용되는 규칙을 selector라고 부른다.

스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것이다.

CSS는 크게 선택자와 실제 스타일로 이루어져 있다.

2. CSS의 기본 문법

선택자를 먼저 쓰고, 이후에 적용할 스타일을 중괄호 안에 세미콜론 ;으로 구분하여 하나씩 기술하는게 보통

선택자에는 해당 스타일이 적용될 HTML 엘리먼트를 넣는다.

위 그림처럼 HTML 태그를 직접 넣거나, 다른 조건들을 조합해서 선택자를 작성할 수 있다.

선택자 다음에는 중괄호 안에 적용할 스타일을 선언한다.

각 스타일은 CSS 속성과 값으로 이루어진 key value 쌍이고, CSS 속성의 이름과 값을 콜론 : 으로 구분한다.

그리고 중괄호로 묶여있는 하나의 스타일 블록에는 스타일이 여러개 들어갈 수 있는데, 여기에서 각 스타일은 세미콜론;으로 구분한다.

3. 선택자 작성하기

3-1) 단순히 특정 HTML 태그를 선택하기 위한 엘리먼트 선택자

이 경우, 선택자에 HTML 태그의 이름을 써주면 된다.

아래 코드는 <h1> 태그의 글자 색깔을 녹색으로 바꾸기 위한 CSS 속성이다.

h1 {
    color: green;
}

3-2) 두번째는 id 선택자

HTML에서는 엘리먼트에 id를 정의할 수 있는데, id 선택자는 이 id를 기반으로 선택하는 형태

# 뒤에 아이디를 넣어 사용한다.

다음 코드는 id가 section인 엘리먼트를 정의한 HTML 코드와 해당 엘리먼트의 배경 색을 검은색으로 바꾸기위한 css속성입니다.

<div id="section">
    ...
</div>

#section {
    background-color:black;
}

3-3) 세번째는 클래스 선택자

id는 고유하다는 성질을 갖고 있어서, 하나의 엘리먼트에 사용해야 하나, 클래스는 여러개의 엘리먼트를 분류하기 위해 사용한다.

클래스 선택자는 . 뒤에 클래스명을 넣어 사용한다.

아래 코드는 클래스가 medium인 엘리먼트들을 정의한 HTML 코드와 해당 엘리먼트의 글자 크기를 20px로 바꾸기 위한 CSS 속성을 보여주고 있다.

<span class="medium">
    ...
</span>

<p class="medium">
    ...
</p>

.medium {
    font-size: 20px;
}

p.medium {
    font-size: 20px;
}

여기서 두번째 스타일 선택자는 p.medium으로 되어있다.

엘리먼트 선택자 p와 클래스 선택자 .medium을 같이 사용한 것이다.

HTML 태그에 클래스가 있는 경우에만 스타일이 적용된다.

이렇게 사용하고 싶을 경우, HTML 태그명 뒤에 점을 찍고 클래스 이름을 넣어준다.

예를 들어 <h1> 태그에 클래스가 medium인 경우에만 스타일을 적용하고 싶다면, h1.medium이다.

3-4) 전체 선택자

전체 선택자(universal)는 특정 엘리먼트에만 선택적으로 적용하는 것이 아니라

전체 엘리먼트에 적용하기 위한 선택자이고, 한국에서는 흔히 별표라고 부르는 asterisk *을 사용한다.

아래 코드는 모든 엘리먼트의 글자 크기를 20px로 하고, 글자 색을 파란색으로 바꾸기 위한 CSS 속성을 나타낸다.

* {
    font-size: 20px;
    color: blue;
}

3-5) 그룹 선택자

그룹 선택자는 말 그대로 여러가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위한 선택자

h1 {
    color:black;
    text-align: center;
}

h2 {
    color: black;
    text-align: center;
}

p {
    color: black;
    text-align: center;
}

위와 같이 똑같은 스타일들이 각기 다른 선택자로 나눠져 있다고 해보자.

이렇게 반복되는 것을 여러 곳에 나눠 쓰게 되면 유지 보수도 힘들고 굉장히 비효율적이다.

그래서 그룹 선택자를 사용해서 아래와 같이 바꿔주면 간결해지고 유지보수도 쉬워지게 된다.

같은 스타일을 여러 조건의 선택자에 적용하고 싶다면, 각 선택자를 콤마로 구분해서 그룹 선택자를 적용하면 된다.

h1,h2,p {
    color: black;
    text-align: center;
}

3-6) 엘리먼트 상태와 관련된 선택자

여기서 상태라는 것은 마우스 커서가 엘리먼트 위에 올라오거나, 엘리먼트가 활성화되어 있는 경우 등을 의미한다.

대표적으로 :hover, :active, :focus, :checked, :first-child, :last-child 등이 있다.

:hover은 마우스 커서가 엘리먼트 위에 올라왔을 때,

:active는 주로 <a> 태그(link)에 사용되는데, 엘리먼트가 클릭됐을 때

:focus는 주로 <input> 태그에서 사용되는데, 말 그대로 엘리먼트가 초점(focus)을 갖고 있을 경우

:checked는 radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우

:first-child, :last-child는 상위 엘리먼트를 기준으로 각각 첫번째 child, 마지막 child일 경우를 의미

button:hover {
    font-weight: bold;
}

a:active {
    color: red;
}

input:focus {
    color: #000000;
}

option:checked {
    background: #00ff00;
}

p:first-child {
    background: #ff0000;
}

p:last-child {
    background:#0000ff;
}

4. 레이아웃과 관련된 속성

웹사이트에서 레이아웃은 화면에 엘리먼트들을 어떻게 배치할 것인지를 의미한다.

레이아웃과 관련된 CSS 속성들은 화면상의 배치와 관련이 있다고 생각하면 된다.

4-1) 레이아웃과 관련해서 가장 중요한 속성은 display

엘리먼트를 어떻게 표시할지에 관한 속성이다.

모든 엘리먼트는 그 종류에 따라 기본적으로 정해진 display 속성값을 갖고 있다.

대부분의 엘리먼트는 블록 또는 인라인값을 가진다.

display 속성의 값으로는 굉장히 많은 종류가 있다.

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

display : none;은 엘리먼트를 화면에서 숨기기 위해 사용

엘리먼트가 삭제되는 것이 아니라, 존재하긴 하나 화면에 보이지 않는 것이다.

자바스크립트 코드를 넣을 때 주로 사용

<script> 태그의 display 속성값은 display:none;

----------------------------------------------------------------------

display: block; 은 블록 단위로 엘리먼트를 배치하는 것

블록 단위라는 것은 엘리먼트가 새로운 줄에서 시작하여 위치한 곳 전체의 width를 차지한다는 것을 의미한다.

대표적으로 <p>, <div>, <h1>~<h6> 태그의 display는 block;

-----------------------------------------------------------------------

display: inline;은 말 그대로 엘리먼트를 라인 안에 넣는것

대표적으로 <span>은 기본값이 inline

이 속성을 사용하면, width, height과 관련된 속성들은 효과가 없어진다.

--------------------------------------------------------------------------

display: flex;는 엘리먼트를 블록 레벨의 플렉스 컨테이너, flex container로 표시하는 것이다.

컨테이너이기 때문에 다른 엘리먼트들을 포함한다고 생각하면 된다.

-----------------------------------------------------------------------

4-2) visiblity

CSS에서 엘리먼트를 화면에 보여주거나 감추기 위해 사용하는 속성

대표적으로 visible, hidden 2가지

div {
    visibility: visible | hidden;
}

visibility: visible;은 엘리먼트를 visible하게 하는, 화면에 보이게 하는 것이다.

visiblity: hidden;은 화면에서 안보이게 감추는 것이다.

여기서 화면에서 안보이게 하는 것이며, 영역은 그대로 차지한다는 점이 주의할점

4-3) position

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

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

static은 기본값으로 엘리먼트를 원래의 순서대로 위치시킨다.

fixed는 엘리먼트를 브라우저 window에 상대적으로 위치시킨다.

relative는 엘리먼트를 보통의 위치에 상대적으로 위치시킨다.

left: 16px;같은 속성을 추가하면 엘리먼트의 왼쪽에 16픽셀의 여백이 추가

absolute는 엘리먼트를 절대 위치에 위치시키는데, 이때 기준은 첫번째 상위 엘리먼트가 된다.

5. 엘리먼트의 가로, 세로 길이와 관련된 속성

width, height, min-width, min-height, max-width, max-height가 있다

보통 실제 픽셀 값을 넣거나, 상대값인 퍼센트를 사용

px단위가 아닌 em, rem등의 단위도 사용할 수 있다.

각 속성은 단어 의미 그대로, 가로, 세로, 최소가로, 최소세로, 최대가로, 최대세로 길이

값으로 auto를 사용하면 브라우저에서 길이를 계산하고, 실제 값을 넣으면 해당 값만큼 길이를 가진다.

div {
    
    width: auto | value;
    
    height: auto | value;
    
    min-width: auto | value;
    
    min-height: auto | value;
    
    max-width: auto | value;
    
    max-height: auto | value;

}

6. flex box

기존 CSS 레이아웃 display: block, inline 등의 속성이 다양한 레이아웃을 자유롭게 구성하는 데 불편한 부분이 있어서 이런 문제를 해결하기 위해 등장

크게 컨테이너와 아이템으로 구성

display: flex;를 사용하면 엘리먼트가 flex container가 된다.

그리고 flex container는 내부에 여러개의 엘리먼트를 포함할 수 있다.

이 엘리먼트들이 flex box의 아이템이 된다.

컨테이너 안에 여러개의 아이템이 존재할 경우, 컨테이너에 들어있는 플렉스와 관련된 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 | space-around;

}

먼저 엘리먼트를 flex container로 사용하기 위해서 display: flex;를 써준다.

그렇지 않으면 display 속성 값이 flex가 아닌 엘리먼트의 기본값으로 지정되기 때문이다.

그리고 이후에는 flex-direction 속성을 사용해서 아이템들이 어떤 방향으로 배치될것인지를 지정한다.

----------------------------------------------------------------------------

flex-direction

row: 기본값, 아이템을 행을 따라 가로 순서대로 왼쪽부터 배치

column: 아이템을 열을 따라 세로 순서대로 위쪽부터 배치

row-reverse: 아이템을 행의 역방향으로 오른쪽부터 배치

column-reverse: 아이템을 열의 역방향으로 아래쪽부터 배치

--------------------------------------------------------------------------------

그리고 flex-direction으로 지정된 방향으로 향하는 축을 main axis

main axis를 가로지르는 방향으로 향하는 축을 cross axis라고 부른다.

아래 그림은 flex-direction에 따른 main axis와 cross axis를 나타낸 것이다.

이 axis의 방향에 따라 align-items와 justify-content 속성값의 의미가 달라진다.

------------------------------------------------------------------------------------------------

align-items는 말 그대로 컨테이너 내에서 아이템을 어떻게 정렬할 것인지를 결정한다.

이때 정렬은 cross axis를 기준으로 한다.

stretch: 기본값, 아이템을 늘려서 컨테이너를 가득 채운다

flex-start: cross axis의 시작 지점으로 아이템을 정렬한다.

center: cross axis의 중앙으로 아이템을 정렬한다.

flex-end: cross axis의 끝 지점으로 아이템을 정렬

baseline: 아이템을 baseline 기준으로 정렬

--------------------------------------------------------------------------------------------------------------

마지막은 justify-content는 컨테이너 내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정한다.

이때 맞추는 기준은 main axis이다.

flex-start: main axis의 시작 지점으로 아이템을 맞춘다.

center: main axis의 중앙으로 아이템을 맞춘다

flex-end: main axis의 끝 지점으로 아이템을 맞춘다

space-between: main axis를 기준으로 첫 아이템은 시작 지점에 맞추고, 마지막 아이템은 끝 지점에 맞추며 중간에 있는 아이템을 사이의 간격이 일정하게 되도록 맞춘다

space-around: main axis를 기준으로 각 아이템의 주변 간격을 동일하게 맞춘다. 여기서 주변의 의미는 아이템의 시작과 끝을 의미한다.

7. 폰트와 관련된 속성

#title {
    
    font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>;
    
    font-size: value;
    
    font-weight: normal | bold;
    
    font-style: normal | italic | oblique;

}

가장 먼저 나오는 속성은 font-family

어떤 글꼴을 사용할 것인지 결정하는 속성

속성 값으로 사용할 글꼴의 이름을 적어주며, 글꼴의 이름에 띄어쓰기가 들어가면 큰 따옴표로 묶어준다.

#title1 {
    
    font-family: "Times New Roman", Times, serif;

}

#title2 {
    
    font-family: Arial, Verdana, sans-serif;

}

#title3 {
    
    font-family: "Courier New", Monaco, monospace;

}

사용할 글꼴의 이름이 하나가 아니라 콤마로 구분하여 여러개의 글꼴이 쓰여있는 것을 볼 수 있다.

이를 fallback 시스템이라 하고 대비책이라는 뜻이다.

지정한 글꼴을 찾지 못했을 경우를 대비해서, 사용할 글꼴을 순서대로 지정해준다.

이는 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올 수 있도록 하기 위함이다.

fallback 시스템의 가장 마지막에 쓰여있는 것은 일반적인 글꼴 분류인데, 모든 글꼴은 다음 중 하나이다.

serif : 각 글자의 모서리에 작은 테두리를 갖고 있는 형태

sans-serif: 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴, 컴퓨터 모니터에는 serif보다 가독성이 좋다.

monospace: 모든 글자가 같은 가로 길이를 가지는 글꼴, 코딩 할때 주로 사용

cursive: 사람이 쓴 손글씨 모양의 글꼴

fantasy: 장식이 들어간 형태의 글꼴

이처럼 font-family 속성을 사용할 때 사용하고 싶은 글꼴의 이름을 콤마로 구분하여 순서대로 적고, 가장 마지막에 일반적인 글꼴 분류를 적어준다.

이렇게 하는 이유는 만약 사용하고자 하는 글꼴들이 모두 없을 경우, 브라우저가 일반적인 글꼴 분류에서 가장 유사한 글꼴을 선택하도록 하기 위함이다.

만약 #title1에 지정된 font-family 속성에 Times New Roman 글꼴이 없다면, 다음으로 Times 글꼴을 찾고 그것마저 없다면, 현재 시스템이 지원하는 serif 계열 중 한가지를 선택해 표시

-------------------------------------------------------------------------------------------

그 다음 글꼴 크기와 관련된 속성으로 font-size가 있다.

px, em, rem, vw 등의 단위를 사용할 수 있다.

px는 고정된 값이기 때문에 브라우저를 통해 크기를 바꿀 수 없지만, em이라는 단위는 사용자가 브라우저에서 글꼴의 크기를 변경할 수 있게 해준다.

브라우저의 기본 글꼴 크기 1em은 16px과 동일하다.

즉, 16*em = pixels

#title1 {
    font-size: 16px;
}

#title2 {
    font-size: 1em;
}

#title3 {
    font-size:10vw; /*viewport 가로 길이의 10%*/
}

다음으로 font-weight는 글꼴의 두께

normal, bold를 사용하거나 100~900까지의 100단위 숫자로 된 값을 사용할 수 있다.

숫자가 클수록 글자의 두께가 두꺼워진다.

#title1 {
    font-weight: bold;
}

#title2 {
    font-weight: 500;
}

다음으로는 font-style 속성이 있다.

글꼴의 스타일을 지정한다.

normal: 일반적인 글자의 형태

italic: 글자가 기울어진 형태

oblique: 글자가 비스듬한 형태

여기서 italic과 oblique는 모양이 기울어진 형태로 비슷하게 보이지만, 글자를 표현하는 방식에서 약간의 차이가 있다.

italic은 글꼴을 만들때 디자이너가 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든것

oblique는 그냥 글자를 기울인 것

그래서 italic을 사용할 경우 해당 글꼴이 italic을 지원하는지 확인해야한다.

#title1 {
    font-style: italic;
}

#title2 {
    font-style: oblique;
}

8. 기타 많이 사용하는 속성

8-1) 배경색 지정

background-color은 엘리먼트의 배경색을 지정

16진수 코드를 쓰거나, rgb(), rgba()를 쓰거나, 정의된 색상 이름을 쓰거나

만약 배경색을 투명하게 만들고 싶다면, background-color: transparent;를 사용

8-2) border

border은 테두리를 위한 속성

border-width, border-style, border-color 등 세가지 속성을 축약시켜 한번에 사용할 수 있도록 만든것

각 속성을 사용해서 테두리의 두께, 스타일, 색상을 지정할수도 있고, border 속성으로 한번에 지정할 수도 있다.

div {
    background-color: color | transparent;
    
    border: border-width border-style border-color;
}

다음은 실제 사용 예

배경색을 빨간색으로 지정하거나 1픽셀의 검은색 직선으로 테두리를 만든다

#section1 {
    background-color: red;
}

#section2 {
    border: 1px solid black;
}

9. styled-components

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

컴포넌트 개념을 사용하여 리액트와 잘 맞는다

$npm install --save styled-components로 설치

아래 코드를 작성하여 실제로 잘 돌아가는지 확인

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

const Wrapper = styled.div`
padding: 1em;
background: grey;
`;

const Title = styled.h1`
font-size:1.5em;
color:white;
text-align:center;
`;

function MainPage(props) {
    return (
        <Wrapper>
            <Title>
                안녕, 리액트!
            </Title>
        </Wrapper>
    )
}

export default MainPage;

10. styled-components 기본 사용

styled-components는 tagged template literal을 사용하여 구성 요소의 스타일을 지정

template literal은 자바스크립트에서 제공하는 문법

프로그래밍에서 literal은 소스코드의 고정된 값이다.

위 그림을 보면 대입 연산자 왼쪽에 number라는 이름의 변수가 등장하며, 오른쪽에는 정수 20이 등장

오른쪽에 있는 정수 20이 literal

소스코드 상 고정된 값을 의미한다

// 정수 리터럴(integer literal)
const myNumber = 10;

// 문자열 리터럴(string literal)
const myStr = 'Hello';

//배열 리터럴(Array literal)
const myArray = [];

//객체 리터럴(object literal)
const myObject = {};

위 코드에 여러 종류의 리터럴이 나와있다.

변수를 선언할 때 var이나 let를 사용하지 않고 상수를 의미하는 const를 사용하였다.

이러면 해당 변수들이 모두 상수가 된다.

상수는 변하지 않는 수로, 한번 선언된 이후에는 값을 바꿀 수 없다.

그리고 대입 연산자 = 의 오른쪽에 있는 값은 모두 리터럴이 된다.

그렇다면 템플릿 리터럴은 무엇인가?

말 그대로 리터럴을 템플릿 형태로 사용하는 자바스크립트 문법이다.

backticks(`)을 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법이다.

이는 크게 untagged template literal, tagged template literal로 나뉜다.

// untagged template literal
// 단순 문자열

`string text`

//여러 줄에 걸친 문자열
`string text line 1
 string text line 2`

//대체 가능한 expression이 들어있는 문자열
`string text ${expression} string text`

//tagged template literal
// myFunction의 파라미터로 expression으로 구분된 문자열 배열과 
//expression이 순서대로 들어있는 형태로 호출

myFunction`string text ${expression} string text`;

위 코드에 나온 것처럼 untagged template literal은 보통 문자열을 여러줄에 걸쳐 작성하거나 formatting을 위해 사용한다.

tagged template literal은 앞에 나온 태그 함수를 호출하여 결과를 리턴한다.

여기서 태그 함수의 파라미터는 expression으로 구분된 문자열 배열과 expression이 순서대로 들어가게 된다.

const name = "대혁";
const region = "목포";

function myTagFunction(strings, nameExp, regionExp) {
    let str0 = strings[0]; //'제 이름은 '
    let str1 = strings[1]; //'이고, 사는 곳은'
    let str2 = strings[2]; //'입니다.'

    //여기서도 template literal을 사용하여 리턴 가능
    return `${str0}${nameExp}${str1}${regionExp}${str2}`;


}

const output = myTagFunction`제 이름은 ${name}이고, 사는 곳은 ${region}입니다.`;

// 출력
// 제 이름은 대혁이고, 사는 곳은 목포입니다.
console.log(output)

styled-components는 tagged template literal을 사용해서, css 속성이 적용된 리액트 컴포넌트를 만들어 준다.

기본적인 사용방법은 다음과 같이 backticks(`)으로 둘러싸인 문자열 부분에 css 속성을 넣고,

styled.<HTML태그>형태로 태그 함수를 사용한다.

이러면 해당 HTML 태그에 CSS 속성이 적용된 형태의 리액트 컴포넌트가 만들어진다.

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

const Wrapper = styled.div`
padding:1em;
background:grey;
`;

11. props를 사용한 styled-components

styled-components에서 조건이나 동적으로 변하는 값을 사용해서 스타일링하는 방법

이를 위해 제공하는 것이 props

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

const Button = styled.button`
color: ${props => props.dark ? 'white':'dark'};
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 Sample;

위 코드에서 Button이라는 컴포넌트가 등장

이 컴포넌트는 styled-components를 사용해서 만들어짐

그리고 styled-components를 사용하는 부분의 CSS 속성을 보면, 내부에 props가 사용

여기서 props는 해당 컴포넌트에서 사용된 props

따라서 실제 Button 컴포넌트를 사용하는 부분의 코드를 보면, <Button dark>Dark</Button>처럼

props로 dark를 넣어주는 것을 볼 수 있다.

그리고 들어간 props가 styled-components로 전달

12. styled-components의 스타일 확장

만약 styled-components로 생성된 리액트 컴포넌트를 기반으로, 추가적인 스타일을 하고 싶다면?

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

//Button 컴포넌트
const Button = styled.button`
color:grey;
border: 2px solid palevioletred;
`;

//Button에 style이 추가된 RoundedButton 컴포넌트
const RoundedButton = styled(Button)`
border-radius:16px;
`;

function Sample(props){
    return(
        <div>
            <Button>Normal</Button>
            <RoundedButton>Rounded</RoundedButton>
        </div>
    )
}

export default Sample;

위 코드에서 Button과 RoundedButton 컴포넌트가 나온다.

Button 컴포넌트는 HTML의 button 태그를 기반으로 만들어진 단순한 버튼

그리고 RoundedButton은 HTML 태그가 빠져있고, Button 컴포넌트가 styled()에 괄호로 둘러싸인채 들어가있다.

이 부분이 다른 컴포넌트의 스타일에 추가로 확장시켜서 사용하는 것이다.

Button 컴포넌트에 border-radius를 추가해서 모서리를 둥글게 만든다

13. 실습으로 따라하기

$npx create-react-app my-app으로 프로젝트 생성

$npm install --save styled-components로 라이브러리 설치

src 폴더 내에 chapter_15라는 폴더 생성

다음과 같이 Blocks.jsx라는 파일 만들고 코드 작성

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"
    }
]

function Blocks(props) {
    return (
        <Wrapper>
            {blockItems.map((blockItem) => {
                return (
                    <Block
                    padding={blockItem.padding}
                    backgroundColor={blockItem.backgroundColor}>
                        {blockItem.label}
                    </Block>
                )
            })}
        </Wrapper>
    )
}

export default Blocks;

index.js 파일을 수정

import Blocks from './chapter_15/Blocks';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Blocks />
  </React.StrictMode>
);

npm start로 실행해보면...

아래 그림처럼 3개의 박스가 가로로 나열되어 나타나며, flex-direction이 row로 되어있기에 가로로 나열

크롬 개발자 도구의 element 탭에서 css 속성을 변경해서 어떻게 변하는지 봐보자.

align-items 속성을 baseline으로 바꿔본다

stretch로 바꿔보면??

flex-direction을 column으로 바꿔보면..?

'프로그래밍 > React' 카테고리의 다른 글

react에서 webcam 사용해서 얼굴 캡쳐하기 (0)	2023.01.25
리액트 기본 블로그 만들기 실습으로 마무리 (0)	2023.01.21
리액트 기본 배우기 -컨텍스트에 대해- (0)	2023.01.16
리액트 기본 배우기 -합성과 상속- (0)	2023.01.15
리액트 기본 배우기 -state를 공유하는 방법- (0)	2023.01.14

TAGS.