[CSS] Typography

hyesom·2021년 12월 6일
0

CSS

목록 보기
10/18
post-thumbnail

Typography

(1) 글자

① font-family

웹 페이지의 글꼴을 설정, 웹페이지의 대표 폰트는 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');
}

② font-size

글자 크기를 지정하며 상대단위, 절대단위를 사용
(1) px : 해상도기준
(2) em : 척도 단위 ex) font-size가 20일경우 1em = 20px;
(3) rem(root em) : html에 적용된 폰트사이즈(root: html 자체를 뜻함)
(4) % : 백분율 단위

③ font-weight

폰트의 굵기

p {
  font-weight: 400;
/* 100 | 200 | 300 | **400(Regular)** | 500 | 600 | **700(Bold)** 무조건100단위 */
}

④ line-height

줄간격, px, em, rem 중 em을 가장 많이 사용
line-height가 얼마가 되든간에 글씨는 줄간격의 가장 가운데에 위치한다.

p {
  font-size: 20px;
  line-height: 1;
}

⑤ font-style

글자의 스타일을 표현하며 normal | italic | oblique을 표현한다.

👩‍💻 참고) color : 글씨의 색상
1. hex #0066ff
2. rgb (0,102,255)
3. rgba (0, 102, 255, 0.5(투명도))
투명도는 0이면 투명 1이면 불투명


(2) 문단

① text-align

글씨의 가로정렬, 스타일은 인라인 요소를 감싸는 block요소에 작성

p { 
  text-align: center;
/* left | center | right */

② text-indent

들여쓰기

③ text-decoration

글자에 줄 긋는것과 관련,
none | underline(밑줄) | line-through(취소선) | over-line(윗줄)

④ text-transform

text-transform
captialize : 글자의 첫 번째 글자가 대문자
uppercase : 모든 글자가 대문자
lowercase : 모든 글자가 소문자

⑤ vertical-align

인라인 요소끼리의 수직위치 정렬, 스타일은 block요소안의 inline요소에 적용
baseline | top | middle | bottom

⑥ letter-spacing

글자와글자사이(자간), px, em 사용 rem은 잘 사용하지 않음

⑦ white-space

공백문자처리

⑧ word-break

줄바꿈처리

profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글