개발자꿈나무
CSS - 텍스트 스타일 (글꼴 속성, 웹 폰트 사용, color 속성) 본문
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. 웹 폰트 사용하기
- 구글 폰트 사용하기
- https://fonts.google.com/로 접속
- 한글 폰트 검색
- Link 항목에 있는 소스 복사 & 글꼴 이름 기억
- 웹 문서의 <head> 사이 <style> 태그 안에 붙여넣음
- 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
'HTML,CSS,JS' 카테고리의 다른 글
| 자바스크립트 - alert prompt confirm, 형 변환, 기본 연산자, 비교 연산자 (0) | 2023.01.04 |
|---|---|
| 자바스크립트 - 스크립트 삽입, 코드 구조, 엄격모드, 변수 상수, 자료형 (0) | 2023.01.04 |
| CSS - 스타일 시트, 선택자, 캐스케이딩 (0) | 2023.01.03 |