① font-size 속성
font-size: 40px;font-size: 2.0em;font-size: 150%;font-size: large;
대부분 프론트엔드 개발 시에는 font-size에 대해 px 단위를 사용하고 있지만, 요즘 트렌드인 반응형이나 모바일로 인하여 em, % 단위를 사용하고 있는 추세로 변화하고 있는 듯 함
② font-family 속성
폰트를 지정하는 속성으로 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않음
ex) font-family: Georgia, "Times New Roman", serif;
폰트는 여러개를 동시에 지정하는 것이 가능하고, 첫번째로 지정한 폰트가 컴퓨터에 설치되지 않았다면 두번째로 지정한 폰트를 적용함
ex) font-family: Georgia, "Malgun Gothic", serif;
글꼴을 여러 개 설정했을 때, 첫번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용
한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 영어와 한글이 다른 글꼴로 표시됨
③ font-style & font-weight 속성
- font-style : 이탤릭체의 지정
-
font-style: normal;: 기본 글꼴 형태 표시 (기본값) -
font-style: italic;: 이탤릭체 형태로 표시 -
font-style: oblique;: 원래 서체가 기울어진 모양
(2, 3번은 대충 비슷한 형식으로 표현됨)
- font-weight : 폰트 굵기 지정
font-weight: normal;: 원래 서체 굵기 (기본값), 숫자 400과 같음font-style: bold;: 진하게 표시, 숫자 700과 같음font-style: (100 ~ 900);: 숫자에 따라 100 단위로 굵기의 정도 조절 가능font-style: bolder;: 상위 요소에서 상속된 굵기보다 더 굵게 표시font-style: lighter;: 상위 요소에서 상속된 굵기보다 더 얇게 표시
④ line-height 속성
텍스트의 높이를 지정
<head>
<style>
.small {
line-height: 70%; /* 16px * 70% */
}
.big {
line-height: 1.2; /* 16px * 1.2 */
} /* line-height는 상속이 되므로 이를 고려하여 단위를 빼고 적는 것이 일반적인 것 같다 */
.lh-3x {
line-height: 3.0; /* 16px * 3 */
}
</style>
</head>- height와 line-height 속성 값을 동일하게 설정하면 수직 중앙 정렬 가능
⑤ font shorthand syntax
font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)
+) font-variant : 소문자 크기의 대문자로 바꾸는 속성
⑥ letter-spacing 속성
글자 사이의 간격을 지정
<head>
<style>
.loose {
letter-spacing: 2px;
}
.tight {
letter-spacing: -1px;
}
</style>
</head>⑦ text-align 속성
text-align: left;: 왼쪽 정렬text-align: right;: 오른쪽 정렬text-align: center;: 중앙 정렬text-align: justify;: 왼쪽과 오른쪽 열에 맞출 수 있게 화면을 늘어뜨림
하지만 text-align 속성이 적용이 안되는 요소도 있다. a 요소, img 요소와 같은 inline 요소가 그 예이다. inline 요소의 경우, width 라는 개념 자체가 없으므로 중앙 개념 또한 존재하지 않는다. inline 요소에 text-align 속성을 적용하고 싶다면 display: block;을 지정하거나, 상위에 blcok 요소를 만들어주면 된다.
⑧ text-decoration 속성
선으로 텍스트를 꾸밀 수 있게 해주는 속성
text-decoration: none;: 선을 만들지 않음text-decoration: line-through;: 글자 중간에 선을 만듦text-decoration: overline;: 글자 위에 선을 만듦text-decoration: underline;: 글자 아래에 선을 만듦
속성값을 여러개 사용하여 여러 선을 만들 수 있음
ex) text-decoration: overline underline; → 글자 위와 아래에 선을 만듦
⑨ white-space 속성
- 연속된 스페이스와 탭의 처리 방법. 병합은 1개의 공백으로 바꾸는 것, 보존은 입력대로 출력하는 것
- 줄바꿈의 처리 방법. 병합은 1개의 공백으로 바꾸는 것, 보존은 입력대로 출력하는 것
- 내용이 영역의 크기를 벗어날 때 처리 방법. O는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것, X는 영역을 벗어나더라도 입력된대로 출력하는 것
⑩ text-overflow 속성
부모 영역을 벗어난, 자동 줄바꿈(wrapping)이 되지 않은 텍스트의 처리 방법을 정의
이 속성을 사용하기 위해서 필요한 조건 ↓
1. width 속성이 지정되어 있어야 하므로 필요한 경우 block 레벨 요소로 변경하여야 함
2. 자동 줄바꿈을 방지하려면 white-space 속성값을 nowrap으로 설정
3. overflow 속성에 반드시 "visible" 이외의 값이 지정되어 있어야 함
text-overflow: clip;: 영역을 벗어난 텍스트를 표시하지 않음 (기본값)text-overflow: ellipsis;: 텍스트의 영역을 벗어난 부분을 보이지 않게 하고 말줄임표(...)를 표시
⑪ word-wrap & word-break 속성
두 속성 모두 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의함
다만, word-wrap 속성의 경우 단어를 어느 정도 고려하여 개행하지만, word-break 속성의 경우 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행함
word-wrap: break-word;: 요소의 경계에서 break point가 아니어도 줄바꿈word-break: break-all;
🎁 참조 및 출처
- https://poiemaweb.com/css3-font-text
- https://www.codingfactory.net/10551
- https://www.codingfactory.net/10553
- https://www.codingfactory.net/10492
- https://blog.pages.kr/2556
- https://www.codingfactory.net/10597
🎁 읽어보면 좋을 글
