폰트와 텍스트

1. font-size

텍스트 크기 정의

 

2.font-family

폰트 지정, 해당 폰트 설치되어있지 않으면 적용X

여러개 동시에 지정 가능, 첫번째 지정 폰트 설치 안되어있는 경우>다음에 지정한 폰트 적용

대부분 기본 설치된 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적

.serif{

        font-family: "Times New Roman", Times, serif;

    }

    .sans-serif{

        font-family: Arial, Helvetica, sans-serif;

    }

    .monospace{

        font-family: "Courier New", Courier, monospace;

    }

3. font-style/font-weight

font-style 이텔릭체 지정

font-weight 굵기 지정

font-style: italic;

font-weight: lighter;

4. font shorthand

font : font-style(선택) font-variant(선택) font-weight(선택) font-size(필수)/line-height(선택) font-family(필수)

 

5. line-height

텍스트의 높이 지정, 수직 정렬에도 응용되어 사용(높이 간격조정)

line-height: 70%; /* 16px * 70% */

line-height: 1.2; /* 16px * 1.2 */

line-height: 3.0; /* 16px * 3 */

6. letter-spacing 프로퍼티

글자 사이 간격 지정(가로 간격)

letter-spacing: 2px;

7. text-align 프로퍼티

텍스트의 수평 정렬 정의

a는 inline 요소라서 중앙정렬 적용X, inline 요소는 width 프로퍼티 없음>중앙 개념 없음

 

8. text-decoration

underline, overline, line-through 추가 가능

 

9. white-space 

공백 space, 들여쓰기 tab, 줄바꿈 linebreak 의미

기본적으로 연속된 공백, 들여쓰기는 1번만 실행, 줄바꿈은 무시됨

텍스트는 부모의 가로영역 벗어나지 않고 자동 줄바꿈됨

white-space 프로퍼티는 기본 동작 제어 위한 프로퍼티

float 대신 inline-block 사용

display:inline-block

 

10. text-overflow 프로퍼티

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트 처리 방법 정의

조건

- width 프로퍼티 지정

- white-space 프로퍼티 nowrap으로 설정

- overflow 프로퍼티에 반드시 visible 이외의 값이 지정되어야

clip 영역을 벗어난 텍스트 표시하지 않음

ellipsis 영역 벗어난 텍스트 보이지 않게하고 말줄임표 표시

 

11.word-wrap 프로퍼티

한 단어의 길이 길어서 부모 영역 벗어난 텍스트 방법 정의

ex) link 표기

word-wrap: break-word;

중간에 강제 줄바꿈

 

 

12. word-break

한 단어의 길이 길어서 부모 영역 벗어난 텍스트 방법 정의

word-wrap은 단어를 어느정도 고려하지만 word-break는 단어를 고려하지 않고 부모영역에 맞추어 강제 개행

word-break: break-all;