★ 텍스트
- 텍스트 색상, 전면 색상
/* 텍스트 색상, 전경색(Fore Color)*/
color : blue;
/* color : #444; */- 텍스트 정렬(가로 정렬)
- 왼쪽, 오른쪽, 중앙
text-align: left;- 텍스트 크기
/* 텍스트 크기 */
/* 권장 크기 : 10pt ~ 11pt */
font-size : 12pt;
/* 권장 크기 : 12px ~ 16px */
font-size : 12px;
/* 권장 크기 : 1em~1.5em*/
font-size : 1em; /* 배율로 따져서 커짐 */
/* 권장 크기 : 1rem~1.5rem */
font-size : 1rem; /* 배율로 따져서 커짐 */- 수치 표현
/*
폰트
- 그림X
- 벡터 > 공식(O)
HTML 수치 표현
1. 숫자 > px, 문자수, 셀병합크기
2. 숫자%
CSS 수치 표현
1. pt > 포인트(글꼴), 절대 값, 1/72인치
2. px > 픽셀(크기, 위치, 여백, 글꼴 등), 절대값
3. em > 기본 글꼴 크기를 기준으로 하는 상대 크기(%), 상대값, 알파벳 대문자 M의 높이를 100% 기준으로 하는 상대 크기. 상속을 받음
4. rem > em과 동일. 상속을 안받음
5. % > 백분율(크기, 여백, 위치, 정렬 등..) 상대값. 부모를 기준
-------------------------- 상위 5개는 자주 사용-------------------------------------------
6. ex > 알파벳 소문자 x의 높이를 100% 기준. 상대값
7. mm > 밀리미터
8. cm > 센티미터
9. in > 인치
10. 기타 등등
*/- 상속 계단식
- 부모 div에 색상을 넣으면 자식 div도 상속되어 변경되는 것을 볼 수 있습니다.
- 모든 속성이 상속되는 것은 아닙니다. 일부 속성만 상속됩니다. (텍스트 관련만 상속됨)
<h2>CSS > C(Cascading)</h2>
<div>
할아버지
<div style="color:blue">
아버지
<div>나</div>
아버지
</div>
할아버지
</div>
/* 자식에다가도 선언한 경우는 자식이 이겨서 자식의 폰트가 적용됨 */
<div>
할아버지
<div style="font-size: 30pt">
아버지
<div style="font-size: 40pt">나</div>
아버지
</div>
할아버지
</div>
/* em을 사용하여 적용한 경우, 자식의 em은 아버지의 em을 받고, 자신의 em도 받아 더 커진다. */
<div>
할아버지
<div style="font-size: 2em">
아버지
<div style="font-size: 2em">나</div>
아버지
</div>
할아버지
</div>- 줄 간격
/*
줄간격
- %, em(rem)
- 권장 : 140% ~ 180%
- 권장 : 1.4em ~ 1.6em
*/
line-height: 200%;- 스타일(이탤릭체, 보통체, 사면체)
/* 스타일 */
font-style : italic;- 두께(보통, 굵게)
/* 두께(normal, bold) */
font-weight: bold;- 단어 간격(공백 크기)
/* 단어 간격 */
/* 권장 .2em */
word-spacing: .2em ;- 추적(문자 간격)
/* 자간(문자 간격) */
letter-spacing: -1px;- 장식품
/* 꾸밈 */
/*
none : 밑줄 제거
underline : 밑줄
line-thorow : 취소선
overline : 윗줄
*/
text-decoration: underline;- 글꼴(글꼴)
- 페이지의 글꼴은 서버 측 글꼴을 사용하지 않고 브라우저에 설치된 컴퓨터의 글꼴을 사용합니다.
- 비용 문제, 저작권 문제
- Server & Client > 양쪽에 설치된 폰트만 사용
- 글꼴 예약어
- 1. serif: 획 끝에 장식이 있는 글꼴(필기체, 바탕체)
- 2. sans-serif: 획 끝에 장식이 없는 글꼴(볼드체, 고딕체)
- 3. 고정 폭: 문자 폭이 일정함(필기체, 필기체)
- 4. 필기체: 장식체
- 5. 환상: 장식
/* 글꼴(폰트) */
font-family: '궁서체';
/* 우선 순위 궁서체가 없음 > 바탕체 없으면 > 맑은 고딕
font-family: '궁서체', '바탕체', '맑은 고딕';- 웹 글꼴
- 서버에서 폰트를 다운받아 사용하는 기술(스트리밍)
- 이용기간은 임시 > 현재 접속 중에만 유효
- 생성(*.eof)
- 서비스 제공업체를 이용하세요
- 예) Google Fonts 사이트 사용: https://fonts.google.com/
구글 글꼴
훌륭한 타이포그래피를 통해 웹을 더 아름답고 빠르고 개방적으로 만들기
fonts.google.com
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
font-family: 'Dongle', '궁서체', '바탕체', '맑은 고딕';
</style>