CSS / font-family / 글꼴 정하는 속성

개요

font-family는 글꼴을 설정하는 속성입니다.

기본값 : 웹브라우저의 기본 글꼴
상속 : Yes
애니메이션 : No
버전 : CSS Level 1

문법

font-family: font | initial | inherit

font : family-name 또는 generic-family
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속받음

font

family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

generic-family는 글꼴 유형입니다.

serif : 삐침 있는 명조계열의 글꼴
sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
monospace : 글자 폭과 간격이 일정한 글꼴
cursive : 손으로 쓴 것 같은 필기계열의 글꼴
fantasy : 화려한 글꼴

여러 개의 글꼴 설정

글꼴을 여러 개 설정할 때는 쉼표로 구분합니다. 예를 들어

font-family: Georgia, "Times New Roman", serif;

로 설정했을 때, 제일 먼저 Georgia 글꼴을 찾습니다. 해당 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 사용합니다. 그 글꼴도 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용합니다.

글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용합니다. 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마직막은 generic-family로 정해두는 것이 좋습니다.

영어와 한글 글꼴을 다르게 하기

글꼴을 여러 개 설정했을 때, 첫번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용합니다. 따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현됩니다. 예를 들어 다음과 같이 하면

font-family: Georgia, "Malgun Gothic", serif;

한글은 맑은 고딕, 나머지는 Georgia로 표현됩니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a { font-family: Georgia, serif; }
      .b { font-family: serif; }
      .c { font-family: sans-serif; }
      .d { font-family: monospace; }
      .e { font-family: cursive; }
      .f { font-family: fantasy; }
      .g { font-family: Georgia, "맑은 고딕", serif; }
    </style>
  </head>
  <body>
    <p class="a">font-family: Geogia;</p>
    <p class="b">font-family: serif;</p>
    <p class="c">font-family: sans-serif;</p>
    <p class="d">font-family: monospace;</p>
    <p class="e">font-family: cursive;</p>
    <p class="f">font-family: fantasy;</p>
    <p class="g">한글은 맑은 고딕, 나머지는 Georgia</p>
  </body>
</html>

브라우저 지원

Chrome : 1.0+
Firefox : 1.0+
Internet Explorer : 4.0+
Opera : 3.5+
Safari : 1.0+

CSS

CSS / 글자 꾸미기

CSS / 선택자(Selector) / 전체 선택자, 타입 선택자, 속성 선택자

전체 선택자 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 * { color: blue; } 는 모든 요소의 색을 파란색으로 만듭니다. 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, *.abc { color: blue; } .abc { color: blue; } 는 같은 결과를 만듭니다. 타입 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 ...

CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

@keyframes @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다. IE는 버전 10 이상에서 사용할 수 있습니다. 문법 @keyframes name { 0% { ... } n% { ... } 100% { ... } } name : 애니메이션의 이름을 정합니다. 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 ...

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / 선택자(Selector) / 가상 요소

가상 요소 가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다. 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다. ::first-line ::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어 p::first-line { color: red; } 는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다. ::first-letter ::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어 p::first-letter { ...

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

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에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 여러 가지 방법이 있는데, 그 중 세 가지를 소개해드립니다. 방법 1 – padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

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 속성의 ...

CODING FACTORY