꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 07 텍스트를 표현하는 다양한 스타일(1) 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 07 텍스트를 표현하는 다양한 스타일(1)

꿈소년 2026. 1. 15. 22:57
반응형

DAY 9

🔖 오늘 읽은 범위 :

🔥01/15(목) 진도표 알림
👉🏻공부 내용: 07 텍스트를 표현하는 다양한 스타일(1)
👉🏻쪽수: 195~211쪽

텍스트를 표현하는 다양한 스타일

글꼴 관련 스타일

텍스트 스타일

  • 글자의 모양새를 지정하는 글꼴 스타일
  • 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일

font 로 시작하는 속성 ⇒ 글꼴과 관련이 있음.

글꼴을 지정한다 = font-family

/* 기본형 */
font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
  • 웹 문서에서 사용하는 글꼴 지정.
  • <body>, <p>, <hn> 태그 처럼 텍스트를 사용하는 요소에서 주로 사용.
body { font-family: "맑은 고딕", 돋움, 굴림 }
/* "맑은 고딕" 처럼 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶어야 함. */
  • 이 속성은 <body> 태그 스타일에 한번 정의하면 문서 전체에 적용됨.
  • 문서 안의 모든 자식 요소에 동일 글꼴로 계속 사용함.

글자 크기 지정한다 = font-size

/* 기본형 */
font-size: <절대 크기> | <상태 크기>

  • 절대 크기로 글자 크기 지정하기

      <style>
      h1 {
          font-size: 40px;
      }
      p {
          font-size: 20px;
      }
  </style>

  • 상태 크기로 글자 크기 지정하기

    • %, em : 부모 요소의 글씨 크기를 기준으로 상대적인 값을 지정. 부모 요소 글자 크기가 달라지면 다른 요소의 글자 크기도 달라짐.
    • rem : 웹 문서 기본 글자 크기를 미리 지정한 상태에서 원하는 요소의 글자 크기를 상댓값으로 지정함.

이탤릭체 글자 표시 = font-style

/* 
    일반, italic - 이탤릭체(기울어진 글꼴 표시), 
    oblique - 이탤릭체(원래 글꼴을 기울어지게 표시)
*/
font-style: normal | italic | oblique

글자 굵기 지정 = font-weight

/*
    보통, 굵게, 더 굵게, 더 가늘게, 100 ~ 900 사이 굵기.
*/
font-weight: normal | bold | bolder | lighter | 100 | 200 | ...... | 800 | 900

웹 폰트와 아이콘 폰트 사용하기

웹 폰트

  • 웹 문서에서 사용한 글꼴 정보를 서버에 올려놓고, 사용자가 사이트에 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 내려받는 방식.
  • 시스템에 글꼴이 없더라도 내려받아서 표시하므로 의도한대로 텍스트 표시 가능함.
  • 이미 서버에 올라와 있는 글꼴 정보를 링크해서 사용하는 방법이 일반적임.
  • 가장 많이 사용하는 폰트 사이트 ⇒ 구글 폰트 사이트.

아이콘 폰트

  • 아이콘을 이미지가 아닌 글자 형태로 사용한 것.
  • CSS 로 크기나 색상을 쉽게 조절할 수 있음.

구글 웹 폰트 사용하기

  • <link> 태그 사용하는 방식
  • @import 문 사용하는 방식
    • CSS 에서 가장 먼저 와야 한다는 점.
  <style>
    /* Do it! 구글 폰트 사용하기 */
    @import url('https://fonts.googleapis.com/css2?family=Story+Script&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap');

    body {
      background: url('images/bg.jpg') no-repeat fixed;
      background-size: cover;
      text-align: center;
    }

    h1 {
      font-size: 120px;
      color: #fff;
    }

    .html {
      font-family: "Story Script", cursive;
      font-weight: 400;
      font-style: normal;
    }

    .css {
      font-family: "Gravitas One", serif;
      font-weight: 400;
      font-style: normal;
    }
  </style>

<body>
  <h1 class="html">HTML</h1>
  <h1 class="css">CSS</h1>
</body>

아이콘 폰트 사용하기

<head>
    <!-- Do it! 아이콘 폰트 CDN 링크하기 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<ul>
    <!-- Do it! 메뉴에 아이콘 폰트 추가하기 -->
    <li>
        <i class="fa-brands fa-github"></i>
        <a href="#">Github</a>
    </li>
    <li>
        <i class="fa-brands fa-discord"></i>
        <a href="#">Discord</a>
    </li>
    <li>
        <i class="fa-brands fa-slack"></i>
        <a href="#">Slack</a>
    </li>
</ul>
  • CSS 표기법 숙지.
  • 웹폰트, 아이콘 폰트 활용은 디자인에서 중요해 보임.

  • https://www.w3.org/TR/css/#css

  • https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics

  • https://www.w3.org/TR/CSS2/about.html#doc-language → 1.4.2 CSS property definitions

  • W3C 표준 규약 기본형 표기법

    W3C 표준 규약에서 기본형 표기법은 주로 기술 사양(Technical Specifications) 내에서 문법적 요소를 설명할 때 사용되는 기호 체계를 의미합니다. 이는 특정 구문이나 속성값의 구조를 명확하게 전달하기 위한 일종의 주석 또는 메타 언어입니다.

    주요 표기 기호 및 의미는 다음과 같습니다:

    기호 의미 설명
    ` ` 선택 (OR)
    [ ] 선택 사항 대괄호 안의 요소가 생략될 수 있는 선택적 부분임을 의미합니다.
    ... 반복 앞의 요소가 하나 이상 반복될 수 있음을 의미합니다.
    공백 요소들이 순서대로 나열되어야 함을 의미합니다.
    , 쉼표 구분 요소들이 쉼표로 구분되어야 함을 의미합니다.
    * 반복 (0번 이상) 앞의 요소가 0번 이상 반복될 수 있음을 의미합니다.
    + 반복 (1번 이상) 앞의 요소가 1번 이상 반복될 수 있음을 의미합니다.
    ? 선택 (0번 또는 1번) 앞의 요소가 없거나 한 번 나타날 수 있음을 의미합니다.
    {n,m} 횟수 지정 앞의 요소가 최소 n번, 최대 m번 반복될 수 있음을 의미합니다.

    예시:

    • CSS font-family 속성의 기본형 표기:font-family: [ <family-name> | <generic-family> ]#
    • 이는 <family-name> 또는 <generic-family> 중 하나를 선택하고, 쉼표로 구분하여 여러 개를 나열할 수 있음을 의미합니다.
    • W3C는 이러한 표기법을 포함한 다양한 웹 표준 기술 사양(HTML, CSS, JavaScript 등)을 W3C 웹 표준 페이지에서 확인할 수 있습니다.

  • https://fonts.google.com/

  • https://fonts.google.com/knowledge

  • https://cdnjs.com/libraries/font-awesome

  • https://docs.fontawesome.com/web/setup/get-started/

🤟소감 3줄 요약

  • 예쁜 폰트로 블로그 만들어봐야겠다.
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 06 CSS의 기본(1)  (0) 2026.01.14
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(2)  (0) 2026.01.13
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(1)  (0) 2026.01.13
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기  (0) 2026.01.10
'Do it 스터디!' Related Articles more