[CSS -6]텍스트 꾸미기

2024. 3. 29. 11:25· 프로그래밍/CSS
목차
  1. 텍스트 꾸미기
  2. 글꼴 바꾸기
  3. 웹 폰트 사용하기
  4. 텍스트 꾸미기의 속성

텍스트 꾸미기

글꼴 바꾸기

  • font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용
  • 한 개 이상의 글꼴을 지정할 수 있음
    • 입력한 글꼴 뒤에 쉼표를 입력후 새로운 글꼴을 이어서 입력하는 방식으로 속성값 지정
    • 먼저 쓰여진 글꼴부터 우선적으로 요소에 지정
    • 먼저 쓰여진 글꼴이 없으면 다음에 있는 글꼴이 적용

웹 폰트 사용하기

  • 컴퓨터 시스템에 해당 포트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아서 사용할 수 있는 글꼴
  • 웹폰트를 사용하여 잘못 입력된 글꼴이거나, 시스템에 설치되어 있지 않아 요소에 적용되지 않는 것을 방지

텍스트 꾸미기의 속성

속성명 설명 속성값 유형
font-size 글자 크기 지정 수치와 단위
font-weigth 글자 두께 지정 별도의 키워드
line-height 행 높이 지정 수치와 단위
text_align 텍스트 정렬 방식 지정 별도의 키워드
text-decoration 텍스트 줄 긋기 별도의 키워드
  • 수치에 사용되는 새로운 단위
    • rem : 루트 요소(html태그)의 글자 크기를 배수로 계산해 적용하는 상대 단위
    • em : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위

'프로그래밍 > CSS' 카테고리의 다른 글

[CSS -8] 의사요소와 의사 클래스  (0) 2024.03.29
[CSS -7] CSS 기초 요소  (0) 2024.03.29
[CSS -5] 배경 및 색상 다루기  (0) 2024.03.29
[CSS -4] 박스 모델  (0) 2024.03.29
[CSS -3] 선택자  (0) 2024.03.29
  1. 텍스트 꾸미기
  2. 글꼴 바꾸기
  3. 웹 폰트 사용하기
  4. 텍스트 꾸미기의 속성
'프로그래밍/CSS' 카테고리의 다른 글
  • [CSS -8] 의사요소와 의사 클래스
  • [CSS -7] CSS 기초 요소
  • [CSS -5] 배경 및 색상 다루기
  • [CSS -4] 박스 모델
나무늘보Programmer
나무늘보Programmer
게으른 개발자가 공부하고 성장하는 과정을 기록하는 블로그 입니다.
게으른 개발자의 개발일기게으른 개발자가 공부하고 성장하는 과정을 기록하는 블로그 입니다.
나무늘보Programmer
게으른 개발자의 개발일기
나무늘보Programmer
전체
오늘
어제
  • 분류 전체보기 (71)
    • 수학 (0)
      • 확률과 통계 (0)
    • Computer Science(CS) (8)
      • 혼자 공부하는 컴퓨터 구조 + 운영체제 (1)
      • Network (0)
    • 프로그래밍 (57)
      • Python (8)
      • Java (1)
      • C++ (0)
      • HTML (13)
      • CSS (13)
      • JavaScript (19)
      • DB (1)
      • Spring (1)
    • 머신러닝&딥러닝 (0)
      • Computer Science(CS) (0)
      • 인공지능 (0)
      • Paper Review (0)
    • BootCamp(OZ Coding School) (3)
    • TroubleShooting (1)
    • SandBox (0)
    • Project (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
나무늘보Programmer
[CSS -6]텍스트 꾸미기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.