[실전 프로젝트] CSS 작업 + 폰트 적용

오늘 한 일

1) 첫 로그인 시 알림 설정 팝업창 CSS 구현

2) 로그인 유도 팝업창 CSS 구현

3) 로그인 / 회원가입 CSS 구현

4) 드롭다운 기능 수정

5) 구글 폰트에서 폰트 검색 및 import 해오기

// src/static/styles/GlobarStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');

@font-face {
  font-family: 'Roboto', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap')
    format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0041-005A, U+0061-007A;
}

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap')
    format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-U+D7A3;
}

  * {
    margin: 0;
    padding: 0;  
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
  }

  body {
    box-sizing: border-box;
  }
`;

export default GlobalStyle;

Noto Sans KR (한글)

https://fonts.google.com/noto/specimen/Noto+Sans+KR?subset=korean&preview.text=noto%20sans%20kr&preview.text_type=custom&preview.size=34 

Google Fonts

Roboto (영어, 숫자)

https://fonts.google.com/specimen/Roboto?query=RO 

Google Fonts

https://jjeong.tistory.com/696

유니코드(UTF-8) 한글 코드표, 한글코드 범위 {AC00-D7AF}

 https://feel5ny.github.io/2019/09/08/CSS_02/

한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode)