Html css Text

 

 

1. 텍스트 칼라

대상 {
  color: 색상;
}

* 색상 코드

https://htmlcolorcodes.com/

 

2. 텍스트 정렬

div {
  text-align: center;  /*중앙*/
}

div {
  text-align: left;  /*왼쪽*/
}

div {
  text-align: right;  /*오른쪽*/
}

3. 텍스트 균등 분배

div {
  text-align: justify;
}

4. 꾸밈 없음

div {
  text-decoration: none;
}

5. 텍스트 상단, 중앙, 하단 선

div {
  text-decoration: overline;/*위에 선*/
}

div {
  text-decoration: line-through;/*중앙에 선*/
}

div {
  text-decoration: underline;/*하단에 선*/
}

6. 영문 대소문자

div {
  text-transform: uppercase;  /*전부 대문자*/
}

div {
  text-transform: lowercase;  /*전부 소문자*/
}

div {
  text-transform: capitalize;  /*앞글자 대문자*/
}

7. 첫번째 앞 단어에 공백

div {
  text-indent: 50px;  /*맨 첫 글자에 앞단어가 50px 띄어쓰기가 된다. */
}

8. 문장 간격

div {
  letter-spacing: 3px;  /*기본값은 0이다.*/
}

9. 단어가 차지하는 높이(엘리먼트 안에서의 높이)

div {
  line-height: 20; /*기본값은 1이다.*/
}

10. 텍스트 반전

div {
  direction: rtl;  /*맨 뒷단어부터 표기된다.*/
}

11. 단어 간격

div {
  word-spacing: 10px; /*단어들끼리의 간격 */
}

12. 글씨에 그림자 효과

div {
  text-shadow: 3px 2px red;  /*오른쪽 내려가는 크기, 아래로 내려가는 크기, 색깔*/
}