close
프로필 배경
프로필 로고

김안녕999

React · 2023. 11. 7. fullscreen 넓게보기

[React 숙련] 전역 스타일링 | Sass | css reset

728x90
반응형

1.전역 스타일링 (GlobalStyles)

▶ styled-components : 해당 컴포넌트 내에서만 가능!

▶ 프로젝트 전체를 아우르는 스타일 => createGlobalStyle 사용

[위치] GlobalStye.jsx

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

 

[위치] App.jsx

▶ 적용하고 싶은 곳 위에 <GlobalStyle> 사용하고 하나로 큰 <> 태그로 묶어주기

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
    const title = '전역 스타일링 제목입니다.';
    const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

 

2. Sass  

▶ Syntactically Awesome Style Sheet

▶ 코드 재사용 높이고, 가독성과 실수 줄이는 방법!

[위치] style.scss

//변수 사용 가능
$color: #4287f5;
$borderRadius: 10rem;

div {
    background: $color;
    border-radius: $borderRadius;
}

//중첩가능
label {
    padding: 3% 0px;
    width: 100%;
    cursor: pointer;
    color: $colorPoint;

    &:hover {
      color: white;
      background-color: $color;
    }
}

 

[위치] common.scss

▶ 다른 scss파일을 import해서 사용 가능

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

.box {
    background-color: $color3;
}

 

3. css reset

▶ 브라우저에 css 설정 안하면 기본적으로 default style 이 있음

(1) reset.css 파일을 생성해서 index.html파일 안에 넣으면 끝! 

 import './reset.css';

(2) <head> 태그 안 <link rel="stylesheet" href="./reset.css" /> 넣기

https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

 

반응형

'React' 카테고리의 다른 글

[React 숙련] 리액트 react-router-dom  (1) 2023.11.09
[React 숙련] 리액트 Ducks 패턴  (0) 2023.11.08
[React 숙련] Css-in-JS (styled-components) 조건부 스타일링 가능  (0) 2023.11.07
[React 입문] useState | 리액트 불변성 | 랜더링  (2) 2023.11.06
[React 입문] 컴포넌트 안에 <input>태그 함수 호출 안 되는 오류  (0) 2023.11.02
React 관련 글
더 보기

티스토리툴바