CSS 폰트 속성 정리
1.font-size 속성
글자의 크기를 지정하는 속성
font-size: 크기-글자 크기 지정
<예 제>
.a { font-size: 32px; } //h1태그의 기본크기
.b { font-size: 2em; }
.c { font-size: large; }
.d { font-size: small; }
<div class="a">안녕하세요</div>
<div class="b">반갑습니다</div>
<div class="c">잘부탁드려요</div>
<div class="d">그럼!</div>
<결 과>
안녕하세요
반갑습니다
잘부탁드려요
그럼!
2.font-famaily 속성
글꼴을 지정하는 속성
font-family: 폰트이름
font-family: '폰트 이름'-두 단어 이상으로 이루어지는 단어는 따옴표를 사용
<예 제>
.font_arial { font-family: Arial }
.font_roman { font-family: 'Times New Roman' }
<h1 class="font_arial">안녕하세요</h1>
<p class="font_roman">반갑습니다</p>
<결 과>
안녕하세요
반갑습니다
※폰트가 없을시를 대비해 여러개의 폰트를 입력해준다!
font-family: '폰트 이름',Arial;
3.font-style 속성과 font-weight 속성
폰트의 기울기 또는 두께를 조정하는 속성
font-style: 키워드-(italic,normal 등)
font-weight: 키워드-(700~900,bold 등)
<예 제>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
<p class="font_big font_italic font_bold font">
안녕하세요 반갑습니다
</p>
<결 과>
안녕하세요 반갑습니다
4.line-height 속성
글자의 높이를 지정하는 속성
line-height: 크기-글자의 수직정렬이 안맞을때 div태그의 높이와 크기를 같게 해주면 된다
※font속성 한줄로 입력하기
font: style weight size / line-height font-family 순으로 입력
5.text-align 속성
글자의 정렬을 지정하는 속성
text-align: 키워드-(center,end,left,right 등)
<예 제>
.font_center { text-align: center; }
<p class="font_center">
안녕하세요
</p>
<결 과>
안녕하세요
※span 태그는 inline 형식을 가지고 너비가 없으므로 text-align가 적용되지 않는다
5.text-decoration 속성
a태그의 링크 스타일을 제거
text-decoration: none
<예 제>
a { text-decoration: none; }
<a href="#">링크 예시입니다!</a>
<결 과>
링크 예시입니다 //일반적인 a링크
링크 예시입니다 //text-decoration 적용 링크