11주차 마무리 - 힐링

1. 배운 것

• styled-component 전역 스타일 적용
• styled-component 구글 폰트 적용
• column-gap, row-gap

2. 내용 정리

styled-component 전역 스타일 적용

참고: https://www.daleseo.com/styled-components-global-style

// components > GlobalStyle.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

   body {
    font-family: 'Noto Sans KR', sans-serif;
   }
`;

export default GlobalStyle;

// src > App.js

**import GlobalStyle from './components/GlobalStyle';**

const App = () => {
  return (
    <>
      **<GlobalStyle />**
      <Header />
      <Nav />
    </>
  );
};

styled-component 구글 폰트 적용

• <link> : public > index.html 파일에 삽입
• font-family : GlobalStyle.js 파일 body 적용

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    * {
    margin: 0;
		padding: 0;
		box-sizing: border-box;
    }

   body {
    font-family: 'Noto Sans KR', sans-serif;
   }
`;

export default GlobalStyle;

css : column-gap, row-gap

행 방향, 열 방향 여백 지정 속성. 자세한건 grid 배울 때 다시 알아보기

• column-gap : 행 방향 여백 지정
• row-gap : 열 방향 여백 지정
• gap : 행 방향, 열 방향 여백 둘 다 지정

const StyledTitle = styled.div`
  display: flex;
  align-items: center;

  /* column-gap: 열 방향 여백, row-gap: 행 방향 여백 지정 */
  **column-gap: 10px;**
  
  > h1 {
    color: #fff;
    font-size: 28px;
  }

  > span {
    color: #00adb5;
    font-size: 12px;
  }
`;

flex 복습, 미디어쿼리 찍먹

 

더 공부할 내용

3. 리뷰

css 강의 예제를 따라 만들면서 styled-components로 스타일링하고 리액트 기능구현까지 해보는 연습을 해보았다.

여기에 storybook까지 했으면 완벽하게 컴포넌트 단위 개발과정을 복습해볼 수 있었을 텐데 주말만 되면 참 책상 앞에 앉기까지 왜 그리도 힘든지 ㅎㅎ;;

이런 연습을 섹션 2때 했어야 하는데 너무나 늦은 감이 있지만, 그래도 css만 보고 리액트로 내가 기능을 어찌저찌 짤 수 있게 된게 그래도 마냥 놀진 않았구나 느끼고 또 역시 난 이런거 하려고 프론트 하기로 했다 다시 느낀다. 역시 눈에 보여야 재밌다.