궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

CSS font 기초 개념 정리

👉"디자이너에 의한 디자이너를 위한 실무코딩(HTML+CSS)" 📙책을 통한 공부 후 작성되었습니다.

CSS display에 이은 font 개념 시작해보자!~

우선 React에서 font를 적용할때 2가지 방법이 있는데
첫번째, <link> 를 이용해서 font를 넣어주는 방법
두번째, CSS 파일에서 font-family로 적용해주기

책에서는 HTML을 이용해서 <link> 방법을 사용했지만 나는 SCSS 파일에 적용하기로 했다.

먼저 React src에 fonts 폴더를 만들어 주었다.

우리가 사용할 폰트는 'Roboto', '나눔스퀘어', '나눔명조' 인데 Roboto는 구글폰트에서 다운로드가 가능하다

구글폰트 로보토 페이지: https://fonts.google.com/specimen/Roboto?query=Roboto

구글폰트 페이지에서 Roboto를 검색하면 위와 같이 가장앞에 나온 폰트를 찾을 수 있을것이다.

여기서 우리는 Regular400, Medium 500, Bold 700을 선택할 것이다.

나눔스퀘어와 나눔명조는 눈누폰트 사이트에서 다운 받으면 된다.
눈누폰트(나눔): https://noonnu.cc/font_page?commit=filter&search=%EB%82%98%EB%88%94&order_by=pd

사실 원하는 폰트를 선택해도 괜찮으니까 마음에 드는것 아무거나 사용하도록 하자
이렇게 해서 오른쪽 아래의 다운로드를 하면 폰트가 다운로드 되는데 해당 압축파일을 풀어주고 fonts 폴더로 옮기면 된다.

폰트사이즈를 위한 px, (vw, vh) 개념

일반적으로 폰트사이즈를 정할때 px를 많이 사용하는 편인데, 그 이유는 더 직관적이기 때문다. 하지만 반응형 웹이 생기면서 폰트사이즈가 화면 사이즈에 맞게 조정되는 웹사이트들이 증가하고 있다. 예를 들면 한줄이었던 문장이 화면이 줄어들면서 두줄이 되거나 세줄이 되거나하는 경우가 생기게 되는데 이런경우에 vw라는 단위를 사용하곤 한다. 1vw는 사용자의 모니터를 기준으로 가로 너비를 100으로 나눈 값을 의미하는데, 이처럼 모니터에 따라 값이 편하기때문에 모니터에 따라 폰트 사이즈를 정하기 좋다. 가로너비는 vw, 세로너비는 vh!
하지만 그렇다고 모든 폰트에 vw를 사용하지는 말것!

웹 페이지에 폰트 적용해보기

우선 나는 CSS에 font를 저장해놓고 다른영역에서 사용할거기때문에 App.css에 font를 적용시켜놓기로 했다.

App.scss

.App {
}

/* 나눔 명조 */
@font-face {
font-family: "Nanum Myeongjo";
font-weight: 700;
src: url("./fonts/NanumMyeongjoBold.ttf") format("truetype");
}

/* 로보토 */
@font-face {
font-family: "Roboto Regular";
font-weight: 400;
src: url("./fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
font-family: "Roboto Medium";
font-weight: 500;
src: url("./fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
font-family: "Roboto Bold";
font-weight: 700;
src: url("./fonts/Roboto-Bold.ttf") format("truetype");
}

/*나눔스퀘어*/
@font-face {
font-family: "NanumSquare";
src: url("./fonts/Roboto-Regular.ttf") format("truetype");
}

이제 css파일에 위의 코드처럼 적용시켜 주면 font-family로 적어놓은 이름으로 다른곳에서도 font적용이 가능하다.

일단 내가 적용할 문구를 간단하게 만들고
Body.js

import React from "react";
import cn from "classnames";
import "../styles/Body.scss";
import pink_salt from "../images/pink_salt.jpg";

const Body = () => {
  return (
    <div className={cn("intro_section1")}>
      <div className={cn("main_title")}>
        디자이너에 의한,
        <br /> 디자이너를 위한,
      </div>
      <div className={cn("sub_title")}>Development Education for Designer</div>
    </div>
  );
};

export default Body;

이제 내가 적용할 부분의 css파일로 가서 한번 font를 입혀보자
Body.scss

.intro_section1 {
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  color: #353535;
  font-family: "Roboto-Bold" "NanumSquare", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

ul,
li {
  margin: 0px;
  padding: 0px;
}

깔끔하게 잘 나왔다.

⭐간단 설명⭐
위에서 font-family에서 폰트를 단순히 지정하는것이 아니라 여러개를 지정할 수 있습니다.
위에나온 그대로 보면,
font-family: "Roboto-Bold" "NanumSquare", sans-serif; 이렇게 지정했을 경우 영문 폰트를 앞 순서로 지정하고 뒤에 한글 폰트로 지정하게 되면 자연스럽게 알파벳 및 숫자는 'Roboto'로 먼저 지정되고 'Roboto'는 한글을 표현할 수 없으므로 한글은 다음 순서인 'NanumSquare'로 지정하게 됩니다. 또한 font-size를 body에서 지정하면 이후 폰트 사이즈를 따로 지정하지 않아도 기본 폰트 사이즈가 20px이 됩니다.

이리하여 대충 완성된 페이지!