[CSS] 텍스트 관련 style 활용, 텍스트 꾸미기 2

안녕하세요 저번에 양 조절 실패 이슈로..끝내지 못한
텍스트 관련 스타일을 마저 살펴보겠습니다.🚀🚀

---

✏️text-decoration

텍스트에 밑줄이나 취소선을 그어주는 스타일 속성

• 지정가능한 속성 값

  underline: 밑줄을 그어줌.
  overline: 윗줄을 그어줌.
  line-through: 취소선을 그어줌.
  none: 기본값. 아무 선도 표시하지 않음.

---

➡️direction

글자의 쓰기 방향을 지정하는 속성

• 지정가능한 속성 값

  ltr(left to right): 왼쪽에서 오른쪽으로 텍스트 표시. 기본값.
  rtl(right to left): 오른쪽에서 왼쪽으로 텍스트 표시.

---

↘️text-align

문단의 텍스트 정렬 방법을 지정하는 속성

• 지정가능한 속성 값

  start: 텍스트를 줄의 시작위치에 맞춰서 정렬
  end: 텍스트를 줄의 끝 위치에 맞춰서 정렬
  left/right: 왼쪽/오른쪽 정렬
  center: 가운데 정렬
  justify: 양쪽에 맞춰서 정렬

▶️코드의 실행화면을 보면 start속성값과 justify속성값이 같은 결과값을 가집니다.
또한, end속성값과 right속성값도 같은 결과값이에요.
그 이유는 다음과 같습니다.

start와 end는 쓰기 방향에 따라 달라지지만, right는 항상 오른쪽 정렬입니다.
또한 justify는 양쪽 정렬이 되는 특징이 있습니다.
쓰기 방향을 direction을 통해 오른쪽에서 왼쪽으로 바꾸면 그 차이를 알 수 있습니다.
기존 코드와 direction: rtl;을 적용한 코드를 비교해볼게요.

▶️왼쪽에 있는 것이 기존 코드로 짠 것이고 오른쪽에 있는 것이 쓰기 방향을 반대로 준 코드에요.
보시면 결과값이 달라진 것을 볼 수 있죠.

---

↕️ line-height

원하는 만큼의 줄 간격을 지정할 때 사용하는 속성

• 지정가능한 속성 값

  normal: 기본 값. 일반적인 줄간격으로 지정.
  숫자: 단위없이 몇배로 지정할 것인지 지정.
  크기: 단위와 함께 크기를 지정.
  백분율: 부모 태그의 높이를 기준으로 지정
  inherit: 부모의 지정된 줄간격을 상속받아 지정됨.

💡line-height는 보통 글자 크기의 1.5~2배 정도면 적당해요.

▶️inherit속성이 적용된 태그에 부모 태그가 없다면 아무런 기능을 하지 않지만,
txt2클래스를 가진 태그를 부모태그로 주고 그 안에 자식 태그로 inherit 속성이 추가된 태그를 추가하면,
부모 태그의 속성이 그대로 적용된 것을 볼 수 있어요.

---

나머지 텍스트 관련 스타일에 대해 보았는데요.
이외에도 텍스트 관련 스타일들은 더욱 많지만, 활용성이 조금 더 높은 스타일 위주로 보여드렸어요.
다음엔 색상과 배경을 위한 스타일을 보여드릴게용
오늘은 끝❗