[ex14] CSS(text)

ex14

 

텍스트 크기

    보편적으로 10pt ~ 11pt / 12px ~ 16px / em, rem

 

    HTML 수치 표현
    1. 숫자 > px, 문자수, 셀병합크기
    2. 숫자%

    CSS 수치 표현
    - 수치 데이터는 반드시 단위 표기를 해야 한다.(단위 생략 불가능)

    - html과 달리 글꼴 크기에 제한 없음

    1. pt > 포인트(글꼴), 절대값, 1/72인치
    2. px > 픽셀(크기, 위치, 여백, 글꼴 등), 절대값
    3. em > 기본 글꼴 크기를 기준으로 하는 상대 크기(%), 상대값. 알파벳 대문자 M의 높이를 100% 기준으로 하는 상대 크기. 상속을 받음
    4. rem > em과 동일. 상속을 안받음
    9. % > 백분율(크기, 여백, 위치, 정렬 등..). 상대값. 부모를 기준 
    ------------------------------------------ 이 위로 많이 씀 ------------------------------------------
    5. ex > 알파벳 소문자 x의 높이를 100% 기준. 상대값
    6. mm > 밀리미터
    7. cm > 센티미터
    8. in > 인치
    10. 기타 등등

 

 

 

CSS > C(Cascading)

모든 속성이 상속되진 않는다. 일부 속성이 상속된다. 텍스트 관련 속성만 상속이 된다.

속성 충돌 > 나에게 있는 속성이 우선

<!-- 아버지 div에 있는 속성 > 아버지, 나에게 적용 -->
	<div>
        할아버지
        <div style="font-size: 30pt">
            아버지
            <div>나</div>
            아버지
        </div>
        할아버지
    </div>


<!-- em : 아버지를 기준으로 2배 큰 글꼴 적용 -->
    <div>
        할아버지
        <div style="font-size: 2em">
            아버지
            <div style="font-size: 2em">나</div>
            아버지
        </div>
        할아버지
    </div>

<!-- rem : 상속X. 아버지와 똑같은 크기 적용 -->
	<div>
        할아버지
        <div style="font-size: 2rem">
            아버지
            <div style="font-size: 2rem">나</div>
            아버지
        </div>
        할아버지
    </div>

 

 

줄간격

- %, em(rem)

- 보편적으로 140% ~ 180%

line-height: 1.6em;

 

스타일(italic, normal)

font-style: normal;

 

두께(normal, bold)

- 100부터 900까지 두께 조절 가능

font-weight: 900;

 

단어 간격(스페이스 크기)

- 0이 기본값. 마이너스 값 가능

word-spacing: 1em;

 

자간(문자 간격)

- 0이 기본값. 마이너스 값 가능

letter-spacing: -1px;

 

꾸밈

underline, line-through(취소선)

text-decoration: line-through;

 

글꼴(폰트)

- 여러개 나열 > 우선순위 (다 없을 경우를 대비해 마지막에 폰트 예약어 적어놓음)

- 페이지의 폰트는 서버측 폰트를 사용하는 것이 아니라, 브라우저 설치된 컴퓨터의 폰트를 사용한다.
- 비용문제, 저작권 문제
- 서버 & 클라이언트 > 양쪽 모두에 설치된 폰트만 사용     

font-family: '궁서체', '바탕체', '맑은 고딕', 'cursive';

 

 

폰트 예약어(무조건있음)

1. serif: 획끝에 장식이 있는 폰트(궁서체, 바탕체)

2. sans-serif: 획끝에 장식이 없는 폰트(돋움체, 고딕체)

3. monospace: 문자폭이 균일(궁서, 궁서체)

4. cursive: 장식체

5. fantasy: 장식체

 

웹폰트
- 폰트를 서버로부터 다운로드 받아서 사용하는 기술(스트리밍)
- 사용 기간은 일시적 > 현재 접속중에만 유효 

- 제작(*.eof)
- 서비스 업체를 사용

- 구글폰트, 눈누

<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

</style>

...

font-family: 'nanumsquare','Dongle', '궁서체', '바탕체', '맑은 고딕', sans-serif;