리액트의 기본 요소: CSS

이전 글

리액트의 기본 요소: 폼, State, 합성과 상속, 컨텍스트

 

교재: 소플의 처음 만난 리액트

 

키워드

CSS styled-components

 

Ch15.스타일링

CSS

웹 개발할 때 스타일링을 하기 위해 사용하는 도구

 

구성요소

selector(선택자): 엘리먼트에 스타일이 적용되는 규칙

스타일: 속성과 값으로 이뤄진 키-값 쌍

-> 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술한다

 

id 선택자: id를 기반으로 선택하는 형태로, #뒤에 아이디를 넣어 사용한다

클래스 선택자: 여러 개의 엘리먼트를 분류하기 위해서 사용

전체 선택자: 전체 엘리먼트에 적용하기 위한 선택자로, * 를 사용

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

 

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

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

 

상태와 관련된 선택자

:hover, :active, :focus, :checked, :first_child, :last-child 등

 

레이아웃과 관련된 속성

display 속성: 엘리먼트를 어떻게 표시할지에 관한 속성 

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

 

visibility 속성: 엘리먼트를 화면에 보여 주거나 감추기 위해 사용

div {
	visibility: visible | hidden;
}

 

position 속성: 엘리먼트를 어떻게 위치시킬 것인지

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

 

엘리먼트의 가로, 세로 길이와 관련된 속성들 -> width, height, min-height, min-width

 

 

플렉스박스

컨테이너와 아이템으로 구성된되며, 컨테이너 내부에 여러 개의 엘리먼트 포함할 수 있다. 

가장 많이 사용되는 플렉스와 관련된 CSS 속성들

 

폰트와 관련된 속성

 

styed-components

사용하기 위해서 프로젝트에 설치한다

#npm을 사용하는 경우
$ npm install --save styled-components

#yarn을 사용하는 경우
$ yarn add styled-components

 

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

리터럴: 소스코드의 고정된 값

 

실습: styed-components 사용하여 스타일링해 보기(448p)