1. font-family 속성 : 글꼴 지정하기
font-family : "글꼴 이름",...
font-family 속성을 통해서는 웹 상에 표현될 문자의 글꼴을 지정할 수 있다.
글꼴 이름의 사이에 띄어 쓰기가 있는 경우에는 반드시 큰 따옴표와 함께 표기해야 한다.
font-family : "맑은 고딕", 돋움, 굴림
또한 여러 개의 글꼴을 지정할 수 있는데
이는 맑은 고딕이 적용되지 않으면 돋움을, 돋움도 적용되지 않는다면 굴림으로 글꼴을 적용하라는 의미이다.
표준 글꼴
🔷 한글 : 굴림, 궁서, 돋움, 바탕
🔷 영어 : serif, sans-serif
하지만 이렇게 지정한 글꼴이 사용자의 컴퓨터에 설치되지 않았다면 전혀 다른 형태의 글꼴이 적용될 수도 있다.
이러한 경우를 대비하기 위해 몇 가지 방법을 사용할 수 있다.
1️⃣ 구글 웹 폰트 사용하기
구글(https://fonts.google.com)에서는 무료로 글꼴을 제공하고 있는데,
이곳의 글꼴을 사용하게 되면 별도의 다운로드 없이 사용자의 컴퓨터에서도 적용될 수 있다.
사이트에 방문하면 상단에 [language] 를 선택할 수 있는데 이곳에서 [korean] 을 선택하면 한글만 모아 볼 수 있다.
원하는 글꼴을 선택하면 다음과 같이 화면이 나타난다.
여기서 어떤 굵기의 글꼴을 적용할 것인지에 따라 오른편에 표시되는 <link> 또는 @import 값이 달라진다.
이 부분을 복사하여 <head> 영역의 <style> 태그 영역에 붙여 넣기를 하면 해당 글꼴을 사용할 준비가 어느 정도 끝난다.
마지막으로 해야 할 것은 font-family 속성의 적용이다.
이 부분을 복사해서 글꼴을 적용하고자 하는 영역에 속성 값으로 넣어주면 된다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
body {
font-family: 'Noto Serif KR', serif;
}
</style>
<body>
<div>
<h2>여기는 h2 태그 영역</h2>
<p>여기는 p 태그 영역</p>
</div>
</body>
📌 웹 폰트 사용 시의 주의 사항
웹 상에 제공된 폰트는 저작권이 있기 때문에 적용 가능한 범위를 확인하고 스타일을 적용하도록 하자.
2. font-size 속성 : 글자 크기 조절하기
font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>
font-size 속성을 사용하면 해당 영역에 사용되는 텍스트의 크기를 조절할 수 있게 된다.
위와 같이 다양한 속성 값을 사용할 수 있지만 자주 사용되는 <크기>에 대해서 좀 더 알아보자.
크기는 글씨의 값을 직접 지정하는 것으로 몇 가지 단위와 함께 쓰인다.
1️⃣ em : 해당 글꼴의 대문자 M 의 너비를 기준으로 크기를 조절한다.
2️⃣ ex : x-height 라고 하며, 해당 글꼴의 소문자 x 의 높이를 기준으로 크기를 조절한다.
3️⃣ px : pixel 이라고 하며, 모니터에 따라 상대적이다.
4️⃣ pt : point 이며, 일반 문서에서 많이 사용하는 단위이다.
px 단위는 기본적으로 폰트의 크기를 지정할 때 많이 사용되는 단위로
크기를 따로 지정하지 않으면 16px 로 기본값이 적용된다.
하지만 크기가 폰트의 크기가 고정되어 있기 때문에
같은 크기의 폰트여도 큰 화면에서는 작게, 작은 화면에서는 크게 보일수도 있다는 단점이 있다.
이로 인하여 em 단위 또한 많이 사용된다.
em 단위를 사용하게 되면 해당 영역을 감싸고 있는 부모 태그를 찾아 부모 태그의 크기를 기준으로 1em 을 잡는다.
예를 들어 <body> 태그에 <div> 가 자식으로 있고 이 곳에 텍스트를 작성하게 되면 <body> 태그의 크기를 따르게 된다.
참고로 <body> 태그는 16px 이기 때문에 별도의 부모 태그가 더 존재하지 않으면 1em 은 16px 와 값이 대등해진다.
3. font-weight 속성 : 글자 굵기 지정하기
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight 속성은 지정된 글꼴의 굵기를 조절할 수 있는 속성이다.
기본적으로 normal 속성이 사용되고 숫자로 치환하면 400 이다.
참고로 bold 속성은 700 으로 치환할 수 있다.
4. font-style 속성 : 글자 스타일 지정하기
font-style : normal | italic | oblique
font-weight 속성은 글꼴을 기울임꼴로 변형하여 사용할 수 있도록 해주는 속성이다.
기본값은 normal 이며, italic 과 oblique 모두 기울임을 표현하는 속성 값이다.
이 두 속성 값의 다른 점은 italic 은 해당 글꼴 상에 정의된 기울임꼴이 디자인 되어 있는 경우 사용되는 것이고,
oblique 는 사전 정의되지 않은 글꼴을 변형하기 위해 사용되는 값이다.
글자는 이미지가 아니기 때문에 이러한 강제된 변형에도 확대를 해도 큰 깨짐을 확인하기 어렵다.
5. font 속성 - 한 번에 표현하기
font : <font-sytyle><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar
font 속성을 사용할 때에는 한 가지 주의할 점이 있다.
바로 font-size/line-height 속성이다.
이 두 속성은 반드시 함께 써줘야 한다는 특징이 있기 때문에
글꼴의 크기를 지정하고 싶다면 줄 간격도 조정해줘야 한다.
line-height : normal | <숫자> | <크기> | <백분율> | inherit
속성 값 중 숫자와 백분율의 경우 줄 간격의 값을 지정하는 것이 아니라 글자 크기를 기준으로 지정된다.
때문에 만약 글자 크기가 24px 인 곳에 줄 간격을 숫자 2 를 줬다면,
줄 간격은 2가 아니라 24px * 2 = 48px 가 되는 것이다.
보통 줄 간격은 1.5 에서 2 배 정도가 되면 적당하다고 볼 수 있다.
'CSS' 카테고리의 다른 글
| ul, ol 목록 스타일 적용 : 불릿 변경과 삭제, 이미지로 변경, 들여 쓰기 (0) | 2022.10.19 |
|---|---|
| 텍스트의 문단 스타일 적용 : 정렬과 들여 쓰기 (0) | 2022.10.19 |
| 텍스트에 스타일 적용 : 색상, 줄, 대소문자, 그림자, 공백 (0) | 2022.10.19 |
| CSS 스타일 우선 순위 (0) | 2022.10.18 |
| <style> 적용 위치 (0) | 2022.10.17 |
