TIL 3 | CSS_Font Style

1. 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라는 폰트를 사용하겠다는 뜻.
  
  [font family에 여러 폰트를 나열하는 이유]
  사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열. 
  가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트임.
  

#주의
"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용.

 

2. font size

폰트의 크기를 지정 (폰트 크기 단위는 'px', 'em', 'pt'등 여러가지가 있음, 주로 'px'를 사용.)

브라우저에서는 가장 먼저 태그를 확인하고 그에 맞게 기본(default) 스타일을 적용

=> But, 해당 태그나 class, id 에 css 값이 있다면 해당 스타일을 더 우선순위로 적용.

 

3. font weight

글씨 두께를 조절하는 property.

• normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있음.
• 숫자 400과 normal은 같은 두께
• 숫자 700과 bold는 같은 두께
• 보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정
  참고 : https://www.w3schools.com/cssref/pr_font_weight.asp

 

4. font style

글씨 스타일을 바꿀 수 있음.

a {
  font-style: italic;
}

=> 글씨가 이텔릭체로 변경됨.

 

5. Color

 글씨 색깔을 변경

.pink {
  color: pink;
}
.yellow {
  color: yellow;
}

• pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정 가능.
• blue, red, deepskyblue 등 다양한 텍스트 색상이 있음.

 

[색상을 표현하는 여러가지 방법]

• hex 색상코드: 여섯자리로 표현 - #eb4639
• rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
• hsl: 색상, 채도, 명도*(hue*, saturation, *lightness)*로 표현 - hsl(4, 82%, 57%)

* 내가 원하는 색의 hex, rgb, hsl 를 알 수 있는 사이트 : https://www.color-hex.com/

아래는 모두 같은 색!!

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"라는 키워드로 검색!!