생활코딩

Coding Everybody

코스 전체목록

닫기

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. kdb5869
    24.04.25
  2. 곤비
    02.16
  3. 미래도비
    0204
  4. 새콤달콤
    완료
  5. 덕자
    완료!
  6. eunso
    수강완료
  7. 다겸란
    수강완료
  8. DreamBoy
    2023.09.17. CSS - 타이포그래피 - font 파트 완료했습니다.
  9. AgainstartJH
    2022년 11월 09일 수요일 학습완료!
  10. 헤밍웨이
    감사합니다!
  11. vigorously27
    2022년 7월 19일 화요일 학습완료!
  12. yoonsueworks
    font: size family, sans-serif;
    축약
  13. INJE
    22/03/16
  14. jjy_lee2468
    22.02.10수강완료
  15. 강수빈
    22.2.4 완료
  16. 드림보이
    2021.11.10. font 파트 수강완료
  17. 이현수
    2021.09.10(금)
  18. 두드
    2021.07.21 완료
  19. jeisyoon
    2021.06.21 font - OK
  20. barozaqu
    20210518.
  21. yogg
    font-family에 뭐가 이렇게 많나 했었는데 순서대로 되는거 적용되는 것이었군요 ~
  22. Minint
    2021.03.13
  23. HyeonHui Jeong
    20210218
  24. font-family: font1, font2, "font 3", serif; //폰트 1 또는 2 또는 3을 적용하되 serif는 장식의 유무를 결정하는 것
  25. 임태경
    완료했어요 감사해요
  26. 스마일가이
    2021.01.26 완료 감사합니다
  27. datsciseol
    20210115
  28. 따뜻한츄르
    201230
  29. 몽실엄마
    12/22/2020 학습완료
  30. 201214 목소리 너무 좋아요 ^ㅅ^
  31. switpotato
    20201122: 2차학습 완료
  32. 켄드릭
    2020년 11월 03일(화) 13:48 1차 수강완료
  33. 여니여니
    201006 감사합니다
  34. 오석민
    완성
  35. 콜라
    20200926완료
  36. 김성곤
    20200718 감사합니다!
  37. jaehyunlee
    완료
  38. 한강
    font-family, font-size, font-weight, line-height, font
    감사합니다~~^^
    200528
  39. green diseny
    설명 복습해보기! 보고나서 이댓글 지우기!
  40. 무지개반사
    완료
  41. Blanc
    2020.01.05
  42. Grigo
    완료
  43. alpha
    191001 수강완료
  44. 태태
    수강완료
  45. 치디우기
    수강완료
  46. FIRE
    20190729 완료
  47. 다나가
    190722 - 수업완료!!
  48. 김주엽
    수업완료
  49. 잘될자
    190503 금요일 수강.
  50. 노혜주
    완료
버전 관리
egoing@gmail.com
현재 버전
선택 버전
graphittie 자세히 보기