텍스트 속성

텍스트 표현 방식을 제어하는 속성

•

텍스트 속성 종류

•

기본 예시 코드

•

텍스트 반응형 스타일

◦

상대 단위 사용

◦

@media (미디어쿼리) 사용

◦

clamp() 함수 사용

◦

calc() 함수 사용

텍스트 속성 종류

속성	설명	예시
text-align	텍스트의 수평 정렬을 설정합니다. left, right, center, justify 값을 사용합니다.	text-align: center;, text-align: justify;
text-decoration	텍스트에 밑줄, 취소선 등의 장식을 추가합니다. underline, line-through, none 등이 있습니다.	text-decoration: underline;, text-decoration: line-through;
text-transform	텍스트의 대소문자를 변환합니다. capitalize, uppercase, lowercase, none 값 사용.	text-transform: uppercase;
letter-spacing	글자 간의 간격을 지정합니다. 양수는 간격을 넓히고 음수는 간격을 좁힙니다. 단위는 px, em 등이 사용됩니다.	letter-spacing: 2px;, letter-spacing: -0.5em;

기본 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 속성 예시</title>
  <style>
    .example {
      font-size: 20px;
      text-align: center; /* 텍스트 가운데 정렬 */
      text-decoration: underline; /* 텍스트 밑줄 */
      text-transform: uppercase; /* 모든 텍스트 대문자로 변환 */
      letter-spacing: 2px; /* 글자 간격 넓히기 */
    }
  </style>
</head>
<body>
  <h1 class="example">텍스트 속성 예시 : abc</h1>
</body>
</html>
HTML
복사

텍스트 반응형 스타일

•

상대 단위 사용

•

@media (미디어쿼리) 사용

•

clamp() 함수 사용

•

calc() 함수 사용

1. 상대 단위 사용

em, rem, %, vw(뷰포트 너비), vh(뷰포트 높이)와 같은 상대 단위를 사용하여 텍스트 크기를 동적으로 조정할 수 있습니다.

h1 {
  font-size: 5vw; /* 뷰포트 너비의 5% */
}
p {
  font-size: 1.5rem; /* 기본 글꼴 크기의 1.5배 */
}
CSS
복사

•

vw: 화면 너비의 백분율에 따라 텍스트 크기가 조정됩니다.

•

rem: 루트 요소(html)의 글꼴 크기를 기준으로 크기를 조정합니다.

2. @media (미디어쿼리) 사용

미디어 쿼리를 사용하여 특정 화면 크기에 따라 텍스트 크기를 변경할 수 있습니다.

h1 {
  font-size: 24px;
}

@media (max-width: 768px) {
  h1 {
    font-size: 18px; /* 화면 너비가 768px 이하일 때 */
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 16px; /* 화면 너비가 480px 이하일 때 */
  }
}
CSS
복사

3. clamp() 함수 사용

clamp()는 텍스트 크기를 최소값과 최대값 사이에서 유연하게 조정할 수 있는 함수입니다. 이 방법을 사용하면 특정 범위 내에서 반응형 텍스트를 설정할 수 있습니다.

h1 {
  font-size: clamp(16px, 5vw, 32px); /* 최소 16px, 최대 32px, 중간 값은 5vw */
}
CSS
복사

•

clamp(최소값, 중간값, 최대값): 화면 크기에 따라 중간값을 기준으로 텍스트 크기를 조정하고, 설정된 최소 및 최대 값을 벗어나지 않습니다.

4. calc() 함수 사용

calc() 함수를 사용해 뷰포트에 따라 동적으로 텍스트 크기를 계산할 수 있습니다.

h1 {
  font-size: calc(1rem + 2vw); /* 기본 글꼴 크기에서 뷰포트 너비의 2% 추가 */
}
CSS
복사

반응형 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>반응형 텍스트 예시</title>
  <style>
    h1 {
      font-size: clamp(16px, 5vw, 32px); /* 반응형 텍스트 */
      text-align: center;
    }
    
    .point {
	    font-size: calc(1rem + 2vw); /* 기본 글꼴 크기에서 뷰포트 너비의 2% 추가 */
    }

    p {
      font-size: 1.5rem; /* 상대 단위 사용 */
    }

    @media (max-width: 768px) {
      p {
        font-size: 1.25rem; /* 작은 화면에서 텍스트 크기 축소 */
      }
    }

    @media (max-width: 480px) {
      p {
        font-size: 1rem; /* 더 작은 화면에서 텍스트 크기 축소 */
      }
    }
  </style>
</head>
<body>
  <h1>반응형 텍스트 예시</h1>
  <p>이 텍스트는 화면 크기에 따라 크기가 조정됩니다.</p>
</body>
</html>
HTML
복사