생활코딩

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. jaehyunlee
    완료
  2. 한강
    font-family, font-size, font-weight, line-height, font
    감사합니다~~^^
    200528
  3. green diseny
    설명 복습해보기! 보고나서 이댓글 지우기!
  4. 무지개반사
    완료
  5. 2020.01.05
  6. 완료
  7. 191001 수강완료
  8. 태태
    수강완료
  9. 치디우기
    수강완료
  10. 20190729 완료
  11. 다나가
    190722 - 수업완료!!
  12. 김주엽
    수업완료
  13. 잘될자
    190503 금요일 수강.
  14. 노혜주
    완료
  15. lygon
    2019-02-23 완료
  16. 숨이
    완료햇습니당
  17. 김민영
    완료
  18. 브베
    감사합니다
    대화보기
    • 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>
    • nevertoolate
      thank you

      Helvetica Neue 에서 Neue는 new 란 뜻 인 것 같아요. 독일어로는 그렇거든요.
    • 손정은
      임지호님 요약정리 진짜 최고 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 자세히 보기