HTML/CSS 베이스캠프

텍스트 꾸미기

텍스트는 웹 페이지의 핵심 요소입니다. HTML로 구조를 만들고 CSS로 폰트와 폰트 스타일을 적용할 수 있습니다. 이번 장에서는 텍스트를 꾸미는 다양한 CSS 속성들을 살펴보겠습니다.

1. color 색상

텍스트의 색상은 color 속성으로 설정합니다. 이 속성은 폰트 색상을 나타내며, font- 접두사가 붙지 않는다는 점에 유의해야 합니다. 색상을 표현하는 방법에는 여러 가지가 있습니다. 키워드(red, blue 등), Hex 코드(#으로 시작하는 16진수), rgb(), rgba(), hsl(), hsla() 함수 등을 사용할 수 있습니다. 실무에서는 주로 Hex 코드를 사용하며, 투명도가 필요한 경우 rgba()를 자주 활용합니다.

예를 들어, 다음과 같이 텍스트 색상을 설정할 수 있습니다.

또한, currentColor 키워드를 사용하면 현재 요소의 색상 값을 상속받아 다른 속성에 적용할 수 있습니다. 이는 일관된 색상을 유지하는 데 유용합니다.

색상 표현 Tip!

Hex로 color를 표현할 때, 3자리로 줄여서 표현할 수 있습니다. 예를 들어, #ff0000은 #f00으로 줄여서 표현할 수 있습니다.
좀 더 다양한 색의 이름과 Hex 코드를 확인하려면 W3Schools를 참고하세요. 자주 사용되는 컬러 이름은 기억해두면 유용합니다.

2. 글꼴 설정하기

글꼴은 텍스트의 시각적 특성을 결정하는 중요한 요소입니다. font-family 속성을 사용하여 글꼴을 지정할 수 있습니다. 웹 안전 폰트를 사용하거나 웹 폰트를 불러와 사용할 수 있습니다.

웹 폰트를 사용하려면 먼저 폰트를 불러와야 합니다. Google Fonts나 눈누와 같은 웹 폰트 서비스를 이용하면 쉽게 다양한 폰트를 사용할 수 있습니다. 예를 들어, Google Fonts에서 'Noto Sans KR' 폰트를 사용하려면 다음과 같이 설정합니다.

<head>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans KR', sans-serif;
    }
  </style>
</head>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans KR', sans-serif;
    }
  </style>
</head>

Google Fonts 눈누

3. 글꼴 크기 조정하기

font-size 속성으로 글꼴의 크기를 조절할 수 있습니다. 크기 단위로는 절대 단위인 px와 상대 단위인 em, rem 등이 자주 사용됩니다. em은 현재 요소의 부모 요소에 설정된 글꼴 크기를 기준으로 하는 상대 단위이고, rem은 루트 요소(html)에 설정된 글꼴 크기를 기준으로 합니다.

위 예제에서 em과 rem의 차이점을 확인할 수 있습니다. em은 부모 요소의 글꼴 크기를 기준으로 하기 때문에 중첩된 요소의 글꼴 크기가 계속해서 커지는 현상이 발생할 수 있습니다. 반면 rem은 루트 요소의 글꼴 크기를 기준으로 하기 때문에 이러한 현상이 발생하지 않습니다.

왜 em, rem, vw, vh 같은 단위를 쓰는 건가요?

반응형 웹페이지 개발, 유지보수 등에 용이합니다!

4. 글꼴 굵기 설정하기

font-weight 속성으로 텍스트의 굵기를 조절할 수 있습니다. normal(기본값), bold(굵게), lighter(부모 요소보다 한 단계 가볍게), bolder(부모 요소보다 한 단계 굵게) 등의 키워드나 100부터 900까지의 숫자 값을 사용할 수 있습니다.

5. 텍스트 정렬하기

text-align 속성은 텍스트의 가로 정렬을 설정합니다. 이 속성은 블록 레벨 요소 내의 인라인 콘텐츠(텍스트, 인라인 요소)를 정렬하는 데 사용됩니다. 주요 값으로는 다음과 같은 것들이 있습니다.

left: 왼쪽 정렬 (기본값)
right: 오른쪽 정렬
center: 중앙 정렬
justify: 양쪽 정렬 (마지막 줄 제외)
justify-all: 양쪽 정렬 (마지막 줄 포함)

양쪽 정렬 적용 시 불규칙한 여백(흰 강 현상- River of white)은 가독성에 있어 좋지 못해 권하지 않습니다.

흰 강 현상 예시

6. 세로 정렬 다루기

vertical-align 속성은 인라인 요소나 테이블 셀 요소의 수직 정렬을 조정합니다. 이 속성은 블록 레벨 요소에는 적용되지 않는다는 점에 주의해야 합니다. 주요 값으로는 baseline, sub, super, top, middle, bottom 등이 있습니다.

인라인, 인라인 블록 및 테이블 셀 요소에만 적용됩니다!

블록 레벨에서 수직정렬하고 싶다면 추후 배울 flex를 사용하면 됩니다!
간혹 이미지에서 위 아래 여백이 생기는 이유이기도 합니다. 여백 이슈가 생긴다면 vertical-align: bottom을 사용해보세요.

이번에는 이미지에서 불필요한 여백이 생기는 것을 확인해보고 CSS 탭으로 이동하여 vertical-align: bottom을 주석을 풀어 사용해보세요.

7. 행간 조정하기

line-height 속성은 텍스트 줄 사이의 간격, 즉 행간을 설정합니다. 이 속성은 텍스트의 가독성에 큰 영향을 미치므로 적절히 조정하는 것이 중요합니다. line-height는 다음과 같은 값을 사용할 수 있습니다:

숫자: 요소의 글꼴 크기에 대한 배수 (예: 1.5)
길이: px, em 등의 단위 (예: 20px, 1.5em)
백분율: 요소의 글꼴 크기에 대한 백분율 (예: 150%)
normal: 브라우저의 기본값 (보통 1.2)

일반적으로 본문 텍스트의 경우 1.5~2 사이의 값을 사용하면 좋은 가독성을 얻을 수 있습니다.

8. 자간 조정하기

letter-spacing 속성은 글자 사이의 간격, 즉 자간을 조절합니다. 이 속성을 사용하면 텍스트의 밀도를 조정하거나 특별한 시각적 효과를 줄 수 있습니다. 값은 길이 단위(px, em 등)로 지정하며, 음수 값도 사용할 수 있습니다.

행간이나 자간을 추후에 배울 JavaScript를 활용하여 좀 더 인터렉티브한 효과를 줄 수도 있습니다. 아래는 자간을 조정하여 3D 효과를 준 예시입니다. 행성 주위에 띄가 글자의 자간을 좁혀 만든 것입니다. 마우스를 오버해서 저 띄가 조정되게 할 수 있습니다.