[CSS] 텍스트 속성 (text-align, font-weight)

텍스트 정렬

가로 정렬 text-align

텍스트를 가로 정렬할 때에는 text-align을 사용한다.
이 속성을 사용하면 블록 요소나 표의 텍스트를 정렬할 수 있다.

h1 {
    text-align: center;
}

Value (값)

• start Experimental
  쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같다.
• end Experimental
  쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같다.
• left
  인라인 콘텐츠를 line box의 왼쪽 모서리로 정렬한다.
• right
  인라인 콘텐츠를 line box의 오른쪽 모서리로 정렬한다.
• center
  인라인 콘텐츠를 line box의 가운데로 정렬한다.
• justify
  인라인 콘텐츠를 양쪽 정렬한다. 마지막 줄을 제외하고, line box의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄운다.
• justify-all Experimental
  justify와 같지만 마지막 줄에도 적용한다.
• match-parent Experimental
  inherit과 비슷하지만, start와 end 값을 부모의 direction에 맞춰 적절한 left와 right 값으로 치환한다.

텍스트 굵기 (font-weight)

텍스트의 굵기를 변경할 때에는 font-weight를 사용한다.
value로는 normal, bold, lighter, bolder 또는 100 ~ 1000 사이의 숫자를 설정할 수 있다.
가장 흔한 굵기는 400이다.
모든 폰트가 굵기 조절을 지원하지는 않는다.

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

텍스트 선 꾸미기 (text-decoration)

• 텍스트 데코레이션을 사용하면 텍스트를 꾸미는 선을 조정할 수 있다.
• 색과 모양, 위치를 설정할 수 있다.

속성

1. text-decoration-line

• 선의 종류를 설정한다 (예: underline, overline, line-through, none).

text-decoration-line: underline;

2. text-decoration-color

• 선의 색상을 설정한다.

  text-decoration-color: red;

3. text-decoration-style

• 선의 스타일을 설정한다 (예: solid, dashed, dotted, wavy).

text-decoration-style: wavy;

텍스트 줄 간격 (lign-height)

• line-height 속성을 사용하면 텍스트 줄 간격을 조정할 수 있다.
• 값은 숫자/백분율/길이/normal 을 사용해 설정할 수 있다.
• normal의 경우 사용자 브라우저에 따라 다르지만, 기본적으로 약 1.2 정도의 값을 사용하며 font-family에 따라 달라질 수 있다.

p {
    line-height:  1.2; /* 기본 줄 간격 */
}

텍스트 글자 사이 간격(letter-spacing)

• 텍스트 글자 사이의 간격을 조정할 때 사용한다.
• 값에는 키워드 값인 normal, 길이 단위(px, em 등) 또는 전역값(inherit 등)을 사용하며, 양수로 설정하면 간격이 늘어나고, 음수로 설정하면 간격이 줄어든다.

h1 {
    letter-spacing: 2px; /* 글자 간격을 2px 늘림 */
}

p {
    letter-spacing: -1px; /* 글자 간격을 1px 줄임 */
}