8. font 관련 속성들 -바닥부터 시작하는 CSS-

이전 다음 2024.5
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

2017. 1. 7. 03:58 from COMPUTER/CSS

font family - font의 특정 이름을 말함.(예: "Times New Roman", "Arial" 등)

generic family : font의 유형에 따라 분류한 것으로 serif(명조계열), sans-serif(고딕계열), monospace(고정 폭을 가진 폰트), fantasy(꾸밈계열), cursive(필기체 계열) 등의 다섯 종류가 있다.

1. font-family 속성

wep page에 사용될 font를 지정한다.

여러 개의 font 지정이 가능하며 앞에 있는 것이 우선 지정됨.

없으면 차례로 다음 font 확인하여 적용됨.

맨 뒤에는 generic family를 지정하여 앞서 지정한 font들이 사용자 컴퓨터 시스템에 없을 경우에는 유사 계열의 font로

대체되게 한다.

font명에 공백이 있으면 반드시 따옴표 사용.

각 font 명칭은 콤마로 분류한다.

예 8-1

<html>
  <head>
    <style>
      p.serif {
        font-family: "Times New Roman", Times, serif;
      }
      p.sansserif {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>CSS font-family</h1>
    <p class="serif">Times New Roman font: The snow glows white on the mountain tonight</p>
    <p class="sansserif">Arial font: The snow glows white on the mountain tonight</p>
  </body>
</html>

<html>
  <head>
    <style>
      p.serif {
        font-family: "Times New Roman", Times, serif;
      }

      p.sansserif {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>

    <h1>CSS font-family</h1>
    <p class="serif">Times New Roman font: The snow glows white on the mountain tonight</p>
    <p class="sansserif">Arial font: The snow glows white on the mountain tonight</p>

  </body>
</html>

2. font-style 속성

주로 이탤릭체로 바꿀 때 사용됨.

속성 값: normal, italic, oblique(이탤릭과 거의 같음)

예 8-2

<html>
  <head>
    <style>
      p.normal {
        font-style: normal;
      }
      p.italic {
        font-style: italic;
      }
      p.oblique {
        font-style: oblique;
      }
    </style>
  </head>
  <body>
    <p class="normal">normal style: Life is venture or nothing</p>
    <p class="italic">italic style: Life is venture or nothing</p>
    <p class="oblique">oblique style: Life is venture or nothing</p>
  </body>
</html>

<html>
  <head>
    <style>
      p.normal {
        font-style: normal;
      }

      p.italic {
        font-style: italic;
      }

      p.oblique {
        font-style: oblique;
      }
    </style>
  </head>
  <body>

    <p class="normal">normal style: Life is venture or nothing</p>
    <p class="italic">italic style: Life is venture or nothing</p>
    <p class="oblique">oblique style: Life is venture or nothing</p>

  </body>
</html>

3. font-size 속성

글자의 크기를 절대 값 또는 상대 값으로 지정.

기본 값은 16px=1em.

예 8-3

<html>
  <head>
    <style>
      h1 {
        font-size: 40px;
      }
      h2 {
        font-size: 30px;
      }
      p {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h1>heading 1: Whatever you do, make it pay.
    </h1>
    <h2>heading 2: Whatever you do, make it pay.
    </h2>
    <p>paragraph1: Do not count the eggs beore they hatch.</p>
    <p>paragraph2: Do not count the eggs beore they hatch.</p>
  </body>
</html>

<html>
  <head>
    <style>
      h1 {
        font-size: 40px;
      }

      h2 {
        font-size: 30px;
      }

      p {
        font-size: 14px;
      }
    </style>
  </head>
  <body>

    <h1>heading 1: Whatever you do, make it pay.
    </h1>
    <h2>heading 2: Whatever you do, make it pay.
    </h2>
    <p>paragraph1: Do not count the eggs beore they hatch.</p>
    <p>paragraph2: Do not count the eggs beore they hatch.</p>

  </body>
</html>

See the Pen CSS 8-3 by byungchoo (@byungchoo) on CodePen.

Tip: px를 사용하면 브라우저의 page를 zoom시킬 때 글자도 커진다.

em을 사용하면 브라우저 메뉴 중 resize text를 사용해 크기조절이 가능.

예 8-4

<html>
  <head>
    <style>
      h1 {
        font-size: 2.5em;
        /* 40px/16=2.5em */
      }
      h2 {
        font-size: 1.875em;
        /* 30px/16=1.875em */
      }
      p {
        font-size: 0.875em;
        /* 14px/16=0.875em */
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Specifying the font-size in em allows all major browsers to resize the text.
      Unfortunately, there is still a problem with older versions of IE. When resizing
      the text, it becomes larger/smaller than it should.</p>
  </body>
</html>

<html>
  <head>
    <style>
      h1 {
        font-size: 2.5em;
        /* 40px/16=2.5em */
      }

      h2 {
        font-size: 1.875em;
        /* 30px/16=1.875em */
      }

      p {
        font-size: 0.875em;
        /* 14px/16=0.875em */
      }
    </style>
  </head>
  <body>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Specifying the font-size in em allows all major browsers to resize the text.
      Unfortunately, there is still a problem with older versions of IE. When resizing
      the text, it becomes larger/smaller than it should.</p>

  </body>
</html>

<body> 태그에 font-size를 %를 지정하고 다른 부분에 em을 사용함으로 구 버전 IE에서 발생하는 문제를 해결할 수 있다.

예 8-5

<html>
  <head>
    <style>
      body {
        font-size: 100%;
      }
      h1 {
        font-size: 2.5em;
      }
      h2 {
        font-size: 1.875em;
      }
      p {
        font-size: 0.875em;
      }
    </style>
  </head>
  <body>
    <h1>heading 1: Pain past is pleasure.</h1>
    <h2>heading 2: Pain past is pleasure.</h2>
    <p>This is a paragraph: Step by step goes a long way.</p>
    <p>Specifying the font-size in percent and em displays the same size in all
      major browsers, and allows all browsers to resize the text!</p>
  </body>
</html>

<html>
  <head>
    <style>
      body {
        font-size: 100%;
      }

      h1 {
        font-size: 2.5em;
      }

      h2 {
        font-size: 1.875em;
      }

      p {
        font-size: 0.875em;
      }
    </style>
  </head>
  <body>

    <h1>heading 1: Pain past is pleasure.</h1>
    <h2>heading 2: Pain past is pleasure.</h2>
    <p>This is a paragraph: Step by step goes a long way.</p>
    <p>Specifying the font-size in percent and em displays the same size in all
      major browsers, and allows all browsers to resize the text!</p>

  </body>
</html>

이렇게 하면 모든 브라우저에서 같은 크기의 글자를 출력할 수 있고 zoom과 resize 도 가능하다.

4. font-weight 속성

font의 두께를 지정한다.

normal, bolder, bold( <b> 태그와 동일), lighter

숫자를 이용한 경우 : 100(가장 가늘게)~400(normal)~900(가장 굵게)

예 8-6

<html>
  <head>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.light {
        font-weight: lighter;
      }
      p.thick {
        font-weight: bold;
      }
      p.thicker {
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <p class="normal">Rome was not built in a day.</p>
    <p class="light">Rome was not built in a day.</p>
    <p class="thick">Rome was not built in a day.</p>
    <p class="thicker">Rome was not built in a day.</p>
  </body>
</html>

<html>
  <head>
    <style>
      p.normal {
        font-weight: normal;
      }

      p.light {
        font-weight: lighter;
      }

      p.thick {
        font-weight: bold;
      }

      p.thicker {
        font-weight: 900;
      }
    </style>
  </head>
  <body>

    <p class="normal">Rome was not built in a day.</p>
    <p class="light">Rome was not built in a day.</p>
    <p class="thick">Rome was not built in a day.</p>
    <p class="thicker">Rome was not built in a day.</p>

  </body>
</html>

5. font-variant 속성

normal, small-caps(영문 소문자를 작은 대문자로 바꿈)

예 8-7

<html>
  <head>
    <style>
      p.normal {
        font-variant: normal;
      }
      p.small {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <p class="normal">Little by Little Does the Trick.</p>
    <p class="small">Little by Little Does the Trick.</p>
  </body>
</html>

<html>
  <head>
    <style>
      p.normal {
        font-variant: normal;
      }

      p.small {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>

    <p class="normal">Little by Little Does the Trick.</p>
    <p class="small">Little by Little Does the Trick.</p>

  </body>
</html>

저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

10. table 관련 속성 -바닥부터 시작하는 CSS- (0)	2017.01.09
9. 중앙 정렬 -바닥부터 시작하는 CSS- (0)	2017.01.07
7. text에 관련된 속성들 -바닥부터 시작하는 CSS- (0)	2017.01.05
6. margin, padding, border 속성 -바닥부터 시작하는 CSS- (0)	2016.12.30
5. position 속성 -바닥부터 시작하는 CSS- (0)	2016.12.24

Posted by star story :

나라 공부방 RSS FEED

달력

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

8. font 관련 속성들 -바닥부터 시작하는 CSS-

'COMPUTER > CSS' 카테고리의 다른 글

티스토리툴바

티스토리툴바