CodeGym /자바 코스 /Frontend SELF KO /텍스트 속성

텍스트 속성

Frontend SELF KO

레벨 14 , 레슨 4

사용 가능

5.1 `line-height` 속성

line-height, letter-spacing, word-spacing 같은 텍스트 속성은 웹 페이지에서 텍스트 스타일링에 중요한 역할을 해. 이 속성들로 줄 사이 간격, 글자 간 간격, 단어 간 간격 등을 조절할 수 있어. 각각의 속성을 자세히 알아보자.

line-height 속성은 텍스트의 줄 높이를 결정해. 이 속성은 인접한 텍스트 줄의 기본 선 사이의 거리를 설정하며, 텍스트의 밀도와 가독성에 영향을 미쳐.

값:

숫자값: 단위 없이 상대적인 값 (예: 1.5), 현재 폰트 크기에 곱해져
백분율값: 현재 폰트 크기의 백분율로 표현된 상대적인 값 (예: 150%)
절대값: 고정된 단위로 표현된 값 (예: 픽셀) (예: 24px)
키워드 normal: 기본값, 일반적으로 1.2와 같아

사용 예시:

CSS

    
      .normal {
        line-height: normal;
      }

      .one-point-five {
        line-height: 1.5;
      }

      .double {
        line-height: 2;
      }

HTML

    
      <body>
        <p class="normal">이것은 일반적인 줄 높이의 텍스트입니다. 이것은 일반적인 줄 높이의 텍스트입니다.</p>
        <p class="one-point-five">이것은 1.5 줄 높이의 텍스트입니다. 이것은 1.5 줄 높이의 텍스트입니다.</p>
        <p class="double">이것은 두 배 줄 높이의 텍스트입니다. 이것은 두 배 줄 높이의 텍스트입니다.</p>
      </body>

5.2 `letter-spacing` 속성

letter-spacing 속성은 글자 간의 간격, 즉 텍스트의 문자 사이의 추가 공간을 결정해. 이 속성은 가독성을 향상하거나 시각적 효과를 내는데 사용할 수 있어.

값:

절대값: 고정된 단위로 표현된 값 (예: 픽셀 — 2px)
음수값: 문자 간의 간격을 줄여 (예: -1px)
키워드 normal: 기본값, 추가 공간 없음 (0)

사용 예시:

CSS

    
      .normal {
        letter-spacing: normal;
      }

      .wide {
        letter-spacing: 2px;
      }

      .narrow {
        letter-spacing: -1px;
      }

HTML

    
      <body>
        <p class="normal">이것은 일반적인 글자 간 간격의 텍스트입니다.</p>
        <p class="wide">이것은 넓어진 글자 간 간격의 텍스트입니다.</p>
        <p class="narrow">이것은 줄어든 글자 간 간격의 텍스트입니다.</p>
      </body>

5.3 `word-spacing` 속성

word-spacing 속성은 텍스트에서 단어 사이의 간격을 결정해. 이 속성은 단어 간의 공간을 추가하거나 제거하며, 가독성을 향상하거나 시각적 효과를 위해 사용할 수 있어.

값:

절대값: 고정된 단위로 표현된 값 (예: 픽셀) (예: 4px)
음수값: 단어 간의 간격을 줄여 (예: -2px)
키워드 normal: 기본값, 표준 단어 간 간격 (일반적으로 0)

사용 예시:

CSS

    
      .normal {
        word-spacing: normal;
      }

      .wide {
        word-spacing: 4px;
      }

      .narrow {
        word-spacing: -2px;
      }

HTML

    
      <body>
        <p class="normal">이것은 일반적인 단어 간 간격의 텍스트입니다.</p>
        <p class="wide">이것은 넓어진 단어 간 간격의 텍스트입니다.</p>
        <p class="narrow">이것은 줄어든 단어 간 간격의 텍스트입니다.</p>
      </body>

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION

텍스트 속성

5.1 line-height 속성

5.2 letter-spacing 속성

5.3 word-spacing 속성

5.1 `line-height` 속성

5.2 `letter-spacing` 속성

5.3 `word-spacing` 속성