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

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

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

---

웹 글꼴의 이해

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

1. 시스템 글꼴

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

• 예:

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

2. 구글 폰트

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

• 예:

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

   <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:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!