리액트 앱에서의 스타일링 방법

CSS import

• CSS(혹은SCSS, Sass) 파일을 import 해서 사용한다.
• 필요한 모든 CSS스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다.
• 단순히 CSS 파일만을 import 하여 사용할 수 있어 편리하다.
• 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리하는 것도 가능하다.
• CSS파일은 분리할 수 있으나, namespace를 나눌 수 없다.
• 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌워진다.

Button.JS

import'button.css'

functionButton({children}) {
  return(
    <button className="button">
        {children}
    </button>
  )
}

 

Button.CSS

.button {
  background-color: orangered;
  color: white;
  width: 140px;
  height: 40px;
}

 

APP.JS

import Button from './Button'

function App() {
  return (
    <div>
      <Button>Submit</Button>
    </div>
  )
}

 

CSS module

• 하나의 CSSmodule 파일 안에 작성한 스타일은 하나의 파일 namespace로 관리한다.
• class name 뒤에 겹치지 않는 hash를 붙인다.
• 스타일이 겹치는 상황을 해결한다.
• 두 단어 이상의 경우, class 명을 camelCase로 이름을 짓는다.

InputWithButton.JS

import styles from "./input-with-button.module.css";

export function InputWithButton() {
  return (
    <div className={styles.container}>
      <input type="text"name="text"className={styles.input}/>
      <button className={styles.button}>Submit</button>
    </div>
  );
}

 

CSS-in-JS

• 별도의 CSS파일을 만들지 않고 하나의 컴포넌트파일 안에서 스타일을 작성한다.
• 자바스크립트문법을 그대로 활용하여 코드를 작성한다.
• React 컴포넌트를 사용하는것 처럼 사용가능하다.
• Sass문법 활용이 가능하다.

import styled from "styled-components";

function InputWithButton() {
  return (
    <Container>
      <Input />
      <Button>Styled Button</Button>
    </Container>
  );
}


const Container = styled.div`
  background: rgba(0, 0, 0, 0.05);
  margin: 10px;padding: 5px;
`;

const Input = styled.input`
  border: none;
  background: white;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.8);
  height: 40px;
  `;
  
  const Button = styled.button`
    background: blue;
    color: white;
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 140px;
  `;

 

CSS  box model

• CSS layout의 기본이 되는 모델이다.
• content-box, padding-box, border-box, margin-box 순으로 하나의 element를 감싸고있다.
• box의 타입은 inline, block 두 가지이다.
• display: inline, display:inline-block, display:block으로 서로 다른 box type을 적용한다.
• width, height는 디폴트로 content-box의 크기를 정의한다.
• width: 100px 으로 정의시, content의 크기만 100px이 되며, padding, border의 크기는 100px에 추가된다.
• box-sizing: border-box로 box sizing의 방식을 변경할 수 있다.
• border-box는 padding, border를 width, height에 포함된다.
• 보통 이해하기 쉬운 레이아웃을 정의하기 위해 box-sizing: border-box를 선호한다.

 

CSS Position

• static: position의 default 값으로, element는 normal flow를 따라 위치한다.
• relative: normal flow를 따라 위치하되, 자기자신에 상대적으로 위치한다.
• absolute: normal flow에서 벗어나 가장 가까운 ancestor에 상대적으로 위치한다.
• fixed: normal flow를 벗어나 viewport에 상대적으로 위치한다.
• sticky: normal flow에 따라 위치하되, 가장 가까운 scrolling ancestor에상 대적으로 위치한다.

CSS Units

• px, pt, cm, in: 절대적인 길이를 표현하는 unit이다.
• rem, em, %:  특정값에 상대적인 길이를 표현하는 unit이다.
• vw, vh, vmin, vmax: viewport에 상대적인 길이를 표현하는 unit이다.

Sass

• Sysntactically Awesome Style Sheets.CSS Preprocessor.
• SCSS, Sass문법을 지원한다.
• 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장한다.
• styled-components는 Sass를 기본적으로 지원한다.
• &
  • &는 자기자신을 나타내는 placeholder이다.
  • 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용한다.

.reset-button {
  &.active {}
  &.disabled {}
  &:hover{}
  &:not(:first-of-type) {}
  & + & {}
  & ~ & {}
  & > button{}
}

• Sass variable
  • 믹스인, partial와 함께 Sass가 제공하는 코드관리 방법중 하나이다.
  • 색상, 사이즈등 자주 등장하는 값을 주로 변수로 사용한다.

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  &:hover{
    color: $color-white;
  }
}

• Sass nested style
  • 별도의 class를 정의할 필요 없이, 하나의 block 안에 여러 CSS를 적용할 수 있는 방법이다.
  • CSS specificity가 그대로 적용 되므로, 너무깊게 nested되면 스타일 유지보수가 힘들다.

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  &:hover{
    color: $color-white;
  }
  >button {}
}

 

• Sass mixins, import, include

@mixins font-style-1{
  font-size: 36pt;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05;
}

@import'./font-styles.scss'

.button {
  @include font-style-1;
  background: red;
}

 

CSS Flexbox Model

• HTML element를 하나의 상자로 간주하고, 그 안에서 어떻게 내부 item을 배열할 것인가를 스타일하는 모델이다.
• 1차원의 레이아웃을 디자인하는데 사용한다.
• responsive design에유리하다.
• 가운데정렬, 비율로정렬 등을 처리할 때 유리하다.

• flex container: Flexbox 아이템을 담는 컨테이너
• flex Item: 컨테이너 안에 담긴 아이템
• flex axis: flex 아이템의 방향을 결정하는 축
• CSS Flexbox properties - container
  • flex-direction: row, column 등의 방향을 결정한다.
  • justify-content: main axis에서의 정렬을 결정한다.
  • align-items: cross axis에서의 정렬을 결정한다.
  • flex-wrap: flex container가 내부 item의 width를 합친것 보다 작아질 때,어떻게 정렬할 것인지를 결정한다.
• CSS Flexbox properties - item
  • flex-grow: flex container가 커질 때 item이 얼마만큼 늘어날 것인지를 결정한다.
  • flex-shrink: flex container가 줄어들 때 item이 얼마만큼 줄어들 것인지를 결정한다.
  • flex-basis: 기준점이 되는item의 크기
  • justify-self: 한 아이템을 main-axis에 따라 어떻게 정렬할 것인지를 결정한다.
  • align-self: 한 아이템을 cross-axis에 따라 어떻게 정렬할 것인지를 결정한다.
  • order: flex container에서 item의 순서를 결정한다.

styled-components

• 자바스크립트 파일 안에스 타일을 정의하고, React 컴포넌트처럼 활용한다.
• 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있다.
• 별도의 CSS파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리하다.
• 스타일 코드와 컴포넌트 코드간의 결합을 나누고 싶을 때 유리하다.
• tagged template literal 문법을 활용한다.
• CSS 코드에 post-css, minification, Sass 적용한다.
• CSS 코드를 겹치지 않게처리한다.
• 클래스 이름 자체가 hash이다.

function Sample() {
  return(
    <Container>
      <Button>Submit</Button>
    </Container>
  );
}

const Container = styled.div`
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.3);
`;

const Button = styled.button`
  background: orangered;
  color: white;
  padding: 12px 40px;
  border: none;
`;

const Button = styled.button`
  background: ${({ clicked}) => (clicked? "orangered" : "lavender")};
  color: ${({ clicked}) => (clicked? "lavender" : "orangered")};
  padding: 12px 40px;border: none;
`;

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript