13. 리액트 Styling

CSS와 selector

CSS란?

> 웹 개발 스타일에 많이 쓰이는 "마크업 언어"이다.

이때 엘리먼트에 CSS 규칙이 적용되는 것을 Selector라고 부른다. (선택자라는 뜻도 있다.)

규칙은 다음과 같이 그림으로 표현이 가능할 듯하다.

---

다음은 Selector의 유형을 알아보겠다.

엘리먼트 셀렉터

아이디 셀렉터

클래스 셀렉터

유니버셜 셀렉터

(전체 범위)

그루핑 셀렉터

엘리먼트 상태와 관련된 셀렉터

이 밖에도 엄청 많은 셀렉터가 존재한다. (MDN 참고)

레이아웃과 관련된 CSS 속성

레이아웃에 관련된 CSS 속성을 배워보자.

---

레이아웃을 구성할 때 중요한 속성은 "display" 속성이다.

대표적 값을 위 그림을 참고하자.

---

그다음은 "visibility" 속성이다.

visibility은 화면에서 보이게 하거나 아님 안 보이게 도와주는 속성이다.

대표적 값을 위 그림을 참고하자.

---

그 다음은 "position" 속성이다.

말 그대로 화면상의 위치를 지정해 주는 속성이다.

대표적 값을 위 그림을 참고하자.

---

그다음으로는 가로와 세로 길이에 관한 속성이다.

단어 그대로 해석해 주면 된다. 

---

Flexbox

CSS에서 가장 많이(중요한) 쓰이는 속성이다.

Flexbox을 이용해서 편하게 화면을 구성할 수 있게 되었다.

 

컨테이너 안에 아이템이 존재하는 것이다.

flex와 관련된 대표적 속성은 다음과 같다.

이제 대표적인 속성에 대한 자세한 설명을 하겠다.

(아, 참고로 flexbox를 쓰고 싶으면 무조건 먼저 display: flex라고 문법을 표기해주어야 한다.

flex-direction

아이템을 행으로 배치할 것인지 열로 배치할 것인지 결정하는 속성이다.

즉, "순서"를 결정하는 속성이다.

좀 더 그림으로 이해하기 쉽게 표현하면 다음과 같다.

---

기준 축은 row 혹은 column으로 정해진다. 그림을 참고해서 정렬이 어떤 방향으로 일어나는지 확인할 수 있다. (따로 설정 안 하면 row로 설정이 된다.)

align-items

아이템에 관한 속성이다.

아이템은 컨테이너를 기준으로 어떻게 아이템을 정렬할지 결정하는 속성이다.

대표 값은 다음과 같다.

그림으로 표현하면 다음과 같다.

justify-content

아이템에 관한 속성이다.

컨테이너 안에서 아이템을 어떻게 나란히 정렬할 것인지 결정하는 속성이다.

대표 값은 다음과 같다.

그림으로 표현하면 다음과 같다.

---

Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성

폰트와 관련된 대표적인 속성은 위와 같다.

먼저 

font-family은 글꼴의 이름을 분류하는 속성이다. 사용 예시는 다음과 같다. (속성을 쓸 때 사용할 글꼴 이름에 "띄어쓰기"가 들어간다면 무조건 큰 따옴표로 감싸야한다. )

<일반적인 글꼴 분류>는 다음과 같다.

내가 쓰고 싶은 글꼴이 브라우저에서 잘 작동하지 않게 되면 "일반적인 글꼴 분류"로 작성된다.

---

font-size는 말 그대로 폰트의 크기를 바꾸는 속성이다.

---

font-weight는 폰트의 두께를 바꾸는 속성이다.

---

font-style은 폰트의 스타일을 바꾸는 속성이다.

---

이 밖에 기타적으로 많이 쓰는 속성이 존재한다.

1. background-color < 백 그라운드 색깔을 바꿈.

transparent는 배경을 투명하게 만드는 키워드.

2. border < 테두리를 컨트롤하는 속성.

 

당연히 이 밖에도 많은 CSS 속성이 있지만, 이 정도만 배워보자.

---

styled-components

styled-components는 CSS 문법을 그대로 쓰면서 결과물을 스타일 된 컴포넌트로 만들어주는 오픈소스 라이브러리이다.

리액트에 많이 쓰이는 라이브러리이다.

라이브러리이어서 설치가 필수이다.

---

이제 사용법을 말할 것이다.

그전에 literal을 먼저 설명하고자 한다.

literal은 소스 코드에 고정된 값을 말한다. (상수라고 생각하면 안 됨)

literal은 당연히 다양한 값들이 있다. (숫자, 문자열, 배열 등..)

literal을 설명한 이유는 tagged template literal을 이용해야 하기 때문이다.

tagged template literal은 template literal를 타켓팅해주는 문법이라고 할 수 있다. template literal은 literal을 템플릿화 한 것이다.

tagged template literal에 관한 실제적인 코드는 다음과 같이 쓰일 수 있다. ( tagged template literal은 자바스크립트에서 지원해 주는 문법이다.)

쉽게 생각하자. "역 따옴표"인 ` ` 을 이용해 주면 되고, 파라미터를 가져오고 싶으면 중괄호를 열고, 앞에 달러 표시를 붙여주면 되는 것이다.

---

많이 돌아갔지만, 실제 사용 예시를 다음과 같이 볼 수 있다.

먼저 import를 통해 styled를 가져와야 한다 이후 사용할 상수를 정의. 상수에 styled를 넣어준다. (뒤에 확장자를 이용해서 내가 원하는 태그에 세부적으로 스타일링도 가능하다.)

---

이때 styled-components에서 조건이나 동적으로 변하는 값을 사용해서 스타일할 수 있다.

사용하고 싶다면 props를 이용해서 사용하면 된다.

예시

또한, styled-components의 스타일도 확장이 가능하다.

일반적인 버튼과 스타일이 확장된 버튼이 있다.

그냥 노말 버튼은 HTML 태그 버튼이지만, 라운드 버튼은 스타일이 적용된 버튼이다. (괄호로 버튼을 감싸준다. < 빨간 박스 참고)

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

---

완성된 모습은 위와 같다.

코드를 살펴보면 다음과 같다.

코드가 엄청 길지만, 지금까지 배운 스타일에 대한 문법이 전부 들어가 있는 코드이다.

코드가 너무 길기에 포인트만 이야기하겠다.

• import를 이용해서 styled를 가져와야 함. (이걸 하려면 라이브러리를 미리 깔아야 함.)
• 문법 쓰고 싶으면 상수명 정의하고 styled.~~를 작성 이후 역따옴표로 감싸줌.
• 문법은 css와 거의 비슷함. 동적으로 값을 바꾸고 싶으면 props를 사용.
• 함수형 컴포넌트 정의. 이 컴포넌트 안에 특정 HTML 태그를 작성으로 태그로 감싸준다. 필요하다면 태그에 스타일링을 해줄 수 있다.

css 태그는 정말 많기 때문에, 모든 태그를 다 외우는 것은 불가능하다.

그러나 "정말 자주 쓰는" 태그를 쓰면서 자연스럽게 외워진다. 포인트는 "자연스럽게"이다. 억지로 외우지 말자. (근데 flexbox는 주요한 태그이니깐 외우자.)