[HTML+CSS+JavaScript]  CSS 텍스트(text) 관련 속성

  CSS에서 텍스트를 다루는 것은 웹 페이지의 가독성과 디자인을 결정하는 중요한 요소입니다. 다양한 텍스트 관련 속성을 활용하여 텍스트의 크기, 색상, 스타일, 정렬 등을 세밀하게 조절할 수 있습니다.

 

1. 텍스트의 기본적인 스타일링

font-family: 텍스트에 사용할 글꼴을 지정합니다. 시스템에 설치된 글꼴이나 웹폰트를 사용할 수 있습니다.
font-size: 텍스트의 크기를 지정합니다. px, em, rem 등 다양한 단위를 사용할 수 있습니다.
font-weight: 텍스트의 굵기를 지정합니다. bold, bolder, lighter, 100~900 숫자 등을 사용할 수 있습니다.
font-style: 텍스트의 스타일을 지정합니다. normal, italic, oblique 등을 사용할 수 있습니다.
color: 폰트의 색상을 지정합니다

▶ 예제 소스

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      /* 글꼴 설정: Arial 폰트를 우선 사용하고, Arial이 없을 경우 sans-serif 계열 폰트를 사용 */
      font-family: Arial, sans-serif;

      /* 글자 크기 설정: 텍스트 크기를 16픽셀로 고정 */
      font-size: 16px;

      /* 글자 굵기 설정: 텍스트를 굵게 표시 */
      font-weight: bold;

      /* 글자 스타일 설정: 텍스트를 기울임체로 표시 */
      font-style: italic;
    }
  </style>
</head>
<body>
  <!-- CSS 스타일이 적용된 단락 -->
  <p>이 문장은 설정된 스타일이 적용된 텍스트입니다.</p>
</body>
</html>

♠ 결과



 

 

 

+ Recent posts