CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다.

글꼴 선택하고 코드 얻기

구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다.

+ 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다.

아래에 있는 검은 색 바를 클릭합니다.

구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 CUSTOMIZE를 클릭합니다.

필요한 스타일을 체크합니다.

일단 다 체크를 했습니다.

이제 코드를 복사합니다. STANDARD와 @IMPORT 중 고를 수 있습니다.

사용하기

다음은 위에서 선택한 나눔 고딕을 사용한 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean" rel="stylesheet">
    <style>
      p {
        font-family: "Nanum Gothic", sans-serif;
        font-size: 23px;
      }
      p.a {
        font-weight: 400;
      }
      p.b {
        font-weight: 700;
      }
      p.c {
        font-weight: 800;
      }
      p.d {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
    <p class="d">bold : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
  </body>
</html>

TIP

구글 웹폰트에서 제공하는 웹폰트는 WOFF2 형식으로 IE는 지원하지 않습니다. 만약 IE를 지원하려면 다운로드하여 사용합니다. CSS / TIP / 인터넷 익스플로러(IE)에서 구글 웹폰트 사용하는 방법
본고딕, 제주 고딕 등 몇 가지 한글 글꼴은 Early Access에 있습니다. Korean으로 검색해보세요.

CSS

CSS / 글자 꾸미기 웹폰트

CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성

animation-direction animation-direction은 애니메이션의 진행 방향 정하는 속성입니다. 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다. 문법 animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit normal : 기본값입니다. 정해진 순서로 진행합니다. reverse : 반대 순서로 진행합니다. alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다. alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다. initial : ...

CSS / 배경색만 투명하게 만들기

배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...

CSS / line-height / 줄 높이 정하는 속성

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬입니다. right : 오른쪽 정렬입니다. center : 가운데 정렬입니다. justify : 양쪽 정렬입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 맞추기 ...

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값입니다. 표의 위에 캡션을 위치시킵니다. bottom : 표의 아래에 캡션을 위치시킵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

transition-delay transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다. 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다. 두 번째 박스는 1초 대기 후 커집니다. ...

CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

transition-duration transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 커집니다. 첫 번째 박스는 다 커지는데 1초가 걸립니다. 두 번째 박스는 다 커지는데 0.4초가 걸립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: Consolas, monospace; } .jb { box-sizing: ...

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...

CODING FACTORY