Text 관련 CSS

1. 텍스트 정렬 및 장식 (Text Alignment & Decoration)

• text-align
  • 역할: 블록 레벨 요소 내부의 글자와 인라인 요소들을 좌우 가운데, 왼쪽, 오른쪽 등으로 정렬합니다.
  • 예시:
     

.container {
  text-align: center; /* 자식 텍스트와 인라인 요소를 가운데 정렬 */
}

• text-decoration
  • 역할: 텍스트에 밑줄, 취소선, 오버라인 등을 추가하거나 제거합니다.
  • 주요 값:
    • underline: 밑줄을 표시
    • none: 텍스트 장식을 제거
  • 예시:

a {
  text-decoration: underline; /* 링크에 밑줄 적용 */
}

---

2. 글자 간격 및 들여쓰기 (Letter Spacing & Text Indent)

• letter-spacing
  • 역할: 텍스트 글자 사이의 간격을 조절합니다.
  • 단위: 보통 상대 단위인 em을 사용하여 폰트 크기에 대한 비율로 지정합니다.
  • 참고: 피그마 등 디자인 툴에서 자간 -5%는 -0.05em, -10%는 -0.1em 등으로 변환됩니다.
  • 예시:
     

 p {
  letter-spacing: -0.05em;
}

• text-indent
  • 역할: 텍스트의 첫 줄을 왼쪽 또는 오른쪽으로 들여쓰기(또는 내어쓰기) 합니다.
  • 특징: 음수 값도 사용 가능하여 텍스트 위치를 미세하게 조절할 수 있습니다.
  • 예시:

p {
  text-indent: 2em; /* 첫 줄을 오른쪽으로 들여쓰기 */
}

---

3. 줄 간격 (Line Height)

• line-height
  • 역할: 텍스트 줄 사이의 간격(행간)을 조절합니다.
  • 표기 방법:
    • 단위 없이 숫자(배수)로 지정하는 경우, 폰트 크기의 배수로 계산됩니다. 예를 들어, line-height: 1.5;는 폰트 크기의 150% 크기로 줄 간격을 적용합니다.
    • %나 em 단위로도 지정할 수 있지만, 배수로 사용하는 경우가 많습니다.
  • 디자인 팁:
    • 본문 텍스트의 경우, 보편적으로 1.45~1.5배 정도가 적당합니다.
    • 전체 본문에 일괄 적용할 때는 body { line-height: 1.5; }와 같이 지정합니다.
    • 메뉴나 헤더처럼 고정 높이 요소의 경우, 텍스트 수직 중앙 정렬 효과를 위해 line-height 값을 요소 높이와 동일하게 설정할 수 있습니다.
  • 예시:

body {
  line-height: 1.5;
}
/* 예: 메뉴 항목의 높이가 100px인 경우 */
#header .gnb > li > a {
  line-height: 100px;
}

---

4. 수직 정렬 (Vertical Align)

• vertical-align
  • 역할: 인라인 또는 테이블 셀 요소들의 수직 정렬을 조정합니다.
  • 주요 값:
    • top: 요소의 상단 기준 정렬
    • middle: 요소 중앙 정렬
    • bottom: 요소 하단 기준 정렬
    • (또한 baseline 등도 사용 가능하며, 여러 요소에 동일하게 적용해야 합니다.)
  • 주의:
    • vertical-align은 인라인 요소나 인라인 블록, 테이블 셀 등에 적용됩니다.
    • 좌우로 나열된 글자 취급 요소들의 높이가 다를 때, 수직 정렬을 맞추기 위해 사용합니다.
  • 예시:

.icon, .text {
  vertical-align: middle;
}

---

5. 단어 줄바꿈과 단어 분리 (Word Break & Word Wrap)

• word-break
  • 역할: 텍스트가 줄 바꿈되는 기준을 결정합니다.
  • 주요 값:
    • keep-all: 기본적으로 한글과 영어 단어 단위로 줄바꿈 (단어가 끊기지 않음)
      • 주로 한글 본문에 사용되어, 불필요한 단어 분리 없이 원래 단어 단위로 줄바꿈되도록 함.
    • break-all: 모든 문자 단위로 줄바꿈 (한글, 영문 모두 한 글자씩 줄바꿈)
      • 주로 모바일 반응형 디자인에서 긴 단어 또는 제목을 강제로 줄바꿈할 때 사용.
  • 예시:

.keep {
  word-break: keep-all;
}
.break {
  word-break: break-all;
}

• word-wrap (또는 overflow-wrap)
  • 역할: 부모 요소보다 긴 단어가 있을 경우, 강제로 줄바꿈하여 레이아웃이 깨지지 않도록 합니다.
  • 주요 값:
    • break-word: 긴 단어를 중간에서 잘라서 줄바꿈
  • 예시:

.responsive-title {
  word-wrap: break-word;
  /* 또는 최신 문법: overflow-wrap: break-word; */
}

• 실제 사용 상황:
  • 긴 단어나 큰 제목 등이 화면 크기가 줄어들 때, 자동으로 줄바꿈되어 보기 좋은 레이아웃을 유지할 수 있도록 주로 반응형 디자인에서 사용됩니다.

---

요약

• 텍스트 정렬: 부모 요소에 text-align: center; 적용 시, 내부 텍스트와 인라인 요소들이 가운데 정렬됩니다.
• 텍스트 장식: text-decoration: underline; 또는 none;으로 밑줄 등의 효과를 지정합니다.
• 자간 조정: letter-spacing은 상대 단위 em을 사용해 폰트 크기에 따른 간격 조절을 합니다.
• 들여쓰기: text-indent로 첫 줄의 위치를 조절하며, 음수 값도 사용 가능합니다.
• 줄 간격: line-height는 단위 없이 배수로 지정하는 경우가 많으며, 디자인에 따라 본문은 약 1.5배, 메뉴는 고정 높이와 맞추어 설정합니다.
• 수직 정렬: vertical-align을 사용해 인라인 요소들 간의 높이 차이를 맞춰 중앙 또는 상단, 하단 정렬할 수 있습니다.
• 단어 줄바꿈:
  • word-break: keep-all은 단어 단위 줄바꿈(주로 한글에 사용)
  • word-wrap: break-word는 부모보다 긴 단어를 강제로 줄바꿈
  • word-break: break-all은 모든 글자를 한 글자씩 줄바꿈(모바일 환경 등에서 사용)

이와 같이 다양한 텍스트 관련 CSS 속성을 적절하게 조합하면, 디자인 의도에 맞는 세밀한 텍스트 표현과 반응형 레이아웃을 구현할 수 있습니다.