HTML5 & CSS3 배워보자 (8화 : 폰트 관련 스타일)
CSS의 기본 개념을 알아본 후, 이제는 웹 문서에서 핵심적인 역할을 하는 텍스트를 다뤄보겠습니다. 텍스트는 웹 페이지를 읽고 이해하는 데 중요한 역할을 합니다. 사용자가 텍스트를 통해 정보를 습득하고 웹 페이지를 탐색합니다. 그렇기 때문에 텍스트의 스타일을 지정하는 것은 웹 문서의 전반적인 디자인과 사용자 경험을 크게 좌우하는 요소 중 하나입니다.
텍스트는 단순히 글자를 표시하는 것 이상의 역할을 합니다. 텍스트 스타일링은 사용자에게 정보를 전달하는데 있어서 매우 중요한 역할을 합니다. 이번 8화에서는 사용자가 웹 페이지의 내용을 쉽게 이해할 수 있도록 텍스트의 기초가 되는 폰트 스타일을 지정하는 방법을 살펴보겠습니다.
1.font-family 속성 - 폰트 지정
font-family 속성은 웹 문서에서 사용할 글꼴을 지정하는 데 주로 활용됩니다. 이 속성은 <body> 태그를 비롯하여 텍스트를 사용하는 다양한 요소들(<p>, <h1>, <h2>, 등)에 적용될 수 있습니다. font-family 속성은 여러 개의 글꼴을 우선순위에 따라 명시하며, 브라우저는 사용자의 운영체제에서 지원하는 첫 번째 글꼴을 사용하게 됩니다. 만약 해당 글꼴이 없을 경우, 다음에 지정된 글꼴을 찾아 사용하게 되는 방식입니다. 이런 방식으로 사용자가 웹 페이지를 볼 때 최대한 일관된 글꼴을 제공할 수 있게 됩니다.
<기본형>
font-family:<글꼴 이름>, <글꼴 이름>, <글꼴 이름>;
<예시>
p {font-family : "맑은 고딕", 돋움, 굴림;}
2.@font-face 속성 - 웹 폰트 사용
웹폰트는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴을 웹 문서에서 사용할 수 있도록 하는 기술입니다. 이를 통해 사용자 시스템에 없는 글꼴을 다운로드하고, 웹 페이지에서 해당 글꼴을 사용할 수 있게 됩니다. 이전에는 그래픽 소프트웨어를 사용하여 텍스트를 이미지로 만들어야 했지만, 웹폰트를 사용하면 이러한 불편함을 해결할 수 있습니다.
CSS3부터는 @font-face 규칙을 사용하여 웹폰트를 웹 페이지에 추가할 수 있습니다. 이렇게 하면 사용자가 웹 페이지를 방문할 때 해당 글꼴이 필요한 경우 웹 브라우저가 해당 글꼴을 다운로드하여 사용자의 시스템에 설치합니다. 그러면 웹 페이지에서 해당 글꼴을 사용할 수 있게 됩니다.
예를 들어, 다음과 같이 @font-face 규칙을 사용하여 웹폰트를 추가할 수 있습니다.
<기본형>
@font-face {
font-family : 글꼴 이름;
src : url(글꼴 파일 경로) format(파일유형);
}
<예시>
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'), /* 최신 브라우저를 위한 WOFF2 포맷 */
url('webfont.woff') format('woff'); /* 구형 브라우저를 위한 WOFF 포맷 */
}
3.font-size 속성 - 글자 크기 조절
font-size 속성을 사용하여 텍스트의 크기를 조절할 수 있습니다. 이 속성을 사용하여 텍스트의 크기를 지정할 때에는 픽셀(px), 포인트(pt)를 비롯하여 다양한 단위를 사용할 수 있습니다. 또한 백분율(%)을 사용하여 상대적인 크기를 지정할 수도 있습니다.
<기본형>
font-size : <절대크기> | <상대크기> | <크기> | <백분율>;
▶ font-size 에서 사용하는 속성 값
- 절대크기 : 브라우저에서 지정한 글자 크기. xx-small | x-small | small | medium | large | x-large | xx-large
- 상대크기 : 부모 요소의 글자 크기(font-size) 기준. larger | smaller
- 크기 : 브라우저와 상관없이 글자 크기를 직접 설정
- 백분율 : 부모 요소의 글자 크기 기준으로 해당하는 %를 계산해서 표시
▶ font-size 에서 크기 값을 지정하는 단위
- em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절
- ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기 조절
- px : 픽셀. 모니터(해상도)에 따라 상대적 크기가 됨.
- pt : 포인트. 일반 문서에서 많이 사용하는 단위
4.기타 font 관련 속성
■ font-weight 속성 - 글자의 굵기를 지정하는 데 사용됩니다. 이 속성은 텍스트를 보다 굵거나 가늘게 표시할 수 있습니다. 주로 숫자 값이나 상대적인 키워드를 사용하여 지정됩니다.
<기본형>
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | ... | 900
▶ font-weight 속성 값
- 숫자 값: 100부터 900까지의 숫자를 사용하여 굵기를 지정할 수 있습니다. 일반적으로 100부터 400은 보통 글꼴(Regular)에 해당하고, 500은 중간 정도의 굵기(Medium), 700부터 900까지는 굵은(Bold) 글꼴에 해당합니다.
- 상대적인 키워드: bold와 normal 키워드를 사용하여 굵기를 지정할 수 있습니다. bold는 텍스트를 굵게, normal은 텍스트를 보통 굵기로 지정합니다.
■ font-variant 속성 - 글자의 변형을 지정하는 데 사용됩니다. 이 속성은 주로 영문 텍스트에서 작은 대문자(소문자를 작게 변형한 형태)를 사용하는데에 쓰입니다. 이 작은 대문자는 한 줄에 들어가는 공간을 줄이기 위해 사용되거나 특정 디자인적인 요구에 따라 사용될 수 있습니다.
<기본형>
font-variant : normal | small-caps
▶ font-variant 속성의 값
- normal : 기본값으로, 글자에 어떠한 변형도 적용하지 않습니다.
- small-caps : 글자를 모두 대문자로 변형하되, 원래 대문자의 크기보다 작게 표시합니다.
■ font-style 속성 - 텍스트의 스타일을 지정하는 데 사용됩니다. 이 속성은 글자의 기울임을 설정할 때 주로 활용됩니다.
<기본형>
font-style : normal | italic | oblique
▶ font-style 속성으로 사용되는 값
- normal : 기울임을 사용하지 않음을 나타냅니다.
- italic : 텍스트를 이탤릭체로 표시합니다. 일부 글꼴에는 이탤릭체가 없을 수 있어서 브라우저가 해당 글꼴에 기울임을 적용할 수도 있습니다.
- oblique : 기울임을 사용하여 텍스트를 표시합니다. 이탤릭체와 유사하지만, 일부 글꼴에는 별도의 이탤릭체가 없을 때에 대비하여 사용됩니다.
※ 다음화에서는 "CSS3 텍스트 스타일"에 대해서 공부하겠습니다!!
https://zzangdis.tistory.com/40
HTML5 & CSS3 배워보자 (9화 : 텍스트 스타일)
9화에서는 텍스트 스타일에 대해 알아보겠습니다. 폰트와 텍스트 스타일은 비슷하지만 약간 다른 개념입니다. 폰트는 우리가 보는 글꼴을 가리키고, 텍스트 스타일은 글자와 단어들, 그리고 문
zzangdis.com
'HTML5 & CSS3' 카테고리의 다른 글
| HTML5 & CSS3 배워보자 (10화 : 문단 스타일) (0) | 2024.05.14 |
|---|---|
| HTML5 & CSS3 배워보자 (9화 : 텍스트 스타일) (0) | 2024.05.10 |
| HTML5 & CSS3 배워보자 (7화 : 캐스캐이딩 스타일 시트 우선순위) (0) | 2024.05.07 |
| HTML5 & CSS3 배워보자 (6화 : CSS 선택자) (0) | 2024.05.06 |
| HTML5 & CSS3 배워보자 (5화 : CSS 스타일 기초) (0) | 2024.05.04 |
댓글