폰트
(Font)
CSS를 사용하면 웹 페이지에 나타나는 글꼴인 폰트를 다양하게 설정할 수 있다.
#CSS 글꼴 집합(font-family)
CSS에는 두 가지의 글꼴 집합이 존재한다.
- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)
속성
font-family
-
하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있다. font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들인다.
-
사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하는 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 된다.
-
글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 하고, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓는다.
font-style
- 주로 이탤릭체를 사용하기 위해 사용하며 다음 세개의 속성값을 갖는다.
- normal : 텍스트에 어떠한 스타일도 적용하지 않는다.
- italic : 텍스트를 이탤릭체로 나타낸 다.
- oblique : 텍스트를 기울인다. italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없다.
font-variant
- 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자 글꼴로 변경시킨다.
이때 영문자 중 대문자는 기존 크기 그대로 출력한다.
font-weight
-
텍스트를 얼마나 두껍게 표현할지를 설정한다.
-
사용할 수 있는 속성값에는 lighter, normal, bold, bolder등이 있고, 숫자를 입력해서 텍스트의 두께를 결정할 수도 있다.
font-size
-
텍스트의 크기를 설정한다.
-
font-size의 속성값은 절대적 크기와 상대적 크기의 방식으로 표현할 수 있다.
절대적 크기
: 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용
모든 웹 브라우저에서 같은 크기로 표현된다.상대적 크기
: 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식
사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다. -
절대적 크기 단위
-픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정 -
상대적 크기 단위
-vh & vw (vertical height & vertical width) : 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값에 맞게 사용-배수 단위(em & rem) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정
em과 rem의 차이
em : 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준
rem : html 요소의 font-size 속성 값이 기준
색상
CSS에서 색을 표현하기 위한 세가지 방법이 있다.
1. 색상 이름으로 표현
- 색상의 명칭을 입력하는것으로 표현가능하다.
<style>
.blue { color: blue; }
.green { color: green; }
.silver { color: silver; }
</style>2. RGB 색상값으로 표현
-
모니터나 스크린처럼 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
-
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.
<style>
.blue { color: rgb(0,0,255); }
.green { color: rgb(0,128,0); }
.silver { color: rgb(192,192,192); }
</style>3. 16진수 색상값으로 표현
- 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다.
즉, RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가지게 된다.
<style>
.blue { color: #0000FF; }
.green { color: #008000; }
.silver { color: #C0C0C0; }
</style>
