02_CSS(텍스트)

[삐돌이]

CSS 컬러

1. 색상 이름으로 표현
red, green, yellow, deepskyblue ...

2. RGB 색상값으로 표현
rgb(0~255 정수, 0~255 정수, 0~255 정수)
rgba(0~255 정수, 0~255 정수, 0~255 정수, 0~1 소수)
    -----------  ---------- ----------  --------
        red         green       blue       alpha

p { color: rgb(0, 0, 255); }    /* p요소에 글자색상을 파란색으로 적용 */
p { color: rgb(0, 0, 255, 0.5); }    /* p요소에 글자색상을 파란색으로 반투명으로 적용 */

3. 16진수 색상값으로 표현
00 ~ FF까지 범위를 가집니다.

p { color: #00FF00; } /* 녹색 */ -> { color: #0F0; }


CSS 텍스트

color
텍스트의 색상을 설정합니다. 웹페이지에서 텍스트의 기본 색상은 검정색입니다.

letter-spacing
텍스트 내에서 글자 사이의 간격을 설정합니다.

word-spacing 
텍스트 내에서 단어 사이의 간격을 설정합니다.

text-align
텍스트 수평 방향 정렬을 설정합니다. (left, right, center, justify)

text-indent
단락의 첫 줄을 들여쓰기 할지, 안 할지를 설정합니다. 웹 페이지에서 단락은 들여쓰기가 설정되어 있지 않습니다.

line-height
텍스트의 줄 간격(높이)을 설정합니다.

text-decoration
텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다. (none, underline, line-through, overline)

text-shadow
텍스트에 그림자 효과를 설정합니다.

선택자 { text-shadow: 가로거리 세로거리 번짐정도 색상; }

* 번짐정도 : 그림자가 번지는 정도를 나타냅니다. 양수값을 사용하면 그림자가 모든 방향으로 퍼져 나가고, 그림자가 크게 표시됩니다. 반대로 음수값을 사용하면 그림자가 모든 방향으로 축소되어 보입니다. 기본값은 0입니다.

text-transform
텍스트에 포함된 영문자에 대한 대소문자를 설정합니다. (uppercase, lowercase, capitalize)

font-variant
소문자를 작은 대문자, 즉 소문자 크기의 대문자로 설정합니다. (small-caps)

text-overflow
텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정합니다. (clip, ellipsis)

white-space
스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정합니다. (nowrap)

overflow
기준선을 벗어나 넘칠 경우 넘치는 값을 어떻게 처리할지 설정합니다. (hidden, visible)

font-size
텍스트의 크기를 설정합니다. 방식은 크게 2가지로 표현할 수 있습니다.

1. 절대적 크기
텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다. 절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현됩니다.

px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 나타냅니다. 고정된 크기 단위이며 크기를 조절할 수 없다는 단점이 있습니다.

2. 상대적 크기
텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기로 같이 변하는 방식입니다.

% : 백분율 단위이며 기본 크기(16px)를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다.
em : 배수 단위이며 글꼴의 기본 크기(16px)를 1em으로 놓고 그에 대한 상대적인 크기를 설정합니다. 웹 문서에서 사용되는 단위이며,  pc외 모바일 등 다른 장치에서도 크기를 조절할 수 있습니다. 1em은 pc에서 16px, 모바일에서는 12px로 표현됩니다. 부모 엘리먼트의 폰트 사이즈를 기준으로 글자 크기를 설정할 수 있습니다.
rem : em과 비슷한 속성을 가지고 있으며, 루트 엘레먼트의 폰트 사이즈를 기준으로 글자 크기를 설정합니다.