React숙련주차02(GlobalStyles & Sass & css reset)

🔴GlobalStyles(전역 스타일링)

🔴Sass 소개, Nesting

🔴css reset

---

📌styled components는 컴포넌트 내에서만 활용

 

GlobalStyles(전역 스타일링)

프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용하는 것으로 전역적으로(globally)’ 스타일을 지정한다고 표현한다. 그럴 때 적용하는 방법이 바로 전역 스타일링이다.

---

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


function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  /* 전역으로 뺌_GolobalStyle 
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5; */
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  /* 전역으로 뺌_GolobalStyle  
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5; */
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

▼

GlobalStyle컴포넌트로 공통적인 부분들을 따로 빼서 css모으기

// GlobalStyle.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
import './App.css';
import styled, { createGlobalStyle } from 'styled-components';
import TestPage from './component/TestPage';
import GlobalStyle from './GlobalStyle';

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${function (props) {
    return props.borderColor
  }};
  margin: 20px;
`;

// 박스의 색을 배열에 담습니다.
const boxList = ["red", "green", "blue"];


// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
// switch로 각각의 경우에 맞게 지정
const getBoxName = (boxcolor) => {
  switch (boxcolor) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
  }
};

function App() {
  return (
    // <StContainer>
    //   {
    //     boxList.map(function (boxcolor) {
    //       return <StBox borderColor={boxcolor}>{getBoxName(boxcolor)}</StBox>
    //     })
    //   }
    // </StContainer>
    <>
      <GlobalStyle></GlobalStyle>
      <TestPage title="제목입니다" contents="내용입니다" />
    </>

  )
}

export default App;

---

Sass(Syntactically Awesome Style Sheets)

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어이다.

 

CSS는 웹 프로젝트 규모가 커지면 커질수록 코드가 복잡해지고 유지보수도 불편해집니다. 계속해서 동일한 코드를 복사하고 붙여넣는 과정을 반복해야 하기 때문이다. 코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법이 바로 Sass다.(Styled-Components를 사용하기 때문에 적용하진 않을것)

 

변수를 사용

$color: #4287f5;
$borderRadius: 10rem;

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

---

중첩(Nesting)

label {
      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;

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

---

다른 style 파일을 import 할 수 있어요.

/*common.scss*/
/* colors */

$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;​

+

/* style.scss */

@import "common.scss";

.box {
	background-color: $color3;
}​

---

css reset

default style을 제거하는 방식이라고 생각하기

 

브라우저는 기본적으로 default style을 제공한다. 다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기 때문에 이를 초기화하고 우리가 정하는대로만 표현해야 된다.

 

여러방법이 있고 하나만 보자면 css 파일을 새로 만들어서 적용시키면 reset되는 방법으로,

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;
}

> 새로 reset.css든 이름이 뭐든 css 파일을 생성해서 index.js import해서 적용시키는 방법

>> import "./reset.css"

 

하면 이미 기본적으로 브라우저마다 지정된 css를 초기화 시켜줌으로써 내가 적용시킬 css를 온전하게 사용할 수 있게 되는것이다.