티스토리 뷰
폰트 설정하기
1. 폰트 종류
- Serif : Times New Roman, Times, 궁서체
- Sans-Serif : Arial, 굴림체
- Cursiv : Comic Sans Ms, Monopye Corsira
- Fantasy : Impact, Haettemsch
2. 폰트 지정하기
- 내가 가지고 있는 폰트일때
h1 {
font-family : "Times New Roman";
}
- 1순위 폰트가 없을 때 사용할 2순위 폰트 지정
h1 {
font-family : "Times New Roman","Times","Serif";
}
- 외부 폰트를 사용할 때
<head> ** <link> 요소는 현재 문서와 외부 리소스의 관계를 명시함 **
<link href="링크입력" rel="stylesheet">
</head>
h1 {
font-family : "링크입력";
}
- 폰트를 다운로드 받았을 때 CSS에서 입력시
** 다운로드 파일 이름 : Times_otf / 폰트 저장위치 : fonts **
@font-face {
src : url ("../fonts/Times_otf.otf"); ** 폰트저장위치까지 가는 경로 표시 (..은 상위 폴더로 가기위함) **
font-family : "Times"; **폰트 이름 지정 (이름을 Times 라고 지음)
}
h1 { ** h1을 꾸며준다 **
font-family : "Times";
}
3. 폰트 꾸미기
- 폰트 사이즈 font-size
| xx-large | 아주 크게 | IIIIIIIIIIIIIIIII |
| x-large | 조금 크게 | IIIIIIIIIIIIIIIII |
| large | 크게 | IIIIIIIIIIIIIIIII |
| larger | 상위요소의 폰트보다 크게 | IIIIIIIIIIIIIIIII |
| medium | 기본크기 | IIIIIIIIIIIIIIIII |
| smaller | 상위요소의 폰트보다 작게 | IIIIIIIIIIIIIIIII |
| small | 작게 | IIIIIIIIIIIIIIIII |
| x-small | 조금 작게 | IIIIIIIIIIIIIIIII |
| xx-small | 아주 작게 | IIIIIIIIIIIIIIIII |
| initial | 초기설정 폰트 크기 | IIIIIIIIIIIIIIIII |
| inherit | 상위요소의 폰트 크기 | IIIIIIIIIIIIIIIII |
- 폰트 스타일 font-style
| normal | 시스템 기본 스타일 | IIIIIIIIIIIIIIIII | underline | 밑줄 | IIIIIIIIIIIIIIIII |
| italic | 기울임 | IIIIIIIIIIIIIIIII | overline | 윗줄 | IIIIIIIIIIIIIIIII |
| oblique | 조금 더 기울임 | IIIIIIIIIIIIIIIII | line-thriugh | 가운데줄 | |
| initial | 초기 설정 스타일 | IIIIIIIIIIIIIIIII | none | 스타일 없음 | IIIIIIIIIIIIIIIII |
| inherit | 상위요소의 스타일 | IIIIIIIIIIIIIIIII |
- 폰트 두께 font-weight
| lighter | 더 얇게 | IIIIIIIIIIIIIIIII | 숫자가 클 수록 더 두꺼워 진다. 100단위로만 가능 normal 400 bold 700 |
100 | IIIIIIIIIIIIIIIII |
| light | 얇게 | IIIIIIIIIIIIIIIII | 200 | IIIIIIIIIIIIIIIII | |
| normal | 시스템 기본 스타일 | IIIIIIIIIIIIIIIII | 300 | IIIIIIIIIIIIIIIII | |
| bold | 두껍게 | IIIIIIIIIIIIIIIII | 400 | IIIIIIIIIIIIIIIII | |
| bolder | 더 두껍게 | IIIIIIIIIIIIIIIII | 500 | IIIIIIIIIIIIIIIII | |
| initial | 초기 설정 두께 | IIIIIIIIIIIIIIIII | 600 | IIIIIIIIIIIIIIIII | |
| inherit | 상위요소의 두께 | IIIIIIIIIIIIIIIII | 700 | IIIIIIIIIIIIIIIII | |
| 800 | IIIIIIIIIIIIIIIII | ||||
| 900 | IIIIIIIIIIIIIIIII |
투명도 설정하기
1. rgba()
h1 {
background-color : rgba(0,0,0,0.5);
}
**
R 레드 : 0~255
G 그린 : 0~255
B 블루 : 0~255
A 투명도 : 0.0~1.0 (값이 낮을수록 투명)
**
2. opacity
h1 {
background-color : #000;
opacity : 0.5;
}
** 투명도 : 0.0~1.0 (값이 낮을수록 투명) **
색상 설정하기
1. 색상값의 종류
- 영문으로 작성
h1 {
color : red;
}
- rgb
h1 { ** 레드, 그린, 블루 "
color : rgb(0,0,0);
}
- hsl
h1 { ** 색상, 채도, 명도 **
color : hsl(5;50%,70%);
}
- hex
h1 {
color : #000000;
}
2. CSS에서 컬러값 적용하기
- 글자색
h1 {
color : red;
}
- 배경색
h1 {
background-color : orange;
}
- 테두리색
h1 {
border-color : 4px solid balck;
}
- 요소 그림자색
h1 { ** 수평 수직 흐림 색상 **
box-shadow : 1px 1px 1px purple;
}
- 글자 그림자색
h1 { ** 수평 수직 흐림(지정안하면 0) 색상 **
text-shadow : 1px 1px blue;
}
3. HTML에서 지정할 수 있는 기본색상 17가지
| 빨간색 | Red | #FF0000 | 파란색 | Blue | #0000FF | ||
| 주황색 | Orange | #FFA500 | 남색 | Navy | #000080 | ||
| 갈색 | Maroon | #800000 | 자홍색 | Fuchsia | #FF00FF | ||
| 노란색 | Yellow | #FFFF00 | 보라색 | Purple | #800080 | ||
| 연두색 | Lime | #00FF00 | 흰색 | White | #FFFFFF | ||
| 감람색 | Olive | #808000 | 은색 | Silver | #C0C0C0 | ||
| 초록색 | Green | #008000 | 회색 | Gray | #808080 | ||
| 청록색 | Teal | #008080 | 검은색 | Black | #000000 | ||
| 하늘색 | Aqua | #00FFFF |
'Study > IT' 카테고리의 다른 글
| 웹디자인기능사 실기 공부 _ HTML 기본구문, 에밋기능 사용법, target속성값, float, overflow (0) | 2023.01.19 |
|---|---|
| 웹디자인기능사 실기 공부 _ HTML 기초, 주석 표시방법, 선택자, 임시링크 생성, 버튼 생성 (0) | 2023.01.13 |
| HTML/CSS _ 구성요소, 기본구성 (0) | 2022.12.14 |