CSS Styling & Styled-Components

G_NooN·2024년 1월 29일
CSSReact
0

React

목록 보기
7/14

CSS Reset

각 브라우저(Chrome, Safari, Firefox, Edge 등)는 자체적으로 default style이 존재함.
따라서, 브라우저 간 CSS를 통일시키기 위해 일반적으로 default style을 초기화시킨 뒤 CSS 작업을 수행함

  • 대표적인 수행 방법 : Reset CSS 사용

    • reset.css
    /* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
    • index.html
    <html>
  <head>
    <!-- 생략 -->
    <link rel="stylesheet" href="./reset.css" />
  </head>
  <body>
    <!-- 생략 -->
  </body>
</html>

SASS & SCSS

CSS를 더욱 효율적인 방식으로 표기하는 스타일시트 형태

  • 종류

    • SASS (Syntactically Awesome Style Sheets) : 중괄호{}와 쉼표(,)가 존재하지 않음
    • SCSS (Sassy CSS) : 중괄호{}가 존재함 (기존 CSS와 유사)

  • 특징

    • 변수를 사용할 수 있음 ($ 을 사용함)

      /* CSS */
body {
  background-color: #4287f5;
  border: 1px solid red;
}

/* SASS */
$color: #4287f5
$redBorder: 1px solid black

body
  background-color: $color
  redBorder: $redBorder

/* SCSS */
$color: #4287f5;
$redBorder: 1px solid black;

body {
  background-color: $color;
  redBorder: $redBorder;
}

    • CSS를 중첩적으로 사용할 수 있음(Nesting)

      /* CSS */
button {
  width: 100px;
  color: green;
  cursor: pointer;
}

button:hover {
  color: white;
  transform: scale(1.05);
}

/* SASS */
button
  width: 100px
  color: green
  cursor: pointer
  
  &:hover
    color: white
    transform: scale(1.05)

/* SCSS */
button {
  width: 100px;
  color: green;
  cursor: pointer;
  
  &:hover {
    color: white;
    transform: scale(1.05);
  }
}

    • 따른 style 파일을 import할 수 있음

      /* common.scss */
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;

/* style.scss */
@import "common.scss";

button {
  background-color: $color4;
}

CSS-in-JS

JavaScript 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

  • 장점
    • CSS 코드 내부에 JavaScript 코드를 입력할 수 있다.
    • CSS를 CSS 파일이 아닌 컴포넌트 단위로 관리하기 때문에 모듈화가 수월해진다.

Styled Component

대표적인 CSS-in-JS 패키지

주요 API

  1. styled
  • CSS를 입힐 HTML 태그를 컴포넌트로 선언하고 배치함
  /*
    [형태]
    const 컴포넌트이름 = styled.HTML태그`
      CSS 속성
    `;
  */

  import styled from "styled-components";  

  const StyledDiv = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid red;
  `;

  function App() {
    return (
      <>
        <StyledDiv />
      </>
    );
  }
  • 템플릿 리터럴(${})과 JavaScript 함수를 사용하여 조건부 스타일링을 수행할 수 있음

    조건부 스타일링
    : 조건에 따라 다른 스타일을 가지는 방식

  import styled from "styled-components";

  const StyledButton = styled.button`
    background-color: 1px solid ${(props) => props.bgColor};
  `;

  function App() {
    return (
      <>
        <StyledButton bgColor="red">Red Box</StyledButton>
        <StyledButton bgColor="blue">Blue Box</StyledButton>
      </>
    );
  }
  • switch문과 map 메서드를 사용하여 반복되는 조건부 스타일링 코드를 간소화시킬 수 있음
  import styled from "styled-components";

  const StyledButton = styled.button`
    background-color: 1px solid ${(props) => props.bgColor};
  `;

  // 컴포넌트의 공통된 속성을 배열 형태로 선언
  const bgColors = ["red", "blue"];

  // switch문을 사용하여 배열의 각 요소에 따른 내부 출력 항목을 선언
  const getBoxName = (color) => {
    switch(color) {
      case "red":
        return "Red Box";
      case "blue":
        return "Blue Box";
      default:
        return "No Color Box";
    }
  };

  function App() {
    return (
      <>
        // map 메서드를 사용하여 반복되는 컴포넌트를 출력함
        {bgColors.map((bgColor) => {
          <StyledButton bgColor={bgColor}>{getBoxName(bgColor)}</StyledButton>
        })}
      </>
    );
  }
  1. createGlobalStyle
  • 전체 프로그램에 공통적으로 적용되는 CSS를 컴포넌트 형태로 지정할 수 있음(전역 스타일링)
  // GlobalStyle.jsx : 공통적으로 적용되는 Styled 컴포넌트를 모아둠
 
  import { createGlobalStyle } from "styled-components";

  const GlobalStyle = createGlobalStyle`
    body {
      font-family: "Arial";
      margin: 0;
    }
  `;

  export default GlobalStyle;

  // App.jsx : GlobalStyle 컴포넌트를 가장 상위에 선언
  import GlobalStyle from "./GlobalStyle";
  import MainPage from "./MainPage";

  function App() {
    return (
      <>
        <GlobalStyle />
        <MainPage />
      </>
    )
  }
profile
G_NooN
쥐눈(Jin Hoon)
이전 포스트

컴포넌트 관리

다음 포스트

컴포넌트의 생명 주기(Life Cycle)

0개의 댓글