CSS의 타이포그래피 및 글꼴 스타일링-CSS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2024-09-03 13:44:46

원래의

675명이 탐색했습니다.

Typography and Font Styling in CSS

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

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

웹 글꼴의 이해

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

1. 시스템 글꼴

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

예:

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

로그인 후 복사

2. 구글 폰트

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

예:

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

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

로그인 후 복사

그런 다음 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;
}

로그인 후 복사

이 예에서는: