[CSS] 다양한 텍스트 스타일 속성
웹에서 텍스트를 스타일하기 위해 사용되는 CSS 속성이 많습니다.
1. color: 색상
텍스트 색상을 지정하는 데 사용합니다. color 속성으로 4가지 지정 방법이 있습니다.
1) 키워드 사용
red, blue처럼 명명된 키워드를 입력하면 됩니다.
2) 16진수 표기법
#ff0000같은 색상 코드를 입력하면 됩니다.
각 값들이 2번씩 반복된다면 생략이 가능합니다.
예시: #ffffff > #fff, #ff0000 > #f00, #ffaa00 > #fa0
3) RGB 색상 함수
rgb 값을 10진수 형식으로 표기하면 됩니다.
예시: rgb(100,255,0)
색상 범위는 0~255이며 쉼표로 구분합니다.
rgba로 투명도까지 조절이 가능합니다. a는 알파채널(alpha channel)이며 투명도를 의미합니다. 투명도 범위는 0에서 1사이 값을 지정합니다. (0: 가장 투명함 / 1: 가장 불투명함)
예시: rgba(100,255,0,0.8)
4) HSL 색상 함수
Hue, Saturation, Lightness의 약자로 색조, 채도, 명도를 의미합니다. Hue는 색상환의 각도(0~360도 / 0: red / 120: green / 240: blue), Saturation은 백분율(0%: 채도 없음 / 100%: 가장 높은 채도), Lightness(0%: 가장 어두움 / 100%: 가장 밝음)는 백분율로 표현하면 됩니다. rgba처럼 hsla로 투명도 조절이 가능합니다.
예시: hsl(0, 0%, 90%) / hsla(120, 100%, 60%, 0.9)
See the Pen CSS color by 백승현 (@seunghyun020907) on CodePen.
2. text-decoration: 텍스트에 줄 추가 / 제거
텍스트에 꾸밈 효과를 넣을 수 있습니다. 들어갈 수 있는 값은 다음과 같습니다.
underline(밑줄), line-through(중간줄), overline(윗줄), none(줄 제거)
See the Pen CSS text-decoration by 백승현 (@seunghyun020907) on CodePen.
3. font-size: 텍스트 크기
글자의 크기 값을 조절할 수 있습니다. 들어갈 수 있는 값의 단위로 px, pt, em, rem 등이 있습니다.
px나 pt는 절대 단위, rem이나 em은 상대 단위로 상대 단위를 사용하면 반응형 디자인에 적합합니다. 절대 단위는 항상 고정된 값을 나타내지만, 상대 단위는 사용자가 크기 변경을 할 수 있음을 의미합니다.
em과 rem의 공통점
CSS font-size 속성 값에 비례해 결정됩니다. font-size: 10px일 경우,
- 0.5em = 10px * 0.5 = 5px
- 1em = 10px * 1 = 10px
- 3em = 10px * 3 = 30px
em과 rem의 차이점
속성 값이 어디에 있는지에 따라 차이가 발생합니다.
em
속성이 정의되지 않은 경우, 상위 요소의 글자 크기가 상속됩니다. 속성이 정의가 됐다면 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다. 따라서 em을 사용할 때는 font-size가 html 요소부터 시작해 여러 상위 요소들을 거치며 상속될 수 있습니다.
rem
최상위요소(html)한테만 글자 크기가 상속됩니다. HTML 문서에서는 최상위 요소가 <html>이므로 html 요소의 font-size 속성 값이 기준이 됩니다.
See the Pen CSS font-size by 백승현 (@seunghyun020907) on CodePen.
4. font-weight: 텍스트 굵기
값을 입력해 글자 굵기를 조정할 수 있습니다. 100~900 사이 숫자 값을 입력할 수도 있고, bold처럼 키워드를 입력해도 됩니다. 주의할 점은 해당 텍스트 굵기를 지원하지 않는 글꼴이라면 적용이 안 되거나 부자연스러워질 수 있습니다.
(100~300 가늘게, 400~600 중간, 700~900 굵게 / normal, bold, lighter... 등 )
See the Pen CSS font-weight by 백승현 (@seunghyun020907) on CodePen.
5. font-family: 텍스트 글꼴
텍스트의 글꼴 또는 서체를 변경할 수 있습니다. 속성값으로는 사용자 컴퓨터에 미리 설치된 시스템 폰트 혹은 웹에서 다운로드를 받아 적용 가능한 웹폰트를 사용하면 됩니다. 또는 initial(기본값으로 설정), inherit(부모 요소의 속성값을 상속받음)을 입력할 수도 있습니다.
참고로 웹폰트를 사용하면 다운로드가 되지 않는 환경을 대비하여 기본 글꼴 유형(generic-family)을 추가해서 명시해주면 좋습니다.
('글꼴1', '글꼴2', 글꼴유형;처럼 입력하면 글꼴1이 적용이 되지 않으면 글꼴2, 글꼴2가 적용이 되지 않으면 글꼴유형이 적용이 됩니다.)
generic-family 유형은 다음과 같습니다.
- serif: 삐침 있는 명조
- sans-serif: 삐침 없는 고딕
- monospace: 글자 폭과 간격이 일정한 글꼴
- cursive: 필기 계열의 글꼴
- fantasy: 화려한 글꼴
너무 다양한 폰트를 사용한다면 웹폰트 다운로드 시간이 오래 걸릴 수도 있으며, 하나의 웹 사이트에 여러 웹폰트가 존재한다면 디자인의 일관성이 떨어질 수 있습니다.
See the Pen CSS font-family by 백승현 (@seunghyun020907) on CodePen.
6. line-height: 줄 간격
행의 높이를 설정할 수 있습니다. px나 em 등의 단위를 사용하며 단위 없이 숫자로도 설정이 가능합니다. 숫자 입력 시 현재 font-size 값 기준으로 상대값이 적용됩니다. (font-size: 10px; line-height: 2 > line-height의 값은 10*2=20px로 설정됨)
See the Pen CSS line-height by 백승현 (@seunghyun020907) on CodePen.
7. 문단 속성: text-align, letter-spacing, word-spacing
text-align: 정렬(center, left, right)
letter-spacing: 자간 설정 (숫자 입력 *px, %...)
word-spacing: 문자와 문자 간의 간격 설정 (숫자 입력 *px %...)
8. font-style: 텍스트 스타일
기울기체(italic)처럼 텍스트 스타일을 설정할 수 있습니다.
italic, oblique 등 값이 들어갈 수 있으며 font-weight처럼 글꼴이 해당 스타일을 지원하지 않으면 브라우저에서 임의로 효과를 내줍니다.
See the Pen CSS text-align, letter-spacing, word-spacing, font-style by 백승현 (@seunghyun020907) on CodePen.
9. text-transform: 텍스트 변형
텍스트의 대소문자를 바로 변환시킬 수 있습니다. 들어갈 수 있는 값은 다음과 같습니다.
lowercase: 전부 소문자로 변환
uppercase: 전부 대문자로 변환
none: 그대로(기본값)
capitalize: 첫번째 글자만 대문자로
inherit: 부모 요소의 속성 값 상속
See the Pen CSS text-transform by 백승현 (@seunghyun020907) on CodePen.