728x90
반응형
SMALL
1. font-size
- 텍스트 크기를 설정
- 설정 단위 : px, %, em, rem
✔ em 단위
1em : 16px(PC), 12px(MOBILE)
2. font-family
- 텍스트의 글꼴을 설정
3. font-weight
- 텍스트의 굵기를 설정
- 기본 굵기: 400 (범위 100 ~ 900)
✔ 글꼴을 선택하는 방법
- 누구나 설치되어 있는 기본 글꼴을 사용
- 이미지로 처리
- 클라이언트에 글꼴을 다운로드 시켜 사용
- 웹 폰트를 사용
📌 구글 폰트
- head 태그 안에 사용
📌 눈누
- style 태그 안에 사용
눈누
상업용 무료한글폰트 사이트
noonnu.cc
<!DOCTYPE html>
<html lang="en">
<head>
<title>css 텍스트</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
<style>
p {font-size: 24px;}
.sunflower1 {font-family: 'Sunflower', sans-serif; font-weight: 300;}
.sunflower2 {font-family: 'Sunflower', sans-serif; font-weight: 500;}
.sunflower3 {font-family: 'Sunflower', sans-serif; font-weight: 700;}
@font-face {
font-family: 'CookieRun-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
font-weight: 700;
font-style: normal;
}
.cookierun { font-family: 'CookieRun-Regular'; font-weight: 700;}
</style>
</head>
<body>
<h2>css 텍스트</h2>
<p>국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치, 그리고 남녀의 동등한 권리에 대한 신념을</p>
<p class="sunflower1">국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치, 그리고 남녀의 동등한 권리에 대한 신념을</p>
<p class="sunflower2">국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치, 그리고 남녀의 동등한 권리에 대한 신념을</p>
<p class="sunflower3">국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치, 그리고 남녀의 동등한 권리에 대한 신념을</p>
<p class="cookierun">국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치, 그리고 남녀의 동등한 권리에 대한 신념을</p>
</body>
</html>
📄 HTML 파일
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] 박스모델(Box Model)과 내용(Content)의 차이점, 박스사이징(box-sizing) (0) | 2023.03.30 |
|---|---|
| [CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 (0) | 2023.03.30 |
| [CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow (0) | 2023.03.30 |
| [CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 (0) | 2023.03.30 |
| [CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 (0) | 2023.03.30 |
