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. yoonsueworks
    font: size family, sans-serif;
    축약
  2. 22/03/16
  3. jjy_lee2468
    22.02.10수강완료
  4. 강수빈
    22.2.4 완료
  5. 드림보이
    2021.11.10. font 파트 수강완료
  6. 이현수
    2021.09.10(금)
  7. 두드
    2021.07.21 완료
  8. jeisyoon
    2021.06.21 font - OK
  9. barozaqu
    20210518.
  10. yogg
    font-family에 뭐가 이렇게 많나 했었는데 순서대로 되는거 적용되는 것이었군요 ~
  11. Minint
    2021.03.13
  12. HyeonHui Jeong
    20210218
  13. font-family: font1, font2, "font 3", serif; //폰트 1 또는 2 또는 3을 적용하되 serif는 장식의 유무를 결정하는 것
  14. 임태경
    완료했어요 감사해요
  15. 스마일가이
    2021.01.26 완료 감사합니다
  16. datsciseol
    20210115
  17. 따뜻한츄르
    201230
  18. 몽실엄마
    12/22/2020 학습완료
  19. 201214 목소리 너무 좋아요 ^ㅅ^
  20. switpotato
    20201122: 2차학습 완료
  21. 켄드릭
    2020년 11월 03일(화) 13:48 1차 수강완료
  22. 여니여니
    201006 감사합니다
  23. 오석민
    완성
  24. 콜라
    20200926완료
  25. 김성곤
    20200718 감사합니다!
  26. jaehyunlee
    완료
  27. 한강
    font-family, font-size, font-weight, line-height, font
    감사합니다~~^^
    200528
  28. green diseny
    설명 복습해보기! 보고나서 이댓글 지우기!
  29. 무지개반사
    완료
  30. Blanc
    2020.01.05
  31. Grigo
    완료
  32. alpha
    191001 수강완료
  33. 태태
    수강완료
  34. 치디우기
    수강완료
  35. FIRE
    20190729 완료
  36. 다나가
    190722 - 수업완료!!
  37. 김주엽
    수업완료
  38. 잘될자
    190503 금요일 수강.
  39. 노혜주
    완료
  40. lygon
    2019-02-23 완료
  41. 숨이
    완료햇습니당
  42. 김민영
    완료
  43. 브베
    감사합니다
    대화보기
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      점점 지식이 구체화 되는거 같아요 감사합니다!
    • 옥슬이
      본문에 오타있습니다 쉬치-수치
    • JN87
      180103 감사합니다!
    • 푸른하늘
      10일차 공부 감사합니다
    • 오빠는다르다
      감사합니다~!!
    • 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>
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기