글자 크기 설정
[문법]
선택자{
font-size: 크기값;
/*단위: %,px,em,rem...*/
}
[예시]
<style>
.small{
font-size: 10px;
}
.regular{
font-size: 30px
}
.big{
font-size: 50px;
}
</style><body>
<p class="small">안녕하세요 font-size Test 입니다.</p>
<p class="regular">안녕하세요 font-size Test 입니다.</p>
<p class="big">안녕하세요 font-size Test 입니다.</p>
</body>
[결과]
폰트 설정(font-family)
font-family
- 글꼴을 설정할 때 쓰는 속성이다.
- 하나의 글꼴도 설정할 수 있고, 여러개의 글꼴도 설정할 수 있음
- 여러개의 글꼴이 설정되어 있는 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 적용된다.
- 글꼴 이름에 띄어쓰기가 있을 경우 반드시 따옴표로 감싸줘야한다.
[문법]
선택자{font-family: 글꼴이름, 글꼴이름, 글꼴이름}
font-weight
- 텍스트의 굵기 설정
- 기본 굵기는 숫자 400
- 숫자는 100 ~ 900 사용
폰트를 설정할 때, PC에 보유하고 있는 글꼴로도 사용이 가능하지만,
홈페이지를 사용하는 사용자에게 해당 글꼴이 없을 수도 있기때문에 요즘에는 웹 폰트를 많이 사용한다.
웹 폰트란?
웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 같이 저장했다가 사용자가 웹 문서에 접속하면 글꼴을
사용자 시스템으로 다운로드 시키는 방식을 알한다.
웹폰트 사용하는법
[상업적으로 사용 가능한 무료 폰트 사이트]
구글 웹폰트 : fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
눈누한글폰트 : noonnu.cc/
상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
둘 중 원하는 글꼴이 있는 사이트에서 사용하면 된다 :)
사이트 구조는 다를지라도 사용방법은 동일하다
(구글웹폰트는 한글 폰트의 종류는 적지만 폰트의 굵기가 나눠져있는걸 한눈에 볼 수 있어 편리하고
눈누폰트는 한글 폰트의 종류가 다양하지만 굵기가 나눠져 있는지 확인하기가 어렵다)
[구글 웹폰트]
1. 구글 웹폰트 사이트에 접속하여, 원하는 언어를 설정하고 폰트를 클릭한다.
2. 원하는 굵기의 "이 스타일 선택"을 클릭한다.
3. 그러면 아래와 같이 <링크>가 뜨는데 박스 부분을 복사한다.
4. 코드의 <title> 태그 밑에 복사한 내용을 붙여 넣는다. (사진은 '해바라기' 폰트 입니다)
5. 그 후 박스 부분을 복사한 후 스타일을 적용한다.
<title>color</title>
<link href="https://fonts.googleapis.com/css2?family=
Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
/*300,500,700 은 굵기 종류*/
<style>
body{
font-size: 30px;
}
p.light_font{
font-family: 'Sunflower', sans-serif;
font-weight: 300;
}
p.normal_font{
font-family: 'Sunflower', sans-serif;
font-weight: 500;
}
p.bold_font{
font-family: 'Sunflower', sans-serif;
font-weight: 700;
}
</style><body>
<h2>폰트 설정</h2>
<p>기본 글꼴</p>
<p class="light_font">light 굵기 해바라기 폰트</p>
<p class="normal_font">normal 굵기 해바라기 폰트</p>
<p class="bold_font">bold 굵기 해바라기 폰트</p>
</body>
[결과]
[눈누 폰트]
1. 사이트에 접속해 원하는 폰트를 클릭한다.
2. 드래그된 부분을 복사한다.
3. <style>태그 내부에 복사한 내용을 붙여 넣는다
4. 폰트 적용하기
<style>
@font-face {
font-family: 'SDSamliphopangche_Outline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/
SDSamliphopangche_Outline.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
font-size: 30px;
}
p.hobbang_font{
font-family: 'SDSamliphopangche_Outline';
}
</style><body>
<h2>폰트 설정</h2>
<p>기본 글꼴</p>
<p class="hobbang_font">호빵 폰트</p>
</body>
[결과]
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
'프로그래밍 > CSS' 카테고리의 다른 글
| 09 박스모델(BOX MODEL)과 박스 사이징 (0) | 2021.05.03 |
|---|---|
| 08 CSS의 배경 (0) | 2021.04.27 |
| 06 CSS의 텍스트 다루기 (0) | 2021.04.27 |
| 05 CSS의 컬러 다루기 (0) | 2021.04.27 |
댓글