9. Styling

hey hey·2021년 12월 12일

React

리액트 배우기

목록 보기

12/26

CSS

소규모 프로젝트일 경우 CSS 스타일링으로만 해도 충분

CSS 클래스를 중복되지 않게 만드는 것이 중요하다 → CSS Selector .App a{... } : App 클래스 안의 a태그에 적용하고 싶다 .App .logo{ ... } : App 클래스 안의 logo 클래스에 스타일을 적용하고 싶다.
- 클래스 부여하기 <img className="logo"/> : class= " " 가 아닌 className을 사용해야 한다.

Sass

문법적으로 매우 멋진 스타일시트 라는 의미로 CSS 전처리기다

복잡한 작업을 쉽게 할 수 있게 한다.
스타일 코드의 재활용성, 가독성을 높인다.
.scss 와 .sass 를 지원한다. .scss 가 기존 CSS 방식과 비슷하다

$ yarn add sass ⇒ sass를 CSS로 변환시켜준다.

SassComponent.scss

$red: #fa5252;
$orange: #fd7e14;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}
.box{
&.red {
      background: $red;
      @include square(1);
 }
&:hover {
      background: black;
    }
}

$red: #fa5252; : 변수 만들기 $를 표시해야하는 듯 하다

@mixin : 믹스인 만들기 (재사용되는 스타일 블록을 함수처럼 사용 가능)

&.red {...} .red 클래스가 .box와 함께 사용되었을 때

&:hover {...} .box에 호버를 올렸을 때

utils 함수 분리하기

여러 파일에서 사용될 수 있는 변수나 믹스인은 파일을 따로 분리하여 작성하는게 편리

src/styles/utils.scss

$red: #fa5252;
$orange: #fd7e14;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

/component.js
@import "../styles/utils";
.SassComponent {... }

라이브러리 불러와서 사용하기

open-color , include-media

$ yarn add open-color include-media

open-color (색상 팔레트) 와

include-media (반응형 디자인용) 를 설치하고

utils.scss


@import "~include-media/dist/include-media";
@import "~open-color/open-color";
(...)

사용

background: $oc-gray-2;
  @include media("<768px") {
    background: $oc-gray-9;
}

$oc-gray-2;

@include media("<768px") {...} : 화면 가로크기가 768 미만이 되면 배경색을 어둡게 바꾼다.

CSS Module

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 걸 막는 기술

CSSModule.module.css

자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 사용가능(ex) CSSmodule)
전역적으로 사용되는 경우라면 :global 을 입력하면 된다.

.small {...};
.small2 {...};
:global .glo{...};

import styles from './CSSModule.module.css';
<div className={styles.small }/>
<div className='glo'/>
<div className={`${styles.small} ${styles.small2}`} />