피곤핑
코딩일탈
피곤핑
전체 방문자
오늘
어제
  • 분류 전체보기
    • Kotlin & Java
    • Spring
      • Spring Security
      • Spring
    • 네트워크
    • JavaScript & Node js
    • Docker
    • Python3
    • Unity
    • 딥러닝
    • 객체지향프로그래밍
    • Error 보고서
    • 나의 이야기 & 회고
    • HTML & CSS
    • Archive
    • 독서

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • JavaScript
  • 개발자취업
  • 코딩테스트준비
  • 오블완
  • 티스토리챌린지
  • 99클럽
  • nodejs
  • Client
  • TiL
  • 항해99

최근 댓글

hELLO · Designed By 정상우.
피곤핑

코딩일탈

[HTML, CSS] 웹 폰트 초기 세팅
HTML & CSS

[HTML, CSS] 웹 폰트 초기 세팅

2020. 8. 18. 22:42
/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
}

 

윈도우는 설정이 좀 다를 수 있음 ㅠ

윈도우와 맥의 폰트를 동일하게 해주면 padding 의 차이를 좀 줄일 수 있음!

나눔고딕을 제일 많이 씀 - Google Fonts

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

위 이미지에서 link 부분을 복사한다.

 

    <!-- CSS STYLE -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    
    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

 

아래 이미지를 복사하여 css 에도 붙여넣기 한다.

 

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
}

 

.header .header-tit h1 {background: #4aa8d4; font-size: 28px; padding:5px 20px 6px 20px; display: inline-block; margin-top: 40px; font-weight: normal; text-transform: uppercase;}

 

설정대로 바뀐 헤더 ㅎㅎㅎ 

 

 

'HTML & CSS' 카테고리의 다른 글

[HTML, CSS] overflow: hidden;  (1) 2020.08.19
[HTML, CSS] 헤더 아이콘 수정 2 (이미지 스프라이트)  (0) 2020.08.18
[HTML, CSS] 헤더 타이틀 넣기  (0) 2020.08.18
[HTML, CSS] 헤더 아이콘 수정 1  (0) 2020.08.18
[HTML, CSS] 헤더에 메뉴 넣기 (inline / block 구조 차이)  (1) 2020.08.18
    'HTML & CSS' 카테고리의 다른 글
    • [HTML, CSS] overflow: hidden;
    • [HTML, CSS] 헤더 아이콘 수정 2 (이미지 스프라이트)
    • [HTML, CSS] 헤더 타이틀 넣기
    • [HTML, CSS] 헤더 아이콘 수정 1
    피곤핑
    피곤핑

    티스토리툴바