CSS 스타일링(styled, module, scss)

Inline style

가장 직관적이고 편한 CSS 인라인 스타일(inline style)을 바로 적용하는 것

style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당

CSS 속성명이 케밥 케이스(kebab case)이 아닌 CamelCase로 작성

• 장점: 직관적이고 편함
• 단점: 코드구조가 지저분해짐

css/ module

편하고 직관적으로 사용가능한 css module. css 파일 이름을 component의 파일 이름과 같이 해주고, module.css로 정의 해주면 css 적용이 된다.

장점:

1. 따로 라이브러리 설치할 필요가 없다. ⇒ webpack 에서 사용하는 css-loader
   에서 지원 ⇒ 대부분의 create-react-app 등의 프로젝트에서는 이미 기능이 설치되어 있음
2. CSS 클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙을 만들기 귀찮을 때 좋음.
3. Sass 에서도 사용가능 ⇒ .module.scss

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 32px;
  padding-left: 32px;
  gap: 26px;
  width: 1860px;
  height: 132px;

  /* white */
  background: #ffffff;
  /* shadow-down */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);

  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
.name {
  width: 1746px;
  height: 32px;

  /* title-lg */
  font-family: "Noto Sans CJK KR";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;

  /* black/80 */
  color: rgba(0, 0, 0, 0.8);

  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 1;
}

⇒ css 문법을 그대로 사용

import styles from './style/Title.module.css';

export const Title=()=>{
  return (
    <div className={styles.title}>
      <div>
        <img
        alt="vector"
        src={require('../../src/assets/Vector.png')}
        />
      </div>
      <div className={styles.name}>
        내 서재
      </div>
    </div>
  )
  
}

⇒inline 속성에 module.css 만 import 해주고, className에 적용해준다면 끝

css/ styled-component

style 파일을 컴포넌트화 시켜서 마치 class형 함수 인 것처럼 사용하는 방식이다.

• 장점: 굉장히 깔끔하다. css 명명 규칙이 명시적이라 이해가 편함.
• 단점: css클래스 명명 규칙이 중복되면 안된다. styles function을 만들기가 상당히 귀찮다.

styles 파일을 아래와 같이 import 시켜서 className에 해당 함수를 불러와서 css를 적용

import { Grid, Typography } from '@material-ui/core';
import React from 'react';
import styles from './style/styles';
const Url=()=> {
  const classes=styles();
  return (
    <Grid className={classes.section}>
      <Grid className={classes.flexBox}>
        <Grid className={classes.upper}>
          <Typography className={classes.title}>Url</Typography>
        </Grid>
      </Grid>
    </Grid>
  );
}

export default Url;

import { makeStyles } from "@material-ui/core";

const styles=makeStyles(()=>({
  section:{
    backgroundColor: 'blue',
    flex:1,
    flexDirection:'column',
    width: '100%',
  },
  flexBox: {
    display: 'flex',
    flexDirection:'column',
    alignItems: 'center',
    marginRight: '15%',
    marginLeft: '15%',
  },
  upper :{
    display: 'flex',
    flexDirection:'row',
    justifyContent:'center',
    marginTop: 55,
  },
  under : {
    display:'flex',
    flexDirection:'row',
    justifyContent: 'space-between',
    width: '100%',
    marginTop: 20,
    //marginBottom:25,
    
  },
  title: {
    fontFamily: 'NotoSansKR',
    fontSize: 50,
    fontWeight: 900,
    fontStyle: 'normal',
    letterSpacing: -0.8,
    textAlign: 'left',
    color: 'white'
  },
}))

export default styles;

css/scss

cascading styled sheet에 Sassy( 멋진이란 뜻) 를 붙인 SCSS

TMI: SASS: Syntactically Awesome 문법적으로 어썸틱한 스타일시트란 뜻

• 장점: 여러 기능이 제공된다(함수처럼 기능 사용 가능). 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용
• 단점: 기능이 많아, 컴파일 시간이 많이 소요된다. 전처리기 도구 필요

변수할당

/* SCSS */
$font-sty: Helvetica, sans-serif;
$primary-col: #3ff;

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

⇒ $문자로 css에 변수를 할당 가능하다.

중첩 구문 (이중 구문)

di {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
	li {
    padding: 0;
    margin: 1;
  }
}

⇒ 이중 구문 사용 가능

이 밖에도 상속(inheritance), 모듈화 등 마치 함수와 같은 구조로 보일 정도로 기능이 많이 추가됨