웹 페이지의 글꼴을 설정, 웹페이지의 대표 폰트는 body에 지정
.text {
font-family: "Poppins";
font-family: "Poppins", sans-serif;
font-family: "Poppins", "Roboto", sans-serif;
/* font-family: "글꼴", "대체글꼴", 대표폰트;
/* Poppins를 우선으로 적용, 없으면 Roboto, roboto도없으면 sans-serif중 아무거나 */
}
Webfont
(1) html에 import
font.css를 사용하기위해 <link> 사용
(2) css에 import
@import url(font.css의 파일경로);
font.css
@font-face {
font-family: '이름작명';
font-style: normal;
font-weight: 400;
src: url(웹폰트의파일경로) format('woff2'),
/* 웹폰트의 파일경로, 확장자 why? 효율적으로 폰트를 적용하기위해 */
url(웹폰트의파일경로) format('woff');
}
글자 크기를 지정하며 상대단위, 절대단위를 사용
(1) px : 해상도기준
(2) em : 척도 단위 ex) font-size가 20일경우 1em = 20px;
(3) rem(root em) : html에 적용된 폰트사이즈(root: html 자체를 뜻함)
(4) % : 백분율 단위
폰트의 굵기
p {
font-weight: 400;
/* 100 | 200 | 300 | **400(Regular)** | 500 | 600 | **700(Bold)** 무조건100단위 */
}
줄간격, px, em, rem 중 em을 가장 많이 사용
line-height가 얼마가 되든간에 글씨는 줄간격의 가장 가운데에 위치한다.
p {
font-size: 20px;
line-height: 1;
}
글자의 스타일을 표현하며 normal | italic | oblique을 표현한다.
👩💻 참고) color : 글씨의 색상
1. hex #0066ff
2. rgb (0,102,255)
3. rgba (0, 102, 255, 0.5(투명도))
투명도는 0이면 투명 1이면 불투명
글씨의 가로정렬, 스타일은 인라인 요소를 감싸는 block
요소에 작성
p {
text-align: center;
/* left | center | right */
들여쓰기
글자에 줄 긋는것과 관련,
none | underline(밑줄) | line-through(취소선) | over-line(윗줄)
text-transform
captialize : 글자의 첫 번째 글자가 대문자
uppercase : 모든 글자가 대문자
lowercase : 모든 글자가 소문자
인라인 요소끼리의 수직위치 정렬, 스타일은 block
요소안의 inline
요소에 적용
baseline | top | middle | bottom
글자와글자사이(자간), px, em 사용 rem은 잘 사용하지 않음
공백문자처리
줄바꿈처리