CSS 문자 관련 스타일을 알아보자!
css
웹 페이지에서 텍스트는 단순한 정보 전달 수단을 넘어 디자인의 핵심 요소 중 하나입니다.
적절히 스타일링된 텍스트는 사용자 경험을 극대화하고, 메시지 전달력을 강화합니다.
CSS에서 제공하는 다양한 속성을 통해 텍스트 스타일링의 가능성은 무궁무진합니다.
이번 포스트에서는 CSS의 문자 관련 스타일에 대해 자세히 살펴보고, 각 속성의 용도와 사용 방법을 알아봅니다.
목차
문자 관련 스타일
- font-family
- font-size, 단위의 고찰
- font-weight
- font-style
- font-variant
- line-height
- font
- 웹폰트
- color, 색상 코드 고찰
- letter-spacing, word-spacing
- text-decoration
- text-transform
- text-shadow
01) font-family
문자의 글꼴을 지정하는 속성 입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정 할 수 있습니다
-예제 1)
1
font-family: '돋움', Dotum, Arial, Helvetica, sans-serif;
-예제 2)
1
2
3
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
이 코드는 브라우저에게 “Helvetica Neue”를 우선적으로 사용하되, 해당 글꼴이 사용자의 시스템에 없을 경우 Helvetica, Arial 순으로 대체 글꼴을 찾아 사용하라는 지시를 내립니다.
02) font-size, 단위의 고찰
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
CSS에서 유용하게 사용하는 단위에서 다음과 같은 것들이 있습니다.
❗️ 상대 단위인 em과 rem은 반응형 디자인에서 유용하게 활용됩니다.
- px
해상도에 따라 상대적으로 다라지는 기본 단위로서, 다음과 같이 표현합니다.
1
font-size : 12px;
- %
부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다.
1
font-size : 150%;
- em
부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의 1 단위로서, 다음과 같이 표현합니다
1
font-size : 1.5em;
특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px (16px x 1.5 = 24px) 이 됩니다.
만약 부모 요소가 10px이었다면 1.5em은 15px이 될 것 입니다.
- rem
rem은 em과 비슷하지만 부모, 요소가 아닌 최상위 요소 의 크기를 100% 기준으로 계산합니다.
rem의 r은 root 즉, html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
1
font-size : 1.5rem;
#### em과 rem 특성의 차이점 —
| 특성 | em | rem |
|---|---|---|
| 상속의 영향 | 부모 요소의 폰트 크기에 상대적 | 루트 요소의 폰트 크기에 상대적 |
| 복잡도 | 계산이 부모 요소의 폰트 크기에 의존하여 복잡 | 계산이 루트 요소의 폰트 크기에 의존하여 단순 |
| 사용 사례 | 텍스트 요소나 폰트 아이콘 등 상대적 크기 조절 | 페이지 전체의 레이아웃 크기 설정 |
- vw, vh
vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이값의 100분의 1 단위이며, 다음과 같이 표현 합니다.1
font-size : 10vw;
위 예문은 글자 크기가 뷰포트 너비의 10% 크기라는 의미입니다.
03) font-weight
font-weight 속성을 통해 텍스트의 굵기를 조절할 수 있습니다.
가장 흔히 사용되는 값은 normal과 bold이지만, 100에서 900 사이의 숫자를 이용해 더 세밀한 굵기 조절이 가능합니다.
| 값 | 설명 |
|---|---|
normal | 기본 폰트 굵기를 나타냅니다. 보통 400에 해당하며, 일반적으로 보통체로 표시됩니다. |
bold | 굵은 폰트 굵기를 나타냅니다. 보통 700에 해당하며, 두꺼운 폰트로 표시됩니다. |
lighter | 부모 요소의 폰트 굵기보다 더 가벼운 폰트로 표시합니다. 부모 요소가 굵기를 가진 경우 더 얇게 표시될 수 있습니다. |
bolder | 부모 요소의 폰트 굵기보다 더 굵은 폰트로 표시합니다. 부모 요소가 보통체를 사용하고 있다면 더 굵게 표시될 수 있습니다. |
| 숫자 값 | 폰트 굵기를 숫자 값으로 직접 지정합니다. 일반적으로 100부터 900까지의 값 중 하나를 선택하여 사용합니다. |
04) font-style
이탤릭체나 기울임꼴 등 텍스트의 스타일을 정의하는 속성입니다. 주로 강조하고 싶은 텍스트에 사용됩니다.
| 값 | 설명 |
|---|---|
normal | 일반적인 텍스트 스타일입니다. 이탤릭체나 기울임이 없습니다. |
italic | 텍스트가 이탤릭체로 표시됩니다. 보통 글자를 오른쪽으로 약간 기울여서 나타납니다. |
oblique | 텍스트가 이탤릭체와 비슷한 스타일로 표시됩니다. 이탤릭체와 유사하지만 별도의 폰트 파일이 없는 경우 기울임으로 대체됩니다. |
initial | 기본 값으로 설정되어 있습니다. |
inherit | 부모 요소로부터 font-style 속성을 상속받습니다. |
05) font-variant
font-variant 속성은 텍스트 중 소문자를 변형하는 데 사용됩니다. 예를 들어, small-caps 값은 소문자를 작은 대문자로 표시합니다.
| 값 | 설명 |
|---|---|
| normal | 텍스트에 어떤 변형도 적용하지 않습니다. |
| small-caps | 텍스트를 작은 대문자로 표시합니다. 대문자는 원래 크기이며, 소문자는 더 작은 크기로 표시됩니다. |
| all-small-caps | 모든 글자를 작은 대문자로 표시합니다. 대문자와 소문자 모두 원래 크기의 작은 대문자로 표시됩니다. |
| inherit | 부모 요소의 font-variant 속성 값을 상속합니다. |
| initial | 기본값으로 설정합니다. |
06) line-height
line-height 속성은 텍스트 줄 간격을 조절합니다. 단위를 사용하여 픽셀(px)이나 비율(%)로 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| normal | 브라우저가 텍스트의 기본 높이를 자동으로 설정합니다. |
| 숫자 값 | 텍스트의 줄 높이를 폰트 크기의 배수로 설정합니다. |
| 길이 값 | 텍스트의 줄 높이를 고정된 길이로 설정합니다. |
| 백분율 값 | 텍스트의 줄 높이를 폰트 크기의 백분율로 설정합니다. |
| 상속(inherit) | 부모 요소로부터 line-height 값을 상속합니다. |
예제 )
1. 기본 값으로 설정:
이 문장은 기본 높이로 설정된 줄 간격을 가집니다.
1
<p style="line-height: normal;">이 문장은 기본 높이로 설정된 줄 간격을 가집니다.</p>
2. 폰트 크기의 배수로 설정:
이 문장은 폰트 크기의 1.5배만큼의 줄 간격을 가집니다.
1
<p style="font-size: 16px; line-height: 1.5;">이 문장은 폰트 크기의 1.5배만큼의 줄 간격을 가집니다.</p>
3. 고정된 길이로 설정:
이 문장은 24px의 고정된 줄 간격을 가집니다.
1
<p style="line-height: 24px;">이 문장은 24px의 고정된 줄 간격을 가집니다.</p>
4. 폰트 크기의 백분율로 설정:
이 문장은 폰트 크기의 150%만큼의 줄 간격을 가집니다.
1
<p style="font-size: 14px; line-height: 150%;">이 문장은 폰트 크기의 150%만큼의 줄 간격을 가집니다.</p>
07) font
font 속성은 font-family, font-size, font-weight, font-style, line-height를 한 번에 설정할 수 있습니다.
‘font-‘ 로 시작하는 속성들은 line-height 와 함께 ‘font: ~’ 한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다!
1
font:[font-weight,font-style,font-varian][font size/line-height][font-family];
1
body {font: 12px/1.4 '굴림', Gulim; }
| 맞는 예 | 틀린 예 |
|---|---|
| font: 12px Times | font: bold 12px/1.5; (글꼴을 쓰지 않았음) |
| font: 12px/1.5 bold Times: (bold를 맨 앞에 써야함) |
08) 웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수도 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다. 웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.
웹폰트를 사용하는 방법은 크게 두 가지로 나눌 수 있습니다: CSS를 통한 직접 포함 방법과 외부 서비스를 통한 포함 방법입니다.
CSS를 통한 직접 포함 방법:
- 원하는 웹폰트의 CSS 링크를 <head> 태그 내에 추가합니다.
- 해당 웹폰트를 CSS에서 지정하여 원하는 요소에 적용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹폰트 사용 예제</title>
<!-- 직접 웹폰트 CSS 링크 추가 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<style>
/* CSS에서 웹폰트 적용 */
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Hello, Web Fonts!</h1>
<p>이것은 웹폰트를 사용하는 예제입니다.</p>
</body>
</html>
외부 서비스를 통한 포함 방법:
- 외부 서비스(예: Google Fonts)에서 제공하는 API를 이용하여 웹폰트를 불러옵니다.
- 외부 서비스에서 제공하는 코드를 HTML 파일의 <head> 태그 내에 추가합니다.
- 해당 웹폰트를 CSS에서 지정하여 원하는 요소에 적용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹폰트 사용 예제</title>
<!-- Google Fonts API 코드 추가 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<style>
/* CSS에서 웹폰트 적용 */
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Hello, Web Fonts!</h1>
<p>이것은 웹폰트를 사용하는 예제입니다.</p>
</body>
</html>
09) color, 색상 코드 고찰
color 속성은 텍스트의 색상을 지정합니다. 색상은 키워드, RGB, HEX 등 다양한 형식으로 지정할 수 있습니다
글의 색상을 지정하는 속성으로 다음과 같이 표현합니다.
1
color : blue;
CSS의 색상은 글자색 (color) 뿐 아니라 배경색 (background), 테두리색 (border) 등 다양한 CSS 속성들에 적용됩니다.
| 값 | 설명 | 예시 |
|---|---|---|
| 이름 | 사전에 정의된 색상 이름을 사용하여 색상을 지정합니다. | red, blue, green |
| HEX 코드 | 16진수 코드를 사용하여 색상을 지정합니다. | #ff0000, #00ff00 |
| RGB 값 | 빨간색, 초록색 및 파란색의 값을 사용하여 색상을 지정합니다. | rgb(255, 0, 0) |
| RGBA 값 | RGB 값에 투명도를 추가하여 색상을 지정합니다. | rgba(255, 0, 0, 0.5) |
| HSL 값 | 색상, 채도 및 명도를 사용하여 색상을 지정합니다. | hsl(0, 100%, 50%) |
| HSLA 값 | HSL 값에 투명도를 추가하여 색상을 지정합니다. | hsla(0, 100%, 50%, 0.5) |
* 색상명
해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, blue, aqua, corel, … 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다.
[https://www.w3schools.com/] 에 접속하여
Learn Colors > Color Names 를 클릭하면 색상명을 확인할 수 있습니다.
* HEX값
HEX 값은 컬러를 나타내는데 사용되는 16진수 코드입니다. 이것은 컬러를 표현할 때 RGB(빨강, 초록, 파랑) 색상 모델을 사용하는데, 각각의 색상 채널(빨강, 초록, 파랑)을 16진수로 표현합니다.
HEX 값은 #으로 시작하며, 일반적으로 6자리의 숫자로 표현됩니다. 각 2자리는 빨강, 초록, 파랑의 채널을 나타냅니다. 예를 들어, #FF0000은 빨강을 나타내고, #00FF00은 초록을 나타내며, #0000FF는 파랑을 나타냅니다.
또한, 각 채널은 00에서 FF까지의 범위를 가지며, 00은 해당 색상의 최소 강도(투명도), FF는 최대 강도(불투명도)를 나타냅니다.
| HEX 값 | 빨강(R) | 초록(G) | 파랑(B) | 설명 |
|---|---|---|---|---|
| #000000 | 0 | 0 | 0 | 검정색 (Black) |
| #FFFFFF | 255 | 255 | 255 | 흰색 (White) |
| #FF0000 | 255 | 0 | 0 | 빨간색 (Red) |
| #00FF00 | 0 | 255 | 0 | 초록색 (Green) |
| #0000FF | 0 | 0 | 255 | 파란색 (Blue) |
| #FFFF00 | 255 | 255 | 0 | 노란색 (Yellow) |
| #FF00FF | 255 | 0 | 255 | 자홍색 (Magenta) |
| #00FFFF | 0 | 255 | 255 | 청록색 (Cyan) |
| #808080 | 128 | 128 | 128 | 회색 (Gray) 또는 중간색 (Midgray) |
| #800000 | 128 | 0 | 0 | 어두운 빨간색 (Maroon) |
| #008000 | 0 | 128 | 0 | 어두운 초록색 (Dark Green) |
| #000080 | 0 | 0 | 128 | 어두운 파란색 (Navy) |
HEX 값으로 색상 속성을 부여한 예
| 속성 값 | 속성 설명 |
|---|---|
| color: #abcdef; | 글자를 red:ab, green:cd, blue:ef 색상으로 표현 |
* RGB 값
RGB 값은 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 채널을 사용하여 색상을 나타내는 방식입니다. 이것은 컬러를 표현하는 데에 가장 일반적으로 사용되는 방법 중 하나입니다.
각각의 RGB 값은 0부터 255까지의 범위를 가지며, 색상 채널의 강도를 나타냅니다. 즉, 0은 해당 색상의 최소 강도(투명도)를 나타내고, 255는 해당 색상의 최대 강도(불투명도)를 나타냅니다.
| 빨강(R) | 초록(G) | 파랑(B) | 색상 | RGB 값 |
|---|---|---|---|---|
| 255 | 0 | 0 | 빨간색 | rgb(255, 0, 0) |
| 0 | 255 | 0 | 초록색 | rgb(0, 255, 0) |
| 0 | 0 | 255 | 파란색 | rgb(0, 0, 255) |
| 255 | 255 | 0 | 노란색 | rgb(255, 255, 0) |
| 255 | 0 | 255 | 자홍색 | rgb(255, 0, 255) |
| 0 | 255 | 255 | 청록색 | rgb(0, 255, 255) |
| 128 | 128 | 128 | 회색 | rgb(128, 128, 128) |
| 192 | 192 | 192 | 중간 회색 | rgb(192, 192, 192) |
| 0 | 0 | 0 | 검은색 | rgb(0, 0, 0) |
| 255 | 255 | 255 | 흰색 | rgb(255, 255, 255) |
RGB 값으로 색상 속성을 부여한 예
| 속성 값 | 속성 설명 |
|---|---|
| color: rgb(255,128,0) | 글자를 red:255, green:128, blue:0 색상으로 표현 |
* HSL 값
HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 세 가지 요소로 색상을 정의하는 색상 모델입니다. 이것은 RGB 색상 모델보다 직관적이며 인간이 색상을 인식하는 방식에 더 가깝습니다.
색상(Hue): 색상 원을 따라 0°부터 360°까지의 각도로 표현됩니다. 0°와 360°는 빨간색을 나타내며, 120°는 녹색을 나타내고, 240°는 파란색을 나타냅니다. 채도(Saturation): 채도는 색상의 강도나 순도를 나타냅니다. 0%는 회색 음영이며, 100%는 최대 순도를 가진 원색입니다. 명도(Lightness): 명도는 색상의 밝기를 나타냅니다. 0%는 검은색이며, 100%는 흰색입니다. HSL은 웹 디자인에서 색상을 선택하고 조정하는 데에 유용하며, 색상을 더 직관적이고 조작하기 쉽게 만듭니다.
HSL 값으로 색상 속성을 부여한 예
| 속성 값 | 속성 설명 |
|---|---|
| color: HSL(300,100%,50%) | 글자를 hue:300도, 채도:100%, 명도:50%로 표현 |
* RGBA 값
RGBA 값은 RGB 값에 투명도(Alpha)를 추가한 것입니다. RGB는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 색상 채널을 사용하여 색상을 표현하는 반면, RGBA는 이 세 가지 색상 채널에 더하여 투명도를 나타내는 Alpha 채널을 추가합니다.
R (빨강), G (초록), B (파랑): 각각의 색상 채널은 0부터 255까지의 값을 가집니다. 0은 해당 색상의 최소 강도(투명도)를 나타내고, 255는 해당 색상의 최대 강도(불투명도)를 나타냅니다. A (투명도): 투명도 채널은 0부터 1까지의 값을 가집니다. 0은 완전히 투명(투명도 없음)을 나타내고, 1은 완전히 불투명(불투명도 100%)을 나타냅니다.
| 값 | 빨강(R) | 초록(G) | 파랑(B) | 투명도(A) | 예시 |
|---|---|---|---|---|---|
| rgba(0, 0, 0, 0) | 0 | 0 | 0 | 0 | 완전히 투명 (검은색) |
| rgba(255, 255, 255, 1) | 255 | 255 | 255 | 1 | 완전히 불투명 (흰색) |
| rgba(255, 0, 0, 0.5) | 255 | 0 | 0 | 0.5 | 반투명 빨간색 |
| rgba(0, 255, 0, 0.25) | 0 | 255 | 0 | 0.25 | 반투명 초록색 |
| rgba(0, 0, 255, 0.75) | 0 | 0 | 255 | 0.75 | 반투명 파란색 |
* HSLA 값
HSLA는 Hue(색상), Saturation(채도), Lightness(명도), Alpha(투명도)의 네 가지 요소를 사용하여 색상을 정의하는 방식입니다. HSLA는 HSL 모델과 유사하지만, 투명도를 추가하여 반투명 색상을 만들 수 있습니다.
색상(Hue): 0°부터 360°까지의 각도로 색상을 표현합니다. 0°와 360°는 빨간색을 나타내고, 120°는 녹색을 나타내며, 240°는 파란색을 나타냅니다.
채도(Saturation): 채도는 색상의 강도나 순도를 나타냅니다. 0%는 회색 음영이며, 100%는 최대 순도를 가진 원색입니다.
명도(Lightness): 명도는 색상의 밝기를 나타냅니다. 0%는 검은색이며, 100%는 흰색입니다.
투명도(Alpha): 투명도는 0에서 1까지의 값으로, 0은 완전히 투명(투명도 없음)을 나타내고, 1은 완전히 불투명(불투명도 100%)을 나타냅니다.
| 값 | 색상(H) | 채도(S) | 명도(L) | 투명도(A) | 예시 |
|---|---|---|---|---|---|
| hsla(0, 100%, 50%, 1) | 0 | 100% | 50% | 1 | 완전히 불투명한 빨간색 |
| hsla(120, 100%, 50%, 0.5) | 120 | 100% | 50% | 0.5 | 반투명한 녹색 |
| hsla(240, 100%, 50%, 0.25) | 240 | 100% | 50% | 0.25 | 반투명한 파란색 |
| hsla(0, 0%, 0%, 0) | 0 | 0% | 0% | 0 | 완전히 투명한 검은색 |
| hsla(360, 0%, 100%, 0.75) | 360 | 0% | 100% | 0.75 | 반투명한 흰색 |
10) letter-spacing, word-spacing
letter-spacing는 글자 사이의 간격을, word-spacing은 단어 사이의 간격을 지정합니다.
letter-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
1
letter-spacing : -1px
11) text-decoration
text-decoration은 텍스트의 장식(Decoration)을 지정하는 CSS 속성입니다. 이 속성은 텍스트에 밑줄, 줄 긋기, 글자 위로 덧대는 효과 등을 적용할 수 있습니다. 특히 링크를 나타낼 때 많이 사용되며, 하이퍼링크의 시각적인 표시를 변경하는 데 유용합니다.
| 값 | 설명 |
|---|---|
| none | 어떤 장식도 사용하지 않습니다. |
| underline | 텍스트에 밑줄을 그립니다. |
| overline | 텍스트 위에 줄을 그립니다. |
| line-through | 텍스트 중앙에 가로선을 그립니다. |
| blink | 텍스트를 깜박거리도록 만듭니다. (표준에는 포함되지 않습니다) |
| inherit | 부모 요소의 속성 값을 상속합니다. |
| initial | 기본값으로 설정합니다. |
12) text-transform
text-transform은 텍스트의 대소문자 변환을 지정하는 CSS 속성입니다. 이 속성을 사용하여 텍스트를 대문자로 변환하거나 소문자로 변환하거나, 단어의 첫 글자를 대문자로 변환할 수 있습니다.
| 값 | 설명 |
|---|---|
| none | 어떤 변환도 적용하지 않습니다. |
| capitalize | 각 단어의 첫 글자를 대문자로 변환합니다. |
| uppercase | 모든 글자를 대문자로 변환합니다. |
| lowercase | 모든 글자를 소문자로 변환합니다. |
| inherit | 부모 요소의 속성 값을 상속합니다. |
| initial | 기본값으로 설정합니다. |
13) text-shadow
text-shadow 속성은 텍스트에 그림자 효과를 추가합니다. 그림자의 위치, 블러 효과, 그림자 색상을 조절할 수 있습니다.
text-shadow 속성은 다음과 같은 구문을 가집니다:
1
text-shadow: h-shadow v-shadow blur-radius color;
| 값 | 설명 | |—————|——————————————————-| | h-shadow | 그림자의 수평 위치를 지정합니다. | | v-shadow | 그림자의 수직 위치를 지정합니다. | | blur-radius | 그림자의 흐림 정도를 지정합니다. (선택사항) | | color | 그림자의 색상을 지정합니다. |