5-4. CSS 텍스트 관련 스타일

1. color 

웹 문서에서 문단이나 제목등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용한다. 

color : <색상>

 

1️⃣ 16진수로 표현하는 방법 : #ffff00 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법 

#RRGGBB로 RR은 빨간색 GG는 초록색, BB는 파란색을 표시하고, 각 색상마다 하나도 섞이지 않으면 00, 해당 색이 가득 섞였다면 ff이다. 

하얀색 #ffffff 검은색 #000000

 

2️⃣ hsl과 hsla로 표현하는 방법 : hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다. 이때 불투명도 alpha가 추가되면 hsla가 되는 것이다. 

빨간색 hsl (0, 100%, 50%) 

 

3️⃣ 색상을 영문명으로 표현하는 방법 : red, black, white 처럼 잘 알려진 색상이름을 사용하는 것 

 

4️⃣ rgb 와 rgba로 표현하는 방법 : CSS에서 색상을 지정할 때 가장 많이 사용하는 방법이다. 

rgb는 red, green, blue로 여기에 불투명 alpha 포함하면 rgba가 된다. 

색이 하나도 안섞이면 0, 가득 섞이면 255, 불투명도는 0~1로 표현하며 1은 완전 불투명한 것이고, 0은 투명이다. 

 

2. text-align 

text-align 속성은 문단의 텍스트 정렬 방법을 지정한다. 

 

text-align 속성값 

start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. 

end : 현재 텍스트 주르이 끝 위치에 맞추어 문단을 정렬한다. 

left : 왼쪽에 맞추어 문단을 정렬한다. 

right : 오른쪽에 맞추어 문단을 정렬한다. 

center : 가운데에 맞추어 문단을 정렬한다. 

justify : 양쪽에 맞추어 문단을 정렬한다. 

match-parent : 부모 요소에 따라 문단을 정렬한다. 

3. line-height 

line-height는 줄 간격을 조절하는 속성이다. 

 

그리고 텍스트를 세로로 정렬할 때는 

line-height 속성의 값을 height 속성의 값과 똑같이 지정해주면 된다. 

 

 

4. text-decoration 

text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시한다. 

하이퍼링크를 추가하면 원래 밑줄이 기본으로 생기는데 이를 없앨 수 있다.

none은 텍스트에 줄을 표시 안함.

underline은 밑줄을 표시함 

overline은 윗줄을 표시함.

line-through는 취소선을 표시함.

5. text-shadow

text-shadow를 사용하여 텍스트에 그림자 효과를 줄 수 있다. 

 

text-shadow 속성값 

<가로거리> : 텍스트부터 그림자까지의 가로 거리이고 필수 속성이다. 양숫값은 글자의 오른쪽으로, 음수는 그림자의 왼쪽으로 그림자를 만든다. 

<세로거리> : 텍스트부터 그림자까지의 세로 거리이고 필수 속성이다. 양숫값은 글자의 아래쪽, 음수값은 글자의 위쪽으로 그림자를 만든다. 

<번짐정도> : 그림자가 번지는 정도로 양수값을 사용하면 그림자가 모든 방향으로 퍼져 나가고, 음수값은 그림자가 모든 방향으로 축소되어 보인다. 

<색상> : 그림자 색상을 지정한다. 

 

6. text-transform 

text-transform 속성은 텍스트의 대소 문자를 원하는대로 바꿔준다. 

 

text-transform 속성

none :  줄을 표시하지않는다. 

capitalize : 첫번째 글자를 대문자로 변환한다. 

uppercase : 모든 글자를 대문자로 변환한다.

lowercase : 모든 글자를 소문자로 변환한다. 

full-width : 가능한 한 모든 문자를 전각 문자로 변환한다. 

 

 

7. letter-spacing, word-spacing 

letter-spacing 은 글자와 글자사이의 간격을 조절한다.

word-spacing 은 단어와 단어사이의 간격을 조절한다. 

CSS에선 letter-spacing을 더 많이 사용한다.

px,em 단위나 퍼센트 단위로 조절한다.