CSS / 구글 웹폰트 사용하는 방법
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다.
웹폰트 선택하기
- 웹브라우저로 Google Fonts에 접속한다.
- 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다.
- 원하는 글꼴을 클릭한다.
- 사용할 스타일을 선택한다.
- 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다.
여러 글꼴과 스타일을 선택할 수도 있다.
웹폰트 사용하기
- 예를 들어 Noto Sans Korean 100과 400을 선택했다면 아래와 같은 코드를 제공한다.
- 다음은 link를 이용하는 방법이고,
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400&display=swap" rel="stylesheet">
- 아래는 import를 이용하는 방법이다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400&display=swap');
</style>
- 글꼴 이름은 Noto Sans KR이다.
font-family: 'Noto Sans KR', sans-serif;
- 다음은 구글 웹폰트를 사용하는 간단한 예이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400&display=swap');
p { font-family: 'Noto Sans KR'; font-size: 30px; }
p.a { font-weight: 100; }
p.b { font-weight: 400; }
</style>
</head>
<body>
<p class="a">Noto Sans KR 100 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="b">Noto Sans KR 400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
</body>
</html>
IE에서 구글 웹폰트를 사용하는 방법
- IE는 2022년 6월 15일에 지원 종료되었다. Windows 11에는 IE가 없고, Windows 10에서 IE를 사용하려 하면 Edge 설치를 안내하므로, 특별한 경우가 아니면 IE는 무시해도 된다.
- IE와는 무관하게, 구글 웹폰트를 다운로드 하는 방법은 알아두면 좋다.
구글 웹폰트의 CSS 소스는 다음처럼 되어 있다. woff2 형식의 웹폰트를 사용한다.
@font-face {
font-family: 'Nanum Gothic';
font-style: normal;
font-weight: 400;
src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v9/PN_3Rfi-oW3hYwmKDpxS7F_z-7r_xFtIsPV5MbNOyrVj67GNc972x-dpix2LdhN-iTB6aWWhDX3G.0.woff2) format('woff2');
unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}
IE는 woff 형식의 글꼴을 지원하므로, IE를 지원하고 싶다면 woff 형식의 글꼴을 다운로드 받아 자신의 서버에 업로드해서 사용해야 한다.
- google webfonts helper에 접속한다.
- google webfonts helper는 구글 웹폰트를 다운로드할 수 있게 도와주는 사이트이다. woff 뿐만 아니라 eot, ttf, svg 등도 다운로드할 수 있다.
- 다운로드하려는 글꼴을 검색하고 클릭한다.
- 한국어를 나타내야 한다면 korean을 선택한다. 필요한 style도 선택한다.
- 글꼴을 다운로드 한다.
CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성
q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...
CSS / white-space / 공백 처리 방법 정하는 속성
개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...
CSS / border-radius / 테두리 둥글게 만드는 속성
border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...
CSS / display 속성으로 표 만들기 - table, table-row, table-cell
display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 설정한다. 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈이다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다. 계산 순서 왼쪽에서 오른쪽으로 계산한다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다. 괄호가 있으면 ...
배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
CSS / background-image / 배경 이미지 정하는 속성
개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...
CSS / Grid / grid-column-gap, grid-row-gap, grid-gap
그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...