개발자꿈나무

CSS - 텍스트 스타일 (글꼴 속성, 웹 폰트 사용, color 속성) 본문

HTML,CSS,JS

CSS - 텍스트 스타일 (글꼴 속성, 웹 폰트 사용, color 속성)

망재이 2023. 1. 3. 22:13

CH.1 글꼴 속성

1. font-style 속성

- 글자를 이탤릭체로 표시하는 속성

font-style: normal ; italic ; oblique
		/*  기본값 ; 이탤릭체 ; 이탤릭체 */

2. font-weight 속성

- 글자 굵기를 조절하는 속성

font-weight : normal ; bold ; bolder ; lighter ; 100 ~ 900 ;
        /* 기본값 ; 굵게 ; 원래보다 더 굵게 ; 원래보다 더 가늘게 ; 100~900 사이 굵기. 100 가늘게 900 굵게 */

 

CH.2 웹 폰트 사용하기

1. font-family 속성 사용하기

font-family : font ; initial ; inherit ;
	/* family-name or generic-family ; 기본값으로 설정 ; 부모 요소의 속성값 받음 ; */
  •  family-name은 글꼴 이름. 글꼴 이름에 띄어쓰기가 있으면 따옴표로 감싼다.
  • generic-family는 글꼴 유형. serif : 삐침 있는 명조 계열의 글꼴 / sans-serif : 삐침 없고 굵기가 일정한 고딕 계열의 글꼴 / monospace : 글자 폭과 간격이 일정한 글꼴 / cursive : 손으로 쓴 것 같은 필기 계열의 글꼴 / fantasy : 화려한 글꼴
  • 글꼴 설정할 때는 여러 개를 설정하는 것이 도움이 된다.
font-family: Georgia, "Times New Roman", serif;
	/* Georgia글꼴을 사용, 없으면 "Times New Roman" 사용, 없으면 명조체 */
  • 영어 / 한글 같이 사용할 때는 한글을 사용할 수 없는 글꼴 먼저 ; 한글 사용할 글꼴 ; 설정한다.
font-family: Georgia, "Malgun Gothic", serif;
<style>
      @font-face {
        font-family: 'Ostrich';  /* 폰트 이름 */
        src: local('Ostrich Sans'), 
              url('fonts/ostrich-sans-bold.woff') format('woff'), 
              url('fonts/ostrich-sans-bold.ttf') format('truetype'), 
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }
      .wfont {
        font-family:'Ostrich', sans-serif; /* 웹 폰트 지정 */
      }

2. 웹 폰트 사용하기

- 구글 폰트 사용하기

  1. https://fonts.google.com/로 접속
  2. 한글 폰트 검색
  3. Link 항목에 있는 소스 복사 & 글꼴 이름 기억
  4. 웹 문서의 <head> 사이 <style> 태그 안에 붙여넣음
  5. font-family 속성에서 웹 폰트 글꼴 이름 사용
<style>
        @import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap");

      h1 {
        font-size:60px;
        font-weight:bold; 
        font-family:'Hahmlet', serif;   
      }
</style>

/* link주소 복사해줘도 됨 */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap" rel="stylesheet">

3. color 속성

- 색상 이름 표기법

  • 잘 알려진 색상 이름으로 표시. 기본 색상 16가지
p { color: red; }

- hsl/hsla 표기법

  • color:hsl(240, 100%, 50%)처럼 세 자리의 숫자로 표시
  • 앞의 숫자부터 색상(hue), 채도(saturation), 밝기(light)의 양
  • 투명도를 조절할 때는 마지막에 알파값 추가 ex) hsla(240, 100%, 50%, 0.3)
  • 알파값은 불투명도를 나타내는 값으로 0~1 값 중에서 사용 (1은 불투명, 0은 완전 투명)

- 16진수 표기법

  • #ffffff처럼 #과 함께 6자리의 16진수로 표시
  • 앞에서부터 두 자리씩 묶어 빨강, 초록, 파랑의 양
  • 하나도 섞이지 않았을 때는 00, 가득 석였을 때는 ff로 표시
  • 000000(검은색) ~ ffffff(흰색)
  • 두 자리씩 중복될 경우 줄여 사용할 수 있음. ex) #ffff00 -> #ff0

- rgb/rgba 표기법

  • color:rgb(255, 0, 0)처럼 세 자리의 숫자로 표시
  • 앞의 숫자부터 빨강, 초록, 파랑의 양
  • 하나도 섞이지 않앗을 때는 0, 가득 섞였을 때는 255
  • 투명도를 조절할 때는 마지막에 알파값 추가 ex) hsla(240, 100%, 50%, 0.3)
  • 알파값은 불투명도를 나타내는 값으로 0~1 값 중에서 사용 (1은 불투명, 0은 완전 투명)
728x90