CSS의 타이포그래피 및 글꼴 스타일링

강의 4: CSS의 타이포그래피와 글꼴 스타일링

이번 강의에서는 CSS를 사용하여 텍스트 스타일을 지정하는 방법을 살펴보겠습니다. 타이포그래피는 가독성, 사용자 경험 및 전체적인 미학에 영향을 미치는 웹 디자인의 중요한 측면입니다. 이 강의를 마치면 웹사이트에서 다양한 글꼴 스타일을 적용하고 텍스트 모양을 제어하는 ​​방법을 알게 될 것입니다.

---

웹 글꼴의 이해

웹 글꼴을 사용하면 웹사이트에서 다양한 서체를 사용할 수 있습니다. 기기에 사전 설치된 시스템 글꼴을 사용하거나 Google Fonts와 같은 서비스를 사용하여 맞춤 글꼴을 가져올 수 있습니다.

1. 시스템 글꼴

시스템 글꼴은 대부분의 기기에 사전 설치되어 있으므로 안정적이지만 디자인 옵션이 제한됩니다.

• 예:

  body {
    font-family: Arial, sans-serif;
  }

2. 구글 폰트

Google Fonts는 웹사이트에 쉽게 통합할 수 있는 다양한 웹 글꼴을 제공합니다.

• 예:

  1. 먼저 HTML 93f0f5c25f18dab9d176bd4f6de5d30e에 글꼴 링크를 포함하세요.

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. 그런 다음 CSS에 글꼴을 적용하세요.
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

CSS의 글꼴 속성

CSS는 글꼴 크기, 두께, 스타일 등 글꼴 스타일을 지정할 수 있는 다양한 속성을 제공합니다.

1. 글꼴 크기

글꼴 크기 속성을 사용하여 텍스트 크기를 제어할 수 있습니다.

• 예:

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2. 글꼴 두께

font-weight 속성을 사용하면 텍스트가 얼마나 굵게 표시되는지 설정할 수 있습니다.

• 예:

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3. 글꼴 스타일

글꼴 스타일 속성을 사용하면 텍스트를 기울임꼴로 표시할 수 있습니다.

• 예:

  em {
    font-style: italic;
  }

4. 글꼴 변형

글꼴을 작은 대문자로 표시하려면 글꼴 변형을 사용하세요.

• 예:

  p.caps {
    font-variant: small-caps;
  }

5. 줄 높이

line-height 속성은 텍스트 줄 사이의 간격을 제어합니다.

• 예:

  p {
    line-height: 1.5;
  }

6. 텍스트 정렬

text-align 속성은 요소 내 텍스트의 가로 정렬을 제어합니다.

• 예:

  h1 {
    text-align: center;
  }

7. 텍스트 장식

텍스트 장식 속성을 사용하면 텍스트에 밑줄, 윗줄 또는 취소선을 추가할 수 있습니다.

• 예:

  a {
    text-decoration: underline;
  }

8. 텍스트 그림자

text-shadow 속성을 사용하여 텍스트에 그림자 효과를 추가할 수 있습니다.

• 예:

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

실제 예:

이러한 속성을 결합하여 타이포그래피에 중점을 둔 웹페이지 스타일을 만들어 보겠습니다.

HTML:

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

이 예에서는:

• 모든 텍스트에는 Google 글꼴 "Open Sans"가 사용됩니다.
• 제목(h1, h2)은 특정 글꼴 크기, 두께 및 텍스트 그림자로 스타일이 지정됩니다.
• 단락에는 표준 글꼴 크기가 제공되며 이탤릭체와 작은 대문자를 포함하여 .intro 클래스에 특수 스타일이 적용됩니다.
• 콘텐츠는 최대 너비와 자동 여백을 사용하여 페이지 중앙에 배치됩니다.

연습

1. 다양한 제목과 단락이 포함된 HTML 페이지를 만듭니다.
2. 다양한 글꼴 속성을 적용하여 텍스트 스타일을 지정하세요.
3. Google 글꼴을 사용하여 웹페이지에 독특한 모양을 부여하세요.
4. 텍스트 정렬, 장식, 그림자 효과를 실험해 보세요.

---

다음: 다음 강의에서는 CSS 레이아웃: Floats, Flexbox 및 Grid에 대해 논의하고, 복잡하고 반응이 빠른 레이아웃을 만드는 방법을 알아보겠습니다. 귀하의 웹사이트. 계속 지켜봐주세요!

---

LinkedIn에서 나를 팔로우하세요
리도이 하산

위 내용은 CSS의 타이포그래피 및 글꼴 스타일링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!