GlobalStyle, sass, css초기화

GlobalStyle

GlobalStyle은 전역스타일링으로 코드 전체에 공통된css를 적용할 때 쓰인다. 

적용 방식은 편하게 파일(컴포넌트)을 새로 생성해준 후 

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

컴포넌트와 비슷하지만 ``사이에 body태그 넣고 {} css를 객체안에 적어준다. 

import 해와서 JSX상단에 넣어주면 된다.

import { createGlobalStyle } from "styled-components";
export default GlobalStyle;
import GlobalStyle from './GlobalStyle/GlobalStyle';

이것을 까먹으면 안된다!

Sass

sass는 코드의 재사용성을 높이고, 가독성 또한 향상시킬 수 있는 방법입니다. 

사용법은 변수를 사용해서 하는 것이 있는데 

$color: #4287f5;  //변수로 색 지정
$borderRadius: 10rem;

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

이런 식으로 사용이 가능하고  본래라면  css에서 hover되었을 때의 css를 주려면  따로 빼서 태그 {} 태그:hover{}를 해줬어야하는데 sass에서는 중첩되어 한 객체안에서 해결할 수 있다는 점이 있다.

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

      &:hover {   //중첩해서 사용
        color: white;
        background-color: $color;
      }
}

css초기화

우리가 사용하는 태그 중에 기본적으로 default css를 가지고 있는 태그들이 있는데 h1태그 같은 경우 굵기가 굵어지고 사이즈도 커지는 것처럼말이다. 

<div>
      <h1>h1태그입니다.</h1>
      <h2>h2태그입니다</h2>
      <span>span태그입니다</span>
      <p>p태그입니다</p>
    </div>

이렇게 작성하면 

이렇게 css가 알아서 적용이 되어 나오는데  브라우저 마다 default style이 차이가 있기때문에 우리가 정해놓은 css로 적용하려면 초기화를 해야하는 것이다. css를 초기화하는 방법은 여러가지 가 잇지만 나는 강의에서 알려준 방식으로 적어볼테다.

 

 

 

 

cssreset 코드 보기

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 파일을 새로 만들어 적어준뒤 import해온다.

이렇게 각자의 default style이 사라진 것을 확인할 수 있다.