CSS STEP 6 - TEXT

★ TEXT

• 텍스트 색상, 전경색(Fore Color)

/* 텍스트 색상, 전경색(Fore Color)*/
color : blue;
/* color : #444; */

• 텍스트 정렬(수평 정렬)
  • left, right, center

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. 기타 등등


*/

• 상속 Cascading
  • 상위 div에 색상을 넣으면 자식 div도 상속을 받아 변하는 것을 볼 수 있음.
  • 모든 속성이 상속되진 않는다. 일부 속성만 상속 된다. (Text 관련 만 상속됨)

<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%;

• 스타일(italic, normal, obluque)

/* 스타일 */
font-style : italic;

• 두께(normal, bold)

/* 두께(normal, bold) */
font-weight: bold;

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

/* 단어 간격 */
/* 권장 .2em */
word-spacing: .2em ;

• 자간(문자 간격)

/*  자간(문자 간격) */
letter-spacing: -1px;

• 꾸미기

/* 꾸밈 */
/*
none : 밑줄 제거
underline : 밑줄
line-thorow : 취소선
overline : 윗줄
*/
text-decoration: underline;

• 글꼴(폰트)
  • 페이지의 폰트는 서버측 폰트를 사용하는 것이 아니라, 브라우저에 설치된 컴퓨터의 폰트를 사용한다.
  • 비용 문제, 저작권 문제
  • 서버 & 클라이언트 > 양쪽에 모두에 설치된 폰트만 사용
  • 폰트 예약어
    • 1. serif : 획끝에 장식이 있는 폰트(궁서체, 바탕체)
    • 2. sans-serif : 획끝에 장식이 없는 폰트(돋음체, 고딕체)
    • 3. monospace : 문자폭이 균일(궁서, 궁서체)
    • 4. cursive : 장식체
    • 5. fantasy : 장식체

/*  글꼴(폰트) */
font-family: '궁서체';
/* 우선 순위 궁서체가 없음 > 바탕체 없으면 > 맑은 고딕
font-family: '궁서체', '바탕체', '맑은 고딕';

• 웹 폰트
  • 폰트를 서버로부터 다운로드 받아서 사용하는 기술(스트리밍)
  • 사용 기간은 일시적 > 현재 접속중에만 유효
  • 제작(*.eof)
  • 서비스 업체를 사용 
  • 많이 사용하면, 사이트가 무거워져, 속도가 많이 저하됨.
  • ex) 눈누 폰트 사이트 이용 : https://noonnu.cc/font_page
  • ex) 구글 폰트 사이트 이용 : https://fonts.google.com/

Google Fonts

<style>
    @import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
    font-family: 'Dongle', '궁서체', '바탕체', '맑은 고딕';
</style>