https://poiemaweb.com/css3-font-text
1. font-size 프로퍼티
텍스트의 크기를 정의한다.
< style >
.font-size-40 { font-size : 40px ; }
.font-size-2x { font-size : 2.0em ; }
.font-size-150ps { font-size : 150% ; }
.font-size-large { font-size : large ; }
</ style >
주로 px , em , % 를 사용해봤으나 small large 등은 처음들어보는것같다.
2. font-family 프로퍼티
첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용한다.
따라서 마지막에 지정하는 폰트는 대부분의 OS에 기본적으로 설치되어 있는
generic-family 폰트(Serif, Sans-serif , Mono space)를 지정
폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않아도 된다.
https://noonnu.cc/
눈누
상업용 무료한글폰트 사이트
noonnu.cc
사용하고 싶은 폰트의 해당 부분을 복사해서 가져가면 무료로 폰트를 사용할 수 있다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
@font-face {
font-family : 'Cafe24Moyamoya-Regular-v1.0' ;
src : url ( 'https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/Cafe24Moyamoya-Regular-v1.0.woff2' ) format ( 'woff2' );
font-weight : normal ;
font-style : normal ;
}
.my_font {
font-family : 'Cafe24Moyamoya-Regular-v1.0' , sans-serif ;
}
</ style >
</ head >
< body >
< h1 class = "" > frontend 고수가 될꺼야 </ h1 >
< h1 class = "my_font" > frontend 고수가 될꺼야 </ h1 >
< p class = "" > frontend 고수가 될꺼야 </ p >
< p class = "my_font" > frontend 고수가 될꺼야 </ p >
</ body >
</ html >
3. font-style / font-weight 프로퍼티
< style >
.my_italic {
font-style : italic ;
}
.my_bold {
font-weight : bold ;
}
</ style >
4. font Shorthand
font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)
/* style | variant | weight | size/line-height | family */
/* font-variant: small-caps; 소문자를 대문자로 만든다. 단 크기는 일반 대문자에 비해 더 작다.*/
font: italic small-caps bolder 16px/3 cursive;
5. line-height 프로퍼티
다음은 수직 중앙 정렬 예제이다. a 요소의 line-height 값과 a 요소를 감싸는 div 요소의 값을 일치시킨다.
text-align : center // x 축 정렬
line-height : 부모의 height // y 축 정렬 , 1줄만 가능
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
body {
display : flex ;
}
div {
margin : 10px ;
width : 300px ;
height : 300px ;
background-color : lightgray ;
}
.x {
text-align : center ;
}
.y {
line-height : 300px ;
}
.xy {
text-align : center ;
line-height : 300px ;
}
</ style >
</ head >
< body >
< div > 즐거운 프론트엔드 !! </ div >
< div class = "x" > 즐거운 프론트엔드 !! </ div >
< div class = "y" > 즐거운 프론트엔드 !! </ div >
< div class = "xy" > 즐거운 프론트엔드 !! </ div >
</ body >
</ html >
6. letter-spacing 프로퍼티
< style >
.loose {
letter-spacing : 2px ;
}
.tight {
letter-spacing : -1px ;
}
</ style >
7. text-align 프로퍼티
inline 요소는 width 프로퍼티가 없으므로 중앙 개념이 존재하지 않는다.
a 요소에 display: block; 을 지정한다면 중앙 정렬이 가능할 것이다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
.center {
font-size : 24px ;
text-align : center ;
background-color : lightgray ;
margin : 10px ;
}
.block {
display : block ;
}
.inblock {
display : inline-block ;
width : 400px ;
}
</ style >
</ head >
< body >
< div class = "center" > div 태그 block </ div >
< div class = "center" > div 태그 block </ div >
< div class = "center" > div 태그 block </ div >
< a class = "center" > a 태그 기본 inline </ a >
< a class = "center" > a 태그 기본 inline </ a >
< a class = "center" > a 태그 기본 inline </ a >
< a class = "center block" > a 태그인데 block </ a >
< a class = "center block" > a 태그인데 block </ a >
< a class = "center block" > a 태그인데 block </ a >
< a class = "center inblock" > a 태그인데 inline-block </ a >
< a class = "center inblock" > a 태그인데 inline-block </ a >
< a class = "center inblock" > a 태그인데 inline-block </ a >
</ body >
</ html >
width 값을 조절할 수 있다면 -> block , inline-block -> text-aline : center 가 가능
8. text-decoration 프로퍼티
또는 텍스트에 underline, overline, line-through를 추가할 수도 있다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
body {
display : flex ;
}
div {
font-size : 24px ;
background-color : lightgray ;
margin : 10px ;
height : 100px ;
color : red ;
}
.under {
text-decoration : underline ;
}
.over {
text-decoration : overline ;
}
.through {
text-decoration : line-through ;
}
</ style >
</ head >
< body >
< div class = "under" > underline </ div >
< div class = "over" > overline </ div >
< div class = "through" > line-through </ div >
</ body >
</ html >
9. white-space 프로퍼티
white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다.
html은 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행되며 줄바꿈(line break)은 무시된다.
또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)된다.
white-space 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티이다.
코드에 다음과 같이 적게 되었을경우
< h3 > nowrap </ h3 > Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
normal 이 일반적인 default 값이며
nowrap 의 경우 부모의 크기에 따른 자동 줄바꿈을 하지 않도록 하고
pre 의 경우 코드를 작성한 에디터 처럼 그대로 보여준다
그외 pre-wrap 과 pre-line 이 있다.
10. text-overflow 프로퍼티
이 프로퍼티를 사용하기 위해서는 아래의 조건이 필요하다. 1. width 프로퍼티가 지정 되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 한다. 2. 자동 줄바꿈을 방지 하려면 white-space 프로퍼티를 nowrap으로 설정한다. 3. overflow 프로퍼티에 반드시 “visible” 이외의 값 이 지정되어 있어야 한다.
/* 부모 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시한다. */
.truncate {
width : 150px ; /* width가 지정되어 있어야 한다. */
white-space : nowrap ; /* 자동 줄바꿈을 방지 */
overflow : hidden ; /* 반드시 "visible" 이외의 값이 지정되어 있어야 한다. */
text-overflow : ellipsis ; /* ellipsis or clip */
}
.clip { text-overflow : clip ; }
.ellipsis { text-overflow : ellipsis ; }
11. word-wrap 프로퍼티
link 등을 표기할 때 그 길이가 매우 길어지는데 이 프로퍼티를 사용하지 않으면 부모 영역을 넘어가게 된다.
12. word-break 프로퍼티
한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다.
word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.
< style >
.word-wrap { word-wrap : break-word ; }
.word-break { word-break : break-all ; }
</ style >
