[ React ] 컴포넌트 스타일링

9단원. 컴포넌트 스타일링

일반 css 사용하기 -> sass 사용하기 -> css module 사용하기 -> styled-components 사용하기

---

1. css

CSS 클래스를 중복되지 않게 만드는 것이 중요

ex. 컴포넌트 이름-클래스 형태

 [ [ [ content ] padding ] border ]

---

1.1 flex

flex box 안에 담긴 것들은 item이 됨

- 가로: 기본축/ 세로: 크로스축 시 item 배치 방향 가로축

flex-wrap: nowrap;  //default값

flex-wrap: wrap; //박스가 아래로 떨어짐

flex : flex : 1   =>  flex: 1 1 0%;

        flex-grow: 1  부모가 가진 여유 공간을 1배 비율로 가져라

        flex-shrink: 1  공간이 줄어들면 1배 비율로 줄어들 수 있다

        flex-basis: 0%  기본 크기는 0 (즉, 전체 공간을 나눠서 배분)

< flex >

flex-start: 아이템들이 왼쪽에 정렬됨
flex-end: 아이템들이 오른쪽에 정렬됨
center: 가운데 정렬
space-between: 양 끝에 정렬되고, 사이에 동일한 간격
space-around: 양쪽 바깥 여백이 안쪽보다 작음. 각 아이템 주위에 동일한 간격이 생김. 바깥 여백은 반쪽 크기.
space-evenly: 모든 간격이 완전히 동일. 아이템 사이와 양쪽 바깥도 같은 간격.

 

1. flex-basis

초기 크기를 얼마로 할지 설정

< align > 

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

 

---

2. flex-grow

- 0 : default, flex-basis에 설정한 값으로 유지

           숫자: 1이상 되면 해당 아이템이 유연한(Flexible) 박스로 변하고

           숫자를 공통으로 지정하면 container / item

flex-basis: 0;

.item:nth-child(1) { flex-grow: 0; }        .item:nth-child(2) { flex-grow: 2; }        .item:nth-child(3) { flex-grow: 0; }

---

3. flex-shrink

부모 요소의 공간이 부족할떄 해당 flex item 이 얼마나 줄어들 수 있는 지를 설정하는 속성

- 기본값은 1: 공간이 부족하면 줄어들 수 있음

- 0: 줄어들지 않고 크기 유지

 

---

4. order

Flex 컨테이너 안에서 자식 요소의 순서를 지정하는 속성

---

1.2 row (행)

- 왼쪽 상단부터 정렬

정렬: 
justify-content: 메인 축 방향 정렬
align-items: cross 축 방향 정렬

- 아이템들이 수직층 방향으로 컨테이너 크기와 같게 strech

단, 해당 item의 크기를 지정하면 지정한 크기대로 표시됨

---

1.3 column (열)

수직 방향(위→아래)으로 배치하고 싶을 때 주로 사용
보통 flex-direction 속성에서 column을 지정해주면 flex 아이템들이 아래로 쌓이는 구조가 됨

---

1.4 Box-sizing

CSS에서 요소의 크기 계산 방식을 지정하는 속성

 

     < content-box >

 - css에서 기본 box-sizing
      - width와 height는 콘텐츠(content) 영역만을 의미, border, padding의 크기는 별도로 추가
      요소 크기 : content(width,height) + padding+ border

      border-box
      - width와 height가 콘텐츠 + 패딩 + 테두리까지 포함한 크기를 의미
        ==>  요소의 크기가 width 값 그대로 유지됨

---

1.5 스타일 문법

 

1. @media

기기별로 웹 페이지의 디자인을 다르게 보여주고 싶을 떄 사용

- 화면이 작은 모바일일떄는 글자 크기나 레이아웃을 다르게

- 화면이 큰 데스크탑에서는 더 많은 요소를 보이게 

 

2. 유동형 그리드(Flexible Grid)

px보다 %, vw, em 등의 단위를 사용해서 화면 크기에 따라 요소들이 유동적으로 크기 조절

 

3. 반응형 이미지
이미지도 %나 max-width: 100% 등을 사용해 화면 크기에 맞게 줄어들거나 커짐

---

2. Sass

CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고. 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수성을 더욱 높여줌

- 조건문, 반복문 등의 다양한 기능을 사용할 수 있음

- 두 개의 확장자 지원: .scss 확장자 / .scss 확장자

---

1. SASS vs SCSS

 

{중괄호}와 세미클론;의 유무

- Sass: 선택자의 유효범위는 "들여쓰기"로 구분

- Scss: {}로 범위 구분

SASS]

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

 

SCSS]

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

---

2. { SCSS }

 

2.1 변수

 

변수는 스타일 시트 전체에서 재사용할 정보를 저장하는 방법

- 색상, 글꼴 스택을 저장할 수 있음

- $ 기호를 사용하여 변수를 만듦

- 변수는 선언된 블록 ( { } ) 내에서만 유효범위를 가짐

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

2.2 전역변수 선언 (!global)

 

!global  플래그를 사용하면 변수와 유효범위를 전역(GLOBAL)로 설정할 수 있음

.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}

 

 

2.3 초기값 설정 (!default)

 

!default 플래그는 할당되지 않은변수의초기값을 설정함
즉, 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용함

$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}
Compiled to:

.box {
  background: red;
}

---

3. Nesting

 

Sass를 사용하면 CS 선택기를 HTML의 시각적 계층과 동일한 방식으로 중첩 가능

 

상위 선택자 참조 (Ampersand)

- 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환함

- 중첩된 속성: font-, margin- 등과 같이 동일한 네임 space를 가지는 속성들 존재

- @at-root (중첩 벗어나기): 중첩 안에서 생성하되 중첩 밖에서 사용해야 유용

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}