05-1. Font Style
05-1-1. font family
font-family는 폰트 스타일을 지정하는 속성입니다.
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,
- 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
- Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
- 이것도 지원되지 않으면 Times을 적용
- 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
주의) "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다. 가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.
05-1-2. font size
.big-size-font {
font-size: 50px;
}font-size 는 폰트의 크기를 지정해 줍니다. 폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있습니다.
h1~h5 태그는 heading(제목)을 주로 작성하는 태그입니다. 1에서 5로 숫자가 커질수록 글씨크기가 점점 작아집니다. 하지만 css에서 폰트크기를 바꿀 수 있습니다.
h1 {
font-size: 30px;
}
.big-size-font {
font-size: 50px;
}원래 <h1>가 글씨크기는 <h4>보다 커야하는데, 결과는 그렇지 않습니다. <h1> 태그에는 30px이고, <h4>태그에 적용된 big-size-font 클래스는 50px이기에, <h4>태그의 글씨가 더 커지게 되었습니다. 브라우저에서는 가장 먼저 태그를 확인하고, 그에 맞게 기본(default) 스타일을 적용합니다.
해당 태그나 class, id에 css 값이 있다면 해당 스타일을 더 우선순위로 적용하게 됩니다.
05-1-3. font weight
.bold-font {
font-weight: bold;
}font-weight 는 글씨 두께를 조절하는 property입니다.
- normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
- 숫자 400과 normal은 같은 두께입니다.
- 숫자 700과 bold는 같은 두께입니다.
- 보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.
- 참고링크) https://www.w3schools.com/cssref/pr_font_weight.asp
05-1-4. font style
a {
font-style: italic;
}font-style 을 이용하여 글씨 스타일을 바꿀 수 있습니다. italic이라는 값을 지정하면 이탤릭체로 변하게 됩니다.
05-1-5. color
.pink {
color:pink;}
.yellow {
color:yellow;}color라는 property는 글씨 색깔을 변경해줍니다.
- pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있습니다.
- blue, red, deepskyblue 등 다양한 텍스트 색상이 있습니다.
색상을 표현하는 방법에는 여러가지가 있습니다.
- hex 색상코드: 여섯자리로 표현 - #eb4639
- rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
- hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
아래 세가지는 모두 같은 색입니다.
h1 {
color:#eb4639;}
h1 {
color:rgb(235, 70, 57);}
h1 {
color:hsl(4, 82%, 57%);}물론 개발자가 모든 값을 기억하고 있을 수 없습니다. 구글에서 "color picker"라고 치거나, "color picker hex color"등의 키워드로 검색하면, 내가 원하는 색상을 뽑아주는 여러 앱들이 있습니다. 만약 hex 표현에서 rgb 표현으로 바꾸고 싶다면 google에 "color hex to rgb"라는 키워드로 검색해서 찾아보시면 됩니다.
참고링크) https://imagecolorpicker.com/
출처 : wecode
