CSS

font

font-family

font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다. 

h1{
    font-family: "Times New Roman", Times, serif;
}

위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다. 

이 때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.  

 출처 : http://matchwebdesign.com/Daily-Thoughts/why-typographically-thinking-ruins-your-site.html

font-weight

폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.  

h1{
    font-weight: bold;
}

line-height

행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 수치로는 1.2에 해당합니다. 이 쉬치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다. 

p{
    line-height: 1.3;
}

font

폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다. 

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 
 
이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다. 
h1{
    font: 15px arial, sans-serif;
}

예제 - font-famliy.html

예제의 이름은 font-family.html이지만 본 수업의 모든 속성에 대해서 다루고 있는 예제입니다. 오해마세요. ^^

<!DOCTYPE html>
<html>
  <head>
    <style>
      #type1{
        font-size:5rem;
        font-family: arial, verdana, "Helvetica Neue", serif;
        font-weight: bold;
        line-height: 2;
      }
      #type2{
        font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
      }
    </style>
  </head>
  <body>
    <p id="type1">
      Hello world<br>
      Hello world
    </p>
    <p id="type2">
      Hello world<br>
      Hello world
    </p>
  </body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 오빠는다르다
    감사합니다~!!
  2. MunBe
    <!--font-->
    <!--
    font-family

    font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다.

    1
    2
    3
    h1{
    font-family: "Times New Roman", Times, serif;
    }
    위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다.

    이 때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.

    serif (장식이 있는 폰트)
    sans-serif
    cursive (흘림체)
    fantasy
    monospace (고정폭)


    font-weight

    폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.

    1
    2
    3
    h1{
    font-weight: bold;
    }


    line-height

    행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 수치로는 1.2에 해당합니다. 이 쉬치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다.

    1
    2
    3
    p{
    line-height: 1.3;
    }


    font

    폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다.

    font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

    이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
    1
    2
    3
    h1{
    font: 15px arial, sans-serif;
    }
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #type1 {
    font-size: 5rem;
    font-family: arial, verdana, "Helvetica Neue", serif;
    font-weight: bold;
    line-height: 2;
    }

    #type2 {
    font: bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
    }
    </style>
    </head>

    <body>
    <p id="type1">
    Hello world<br> Hello world
    </p>
    <p id="type2">
    Hello world<br> Hello world
    </p>
    </body>
    </html>
  3. nevertoolate
    thank you

    Helvetica Neue 에서 Neue는 new 란 뜻 인 것 같아요. 독일어로는 그렇거든요.
  4. 손정은
    임지호님 요약정리 진짜 최고 bb 항상 잘 보고있습니다 ㅎㅎ
    대화보기
    • 14번째
      5.18.
    • php가 첫취업?
      임지호님 최고십니다..핵심내용만 콕콕 찝어주시니 ㅜㅜ
    • matheios
      강의 감사합니다~
    • 임지호
      font속성 정리
      1. font-family : 글꼴 설정(사용자 컴퓨터에 글꼴이 없는 경우 대비 여러 개를 써주는게 좋다/
      끝에 serif or sans-serif(장식 O or 장식 X)와 monospace(고정폭 or 가변폭)을 정해준다.
      2. font-weight : 굵게와 같은 것을 설정
      3. line-height : 문장 사이에 간격(px같이 절대적인 단위 사용 안하는게 좋다)
      4. font : 위에 것들과 같은 것 한 번에 쓸 수 있는 속성(대신 순서 지키는 것이 좋다)
    • Hyejin Oh
      6분 24초 line-height 설명에서 '자간'이라고 말씀하시는데 라인하이트는 행간(줄간격)입니다.
      자간(글자간격)은 letter-spacing이 맞습니다^^
      https://developer.mozilla.org......ing
    • 숨니
      이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
      -> 'font-size와' 중복되었네요~
    • 신병국
      font-family!
    • 김종엽
      2016.08.25 완료!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기