본문 바로가기
방통대/HTML5

6-2 텍스트

by 꿈꾸는 몽나 2024. 3. 31.
728x90

텍스트 관련 속성

 

 

 

letter-spacing, word-sapcing 속성

-letter-spacing : 문자 사이의 간격

-word-spacing : 단어 사이의 간격

*값 -> normal, <길이> (음수 가능-> 서로 겹칠 수 있음)

 

letter-spacing 출력:

 

word-spacing 출력:

 

 

 

line-height 속성

: 문장의 줄 간격 지정

*값 -> normal, <길이>, <숫자>, %

 

출력:

 

 

 

text-align 속성

: 텍스트의 수평 정렬 방식 지정

*값 -> left, right, center, justify(양쪽 정렬)

 

출력:

 

 

 

text-align-last 속성

: 텍스트의 마지막 줄의 정렬 방식 지정

 

 

 

 

text-indent 속성

: 텍스트 블록에서 첫 번째 줄의 들여쓰기 지정

 

 

 

text-transform 속성

: 텍스트의 영어 알파벳 표기 방식 지정

 

 

 

 

text-decoration-line 속성

: 텍스트 장식과 관련된 선의 종류 지정

// 하나 이상의 속성값을 동시에 사용 가능

 

 

 

text-decoration-color 속성

: 선의 색상 지정

*값 -> <색상>

 

 

 

text-decoration-style 속성

 

 

 

text-decoration-thickness 속성

: 선의 두께 지정

*값 -> auto, <길이>, %(1em에 대한 백분율)

 

 

 

text-decoration 속성

: text-decoration-*의 일괄 지정

* text-decoration-line 속성의 값(기본값: none)은 필수 지정

 

ex)

 

 

 

text-shadow 속성

: 텍스트에 그림자 효과 지정

 

ex)

 

 

 

text-overflow속성

: 요소 박스 영역을 벗어난 텍스트의 표시 방식 지정

 

 

 

word-wrap속성

: 단어가 길어서 요소 폭을 넘을 때 단어를 분리해서 줄바꿈을 수행할지 여부 지정

 

 

 

vertical-align속성

: 요소의 수직 정렬 방식 지정

 

출력:

 

728x90

'방통대 > HTML5' 카테고리의 다른 글

7-1 박스 모델  (0) 2024.04.06
6-3 리스트  (0) 2024.03.31
6-1 글꼴  (0) 2024.03.30
5-3 색상  (0) 2024.03.23
5-2 선택자  (0) 2024.03.23