텍스트 관련 속성

※ abc 순으로 정렬

 

● color 속성

 - 글자 색 지정

 - color: (rgb or rgba) | (색상이름) | (16진수)

    - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능)

        ※ rgba는 투명도 까지 가능한 값

    - 색상이름 : red, blue 처럼 색상 이름으로 표기

    - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff))

 

● letter-spacing 속성

 - 글자 간격 조절

 - letter-spacing: normal | length

    - normal : 기본 값 (문자에 공백이 들어가지 않음)

    - length : px, %, em, rem 등으로 간격 설정

 

● text-decoration 속성

 - 글씨에 밑줄 or 윗줄 or 중간줄을 넣을 때, 사용

 - text-decoration: none | overline | line-through

    - none : 기본값으로 밑줄이 없는 보통 글자 (a태그의 밑줄을 없앨 때, 자주 사용)

    - underline : 글자 아래에 줄

    - overline : 글자 위에 줄

    - line-through : 글자 중간에 줄

 

● text-shadow 속성

 - 텍스트에 그림자 효과 추가

 - text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

    - none : 추가하지 않음 (기본값)

    - <가로거리> : 텍스트로부터 그림자까지의 가로 거리

    - <세로거리> : 텍스트로부터 그림자까지의 세로 거리

    - <번짐정도> : 그림자가 번지는 정도

    - <색상> : 그림자 색상

 

● text-transform 속성

 - 텍스트의 대, 소문자를 변환

 - text-transform: none | capitalize | uppercase | lowercase | full-width

    - none : 변환하지 않음 (기본값)

    - capitalize : 첫 번째 글자를 대문자로 변환

    - uppercase : 모든 글자를 대문자로 변환

    - lowercase : 모든 글자를 소문자로 변환

    - fullwidth : 모든 글자를 전각 문자로 변환

        ※ 전각 문자 : 고정 폭 영문자 너비의 2배 정도 너비의 문자

 

● white-space 속성

 - 공백 처리

 - white-space : normal | nowrap | pre | pre-line | pre-wrap

    - normal : 여러 개의 공백을 하나로 표시 (기본값)

    - nowrap : 여러 개의 공백을 하나로 표시, 영역 너비를 넘어가는 내용은 줄 바꿈 없이 계속 한 줄로 표시

    - pre : 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가는 내용은 줄 바꿈 없이 계속 한 줄로 표시

    - pre-line : 여러 개의 공백을 하나로 표시, 영역 너비를 넘어가는 내용은 자동으로 줄 바꿔 표시

    - pre-wrap : 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가는 내용은 자동으로 줄 바꿔 표시

'Front-End Study > CSS 사전' 카테고리의 다른 글

list-style 속성  (0) 2023.01.08
문단 관련 속성  (0) 2023.01.08
flex 관련 속성  (0) 2022.11.02
float 속성  (0) 2022.10.21
opacity 속성  (0) 2022.10.20