All Articles

[20190826 TIL]


오늘의 TIL


CSS Module

CSS Module은 CSS를 모듈화하여 사용하는 방식입니다. CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한합니다. 모듈화된 CSS를 webpack으로 불러오면 다음과 같이 사용자가 정의한 클래스네임과 고유화된 클래스네임으로 구성된 객체를 반환합니다.

{
  box: 'src-App__box--mjrNr'
}

그리고 클래스를 적용할 때는 className = {styles.box} 방식으로 사용한다.


CSS Module 활성화

CSS를 불러오는 과정에서 총 세 가지 로더를 사용합니다.

  • style-loader - 스타일을 불러와 웹페이지에서 활성화하는 역할

  • css-loader - css 파일에서 import와 url문을 webpack의 require 기능으로 처리하는 역할

  • postcss-loader - 모든 웹 브라우저에서 입력한 CSS 구문이 제대로 작동할 수 있도록 자동으로 -webkit, -mos, -ms 등 접두사를 붙여준다


클래스가 여러 개일 때

src/App.CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.blue {
  background: blue;
}

[ 첫 번째 방법 ]

src/App.js

import React, { Component } from 'react';
import styles from "./App.css";

class App extends Component {
  render() {
    return(
      <div className={[styles.box, styles.blue].join(' ')}>
      </div>
    );
  }
}

export default App;

[두 번째 방법 - classNames]

import React, { Component } from 'react';
import classNames from 'classnames';
import styles from './App.css';

class App extends Component {
  render() {
    return (
      <div className={classNames(styles.box, styles.blue)}>
      </div>
    );
  }
}

export default App;

[세 번째 방법 - classNames/bind]

import React, { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './App.css';

const cx = classNames.bind(styles);

class App extends Component {
  render() {
    return (
      <div className={cx('box', 'blue')}>
      </div>
    );
  }
}

export default App;

CSS 코드는 수월하게 작성할 수 있지만, 프로젝트를 진행하다 보면 코드가 복잡해져 가독성이 쉽게 떨어질 수 있다. 이런 CSS 결함은 SaaS, LESS, Stylus 등 CSS 전처리기 도구를 사용하여 해결할 수 있습니다.



Sass

Sass는 Syntactically awesome style sheets의 약어로, 문법적으로 매우 멋진 스타일시트를 의미합니다. Sass로는 CSS에서 사용할 수 있는 문법을 확장하여 중복되는 코드를 줄여 더욱 보기 좋게 작성할 수 있습니다. SaaS에 익숙하지 않다면 https://sass-guidelin.es/ko/ 를 참고하세요.


Sass 사용

  1. 두 가지 패키지 설치

  2. node-sass - Sass로 작성된 코드들을 CSS로 변환하는 역할

  3. sass-loader - webpack에서 Sass파일을 읽어 오는 역할


  1. 현재 선택자 참조
.box:hover {
  background: red;
}

.box:active {
  background: yellow;
}

같은 내용을 Sass의 현재 선택자 참조 기능으로 작성할 수 있습니다.

.box {
  &:hover {
    background: red;
  }
  &:active {
    background: yellow;
  }
}

이런 식으로 감싸인 구조로 CSS를 작성할 수 있기 때문에 가독성이 훨씬 높습니다.


  1. 변수 사용
$size: 100px;

.box {
  display: inline-block;
  width: $size;
  height: $size;
}

  1. 믹스인 사용
$size: 100px;

@mixin place-at-center() {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: inline-block;
  width: $size;
  height: $size;

  @include place-at-center();
}

복잡한 상대 경로를 작성하는 것을 피하기 위해 webpack에서 sass-loader를 설정할 때는 includePaths를 설정해서 경로를 간소화할 수 있습니다. 이를 설정하려면 config/paths.js 파일에 style 경로를 넣어 주어야합니다.

config.paths.js

module.exports = {
  (...),
  styles: resolveApp('src/styles')
};
config/webpack.config.dev.js, webpack.config.prod.js

{
  loader: require.resolve('sass-loader'),
  options: {
    includePaths: [paths.styles]
  }
}

설정을 마신 후에, webpack 개발 서버를 재시작해 보세요.

@import 'utils';

(...)

@import ’../../../styles/utils’ 상대 경로 대신, 위처럼 파일을 불러와 사용할 수 있습니다.


Sass 라이브러리

Sass 장점 중 하나는 스타일 관련 라이브러리를 쉽게 불러와 사용할 수 있다는 것입니다.

  • include-media 믹스인 라이브러리 - 반응형 디자인을 도와줌

  • open-color 변수 세트 라이브러리 - 색상 선택 도와줌 ($oc-색상 이름-명암, https://yeun.github.io/open-color)


src/styles/utils.Using_CSS_transitions

@import '~open-color/open-color';
@import '~include-media/dist/include-media';

$breakpoints: (
  small: 376px;
  medium: 768px;
  large: 1024px;
  huge: 1200px;
);

$size: 100px;

@mixin place-at-center() {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

npm 또는 yarn으로 설치한 패키지 내부에 있는 파일을 불러올 때는 ~ 문자를 사용해서 node_modules에 접근할 수 있습니다.

그리고 $breakpoints 변수는 추후 반응형 디자인을 위한 코드를 작성할 때 기준점으로 사용합니다.



styled-components

자바스크립트 파일 안에 스타일을 선언하는 방식. (CSS in JS) 관련된 라이브러리 종류는 https://gituhb.com/MicheleBertoli/css-in-js 에서 확인할 수 있습니다.

그 중 개발자에게 가장 많은 사랑을 받는 styled-components를 알아보겠습니다.


Sass 사용

  1. 패키지 설치

  2. yarn add styled-components

  3. 파일 생성

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

const Wrapper = styled.div`
  border: 1px solid black;
  display: inline-block;
  padding: 1rem;
  border-radius: 3px;
  &:hover {
    background: black;
    color: white;
  }
`;

const StyledButton = ({children, ...rest}) => {
  return (
    <Wrapper {...rest}>
      {children}
    </Wrapper>
  );
};

export default StyledButton;

styled-components는 자바스크립트와 CSS 사이의 벽을 허물어 주기 때문에 동적 스타일링이 무척 편리하다는 장점과 한 파일에서 스타일과 자바스크립트 코드를 모두 관리할 수 있다는 장점이 있습니다. 하지만 기존 CSS 파일을 사용한 스타일링과 사뭇 다른 흐름으로 관리한다는 단점 때문에, 협업할 때 HTML/CSS를 작성하는 디자이너가 따로 있다면 일일이 포팅해야 하기에 조금 힘들 수도 있습니다.

더 자세한 내용은 https://www.styled-components.com/ 을 참고하세요.

Published 26 Aug 2019

KingsoKingso
각자의 방식대로