폰트, 텍스트

DONI·2022년 7월 14일
0

CSS

목록 보기
4/4
post-thumbnail

🏹 타이포그래피의 구조

  • em : 폰트의 전체 높이
  • ex : 해당 폰트의 영문 소문자 x의 높이
  • Baseline : 소문자 x를 기준으로 하단의 라인
  • Descender : 소문자에서 Baseline의 아래 영역 (g, j, p, q, y)
  • Ascender : 소문자 x의 상단 라인 영역 (b, d, h, l)

🏹 폰트, 텍스트 관련 속성

속성설명
font-family글꼴을 지정하는 속성
family-name : 사용할 폰트의 이름
    한글 폰트의 경우 작은따옴표로 묶어서 선언하며, 영문자를 같이 선언해야 함
generic-family : 지정된 글꼴을 사용할 수 없을 경우
    브라우저가 대체 폰트를 선택할 수 있게 함 (상속되지 않음)
font-size글꼴의 크기를 지정하는 속성
em : 부모 요소의 font-sizeem 값을 곱한 크기
rem : 루트의 font-sizerem 값을 곱한 크기
vertical-align요소의 수직 정렬을 지정하는 속성
length : 요소를 지정한 길이만큼 올리거나 내림 (음수 허용)
% : 요소를 line-height 기준으로 올리거나 내림 (음수 허용)
text-align텍스트의 정렬을 지정하는 속성
justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬
text-indent텍스트의 들여쓰기를 지정하는 속성
length : px, em 등 고정 수치로 지정 (음수 허용)
% : 부모 요소의 width를 기준으로 퍼센트로 지정

* generic-family 의 종류

  • serif : 문자의 끝 부분에 장식이 있는 글꼴 (바탕체 계열)
  • sans-serif : 문자의 끝 부분에 장식이 없는 글꼴 (돋움체 계열)
  • monospace : 문자의 가로 폭이 동일한 글꼴
  • cursive : 필기체 계열의 글꼴
  • fantasy : 화려한 장식이 있는 글꼴

🏹 font 속성

font 관련 속성들을 한번에 선언할 수 있는 축약형 속성
제약 사항이 많고 가독성이 좋지 않기 때문에 실무에서 지양

  💥 축약형 선언 시 유의해야 할 점
     ◽ font-sizefont-family는 반드시 선언해야 함
     ◽ 각 속성의 선언 순서를 지켜야 함
     ◽ 빠진 속성이 있다면 기본 값으로 지정


🏹 웹 폰트 (@font-face)

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)에 다운로드하여 적용하는 속성
서버에 저장하여 제공하거나, 웹 경로를 통해 사용

속성설명
font-family글꼴을 지정하는 속성
src다운로드 받을 글꼴의 경로(URL)를 지정하는 속성
  • 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에
                      기본으로 설치되어 있어 사용할 수 있는 경우
  • 이미지 폰트 : 시각적인 요소를 넣고 싶을 때
                      글꼴 대신 이미지를 이용하여 표현하는 경우

🏹 단어 관련 속성

속성설명
white-space요소 안에 공백을 어떻게 처리할지 지정하는 속성
nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음
                 말줄임 표현 시 주로 사용
letter-spacing자간을 지정하는 속성
word-spacing단어 사이의 간격을 지정하는 속성
word-break단어가 라인 끝에 나올 경우 어떻게 처리할지 중단점을 지정하는 속성
word-wrap요소를 벗어난 단어의 줄바꿈을 지정하는 속성

  💥 word-breakword-wrap은 언어의 종류에 따라 다르게 동작하므로
       어떤 차이를 가지고 동작하는지 이해하고 사용해야 한다.

profile
틀린 내용이 있다면 댓글 또는 이메일로 알려주세요 ❤ꔛ❜

0개의 댓글