폰트(Fonts) 스타일 속성

폰트(Fonts) 스타일 속성

폰트에 영향을 주는 속성

폰트에 영향을 주는 속성으로 적용되는 모양, 크기, 굵기, 기울임 등

• font-family 모양

• font-size 크기

• font-weight 굵기

• font-style 기울임 (이탤릭체 등)

• font-variant 등.

글자 색상

글자 색상은 color 속성으로 설정.

• color keywords

  • red, gree, blue, pink, black

• hex color code (16진수 코드)

  • RRGGBB / 0 ~ 9, a ~ f 예) #1868a7, #ffffff(= #fff)

rgb, rgba

• RED, GREEN, BLUE, ALPHA(투명도)

  • 예)rgb(127,255,0), rgba(127,255,0,0.3)

  • 색상은 256가지색이 있다 (0 ~ 255)

  • 투명도: 0.0(투명) ~ 1.0(불투명)

  • rgba는 색상정보를 필요로 하는 속성에 직접 그 값을 부여할 수 있기 때문에 분리하여 사용할 수 있다.

hsl, hsla(hsl에 투명도 추가)

• HUE(색상), SATURATION(채도), LIGHTNESS(명도), ALPHA(투명도)

  • 예)hsl(360,60%,70%); , hsla(360,60%,70%,0.3);

  • HUE는 각도(deg)는 사용, 채도 및 명도는 퍼센트(%) 사용

  • 색상(0~360) : 360은 적색, 120 녹색, 240은 청색을 나타냄

  • 채도: 0%는 회색의 음영을 나타냄

  • 명도: 0%는 검정, 100% 하얀색을 나타냄

참고

• 웹브라우저는 운영체제가 지원하는 기본 폰트(웹 안전 폰트)만 화면에 렌더링 한다. (참고: cssfontstack) 즉, 사용된 폰트가 사용자 컴퓨터에 없으면 렌더링 X.

• 사용하기 전 안전한 폰트인지 확인!

[웹 안전 폰트]

Arial            [sans-serif]  고딕체
Verdana          [sans-serif]  고딕체
Courier New      [monospace]   코드체(공간이 동일)
Georgia          [serif]       명조체
Times New Roman  [serif]       명조체
Trebuchet MS     [serif]       명조체

• 비주얼 디자인 과정에서 적용 가능한 웹폰트를 사용해야 한다. 폰트 저작권에 주의!

• 구글 폰트

• 구글에 무료 웹 폰트 검색

CSS 투명도를 조절하는 속성 (opacity)

• opacity

  • 0~1 사이의 값을 가진다

  • 숫자가 높아질수록 원본에 가깝고 숫자가 낮아질수록 투명해진다.

  • opacity는 부모요소에 적용시키면 자식들에게도 모두 상속되어 자식요소에서 해제할 수 없게된다. 그래서 배경과 텍스트를 따로 분리할 수 없는 문제가 생긴다. 이때문에 opacity를 0.8이하로 낮추지 않고 사용하는 경우가 많다.

• local 속성 : 서버에서 다운받지 않고 사용자의 컴퓨터의 해당 폰트가 있으면 그 폰트를 사용해라.