#7. Font & Text

1. font의 여러가지 프로퍼티

font-size	텍스트의 크기를 지정한다. px, %, em등의 프로퍼티를 사용할 수 있다.
font-style	폰트의 이탤릭체를 지정할 수 있다.
font-weight	폰트 굵기 지정에 사용된다. 100~900, bold, lighter, bolder 프로퍼티를 지정할 수 있다.

.d1 {
    font-size: 40px;
    font-style: italic;
    font-weight: bold;
}

.d2 {
    font-size: 150%;
    font-style: oblique;
    font-weight: lighter;
}

2. font-family

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&family=Open+Sans:wght@400;600&display=swap');

body{
    font-family: 'Open Sans', sans-serif;
}

폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 잇지 않으면 적용되지 않는다.

외부에 있는 폰트를 가져올 때에는 import를 이용하여 url을 삽입해 준다.

주로 구글폰트에서 가져오는 경우가 많다.

Google Font

Google Fonts

3. font Shorthand

font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

 

ex) font: italic bold 16px "Open Sans", sans-serif;

 

4. text 정렬 및 간격

line-height	텍스트의 높이를 지정한다.
letter-spacing	글자 사이의 간격을 지정한다.
text-align	텍스트의 수평 정렬을 정의한다. (center, left, right, justify등등)
text-decoration	링크의 underline을 제거하거나 텍스트에 underline, overline, line-through를 추가할 수 있다.

 

.height { line-height: 3; }

.space { letter-spacing: 2px; }

h1 { text-align: center; }

h3 { text-align: right; }

.center { text-align: center; }

p:nth-of-type(1) { text-decoration: overline; }

p:nth-of-type(2) { text-decoration: line-through; }

p:nth-of-type(3) { text-decoration: underline; }

5. white-space 프로퍼티

white-space는 공백, 들여쓰기, 줄바꿈을 의미한다. html은 기본적으로 연속된 공백, 들여쓰기는 1번만 실행되며 줄바꿈은 무시된다. 또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈된다. white-space프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티이다.

프로퍼티값	line break	space/tab	자동줄바꿈
normal	X	1번만 반영	O
nowrap	X	1번만 반영	X
pre	O	그대로 반영	X
pre-wrap	O	그대로 반영	O
pre-line	O	1번만 반영	O

div {
    width: 150px;
    height: 150px;
    padding: 10px;
    margin: 40px;
    border: 5px solid black;
}

.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre    { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }

6. text-overflow 프로퍼티

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다. 이 프로퍼티를 사용하기 위해서는 아래의 조건이 필요하다.

• width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 한다.
• 자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap으로 설정한다.
• overflow 프로퍼티에 반드시 "visible" 이외의 값이 지정되어 있어야 한다.

clip	영역을 벗어난 텍스트를 표시하지 않는다.(기본값)
ellipsis	영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시한다.
<!-	프로퍼티 값으로 지정한 임의의 문자열을 출력한다.

div {
    width: 150px;
    height: 150px;
    padding: 10px;
    margin: 40px;
    border: 5px solid black;
    white-space: nowrap;
    overflow: hidden
}

.clip { text-overflow: clip; }
.ellipsis { text-overflow: ellipsis; }

7. word-wrap, word-break 프로퍼티

- word-wrap

한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다.

link등을 표기할 때 그 길이가 매우 길어지는데 이 프로퍼티를 사용하지 않으면 부모 영역을 넘어가게 된다.

 

- word-break

word-wrap프로퍼티는 단어를 어느 정도는 고려하여 개행하지만 word-break는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.

div {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 40px;
    border: 5px solid black;
}

.word-wrap { word-wrap: break-word; }
.word-break { word-break: break-all; }