[CSS] CSS를 이용해 텍스트 꾸미기

👀 CSS를 이용해 텍스트 꾸미기

✔ 색상

.box {
  color: #155724;            /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb;     /* 테두리 색상 */
}

✔ 글꼴

Google Fotns 서비스를 통해 다양한 웹 폰트를 사용할 수 있다. (HTML의 link 태그를 사용하여 간단하게 embed 가능)

/*fallback = 표현하고 싶은 글꼴의 사용이 안될 때를 위한 대비책*/
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

✔ 크기

.title {
  font-size: 24px;
}

기타

굵기 : font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

✔ 정렬

가로 정렬: text-align
유효 값: left, right, center, justify(양쪽 정렬)

새로 정렬: vertical-align
글자를 둘러싼 박스의 높이 > 글자 높이 인 경우에만 적용가능하며, 부모 요소의 display 속성이 반드시 table-cell 이어야 함

Reference: 코드스테이츠