기본
CSS - 글꼴 관련 스타일
jddng
2022. 2. 14. 21:09
728x90
반응형
글꼴 관련 스타일
font-family
- 선택자 { font-family : 글꼴이름; }
- 텍스트의 글꼴을 지정할 때 사용
<h3>font-family 속성 : 텍스트의 글꼴을 지정할 때 사용한다.</h3>
<pre> 선택자 { font-family : 글꼴이름; }의 형식으로 사용한다. </pre>
<p id="ff1">글꼴 변경 테스트1</p>
<p id="ff2">글꼴 변경 테스트2</p>
<p id="ff3">글꼴 변경 테스트3</p>
<h4>웹 폰트 사용하는 방법</h4>
<p>웹 폰트 제공 사이트 예시 : <a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트로</a></p>
<p id="web-font">font style test</p>
font-size
- 선택자 { font-size : 크기; }
- 텍스트의 크기를 변경할 때 사용
- 상대 크기
- em : 해당 폰트의 대문자 M의 너비를 기준, 부모 요소의 크기를 기준으로 배수(1.5em = 1.5배)
- rem : 최상위의 부모 요소의 크기 기준으로 배수
- % : 기본 글꼴의 크기에 대하여 상대적인 값 - 절대 크기
- px : Pixels, 표시장치(모니터)에 따라서 상대적인 크기를 가짐
- pt : Points, 기본으로 지정된 크기를 가짐, 1 포인트는 1/72 인치
<ul>
<li id="size1">고정크기 px 테스트</li>
<li id="size2">가변크기 em 테스트</li>
<li id="size3">가변크기 % 테스트</li>
</ul>
<ul id="size4">
<li id="size5">고정크기 px 테스트</li>
<li id="size6">가변크기 em 테스트</li>
<li id="size7">가변크기 % 테스트</li>
</ul>
font-weight
- 선택자 { font-weight : normal | bold | bolder | lighter | 수치값(ex : 100); }
- 두꺼운 글씨를 표현할 때 사용한다.
<ul>
<li id="fw1">원래 굵기보다 더 가늘게</li>
<li id="fw2">굵은 글꼴로 변경</li>
<li id="fw3">원래 굵기보다 더 굵게</li>
<li id="fw4">수치로 조절해보기</li>
</ul>
font-variant
- 선택자 { font-variant : 속성값; }
- 작은 대문자로 변경할 때 사용한다.
<p>I LOVE YOU</p>
<p id="fv">i love you</p>
font-style
- 선택자 { font-style : normal | italic | oblique; }
- 텍스트의 기울임을 지정할 때 사용한다.
<li id="fs1">italic 기울임 글꼴</li>
<li id="fs2">oblique 기울임 글꼴</li>
font
- 선택자 { font : font-style font-variant font-weight font-size/line-height font-family; }
- 글꼴 관련 스타일을 한번에 지정할 때 사용한다.
<li id="f1">글꼴 관련 스타일 테스트1</li>
<li id="f2">글꼴 관련 스타일 테스트2</li>
728x90
반응형