숙련주차, GlobalStyles, Sass

숙련주차, GlobalStyles, Sass

---

GlobalStyles(전역 스타일링)

프로젝트 전체를 아우르는 스타일!

cf. styled-components :  해당 컴포넌트 내에서만!

 

App.jsx

import './App.css';
import styled from "styled-components";
import TestPage from './components/TestPage';

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

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
  background-color: ${(props) => props.backgroundColor};
`;

// 박스의 색
const boxList = ['red', 'blue', 'green', ];

// 색을 넣으면 이름을 반환
const getBoxName = (color) => {
  switch(color) {
    case 'red':
      return '빨간박스';
    case 'green':
      return '초록박스';
    case 'blue':
      return '파란박스';
    default:
      return '검정박스';
  }
};

function App() {
  return (
    <TestPage
      title="제목입니다."
      contents="내용입니다."
    />
  );
}

// props : 부모 컴 → 자식 컴

export default App;

 

./components/TestPage.jsx

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

---

 

App.jsx

...

import GlobalStyle from './GlobalStyle';

...

function App() {
  return (
    <>
      <GlobalStyle/>
		...
    </>
  );
}

// props : 부모 컴 → 자식 컴

export default App;

 

./components/TestPage.jsx

    /* font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5; */

 

./GlobalStyle.jsx

import { createGlobalStyle } from "styled-components";


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

export default GlobalStyle;

 

---

Sass

Syntactically Awesome Style Sheets

코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법

 

---

css reset

default style을 제거하는 방식

 

App.jsx

import React from 'react'

function App() {
  return (
    <div>
      <span>Default Style 테스트</span>
      <h1>이건 h1 태그입니다.</h1>
      <p>나는 피태그입니다.</p>
    </div>
  )
}

export default App

---

./reset.css

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

 

App.jsx

import React from 'react';
import './reset.css';

function App() {
  return (
    <div>
      <span>Default Style 테스트</span>
      <h1>이건 h1 태그입니다.</h1>
      <p>나는 피태그입니다.</p>
    </div>
  )
}

// default style 제거

export default App