WEB-CSS-글꼴 스타일지정
글꼴 스타일지정
글꼴 스타일
글꼴 지정 -> font-family 속성
- 기본형
font-family: 글꼴이름
h2 {
color: blue;
font-family: "궁서체";
}
- 출력 화면
글자 크기 -> font-size 속성
- 기본형
font-size: 14px;
- 출력 화면
이탤릭체 글자 표현 -> font-style 속성
글자 굵기 지정 -> font-weight 속성
.base {
color: blueviolet;
font-style: italic;
font-weight: 800;
}
- 출력 화면
웹 폰트 사용하기
- 기본형
@font-face {
font-family: '글꼴 이름';
src: 파일 위치;
}
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
</style>
font-family: 'Nanum Pen Script', cursive;
- 출력 결과
텍스트 정렬 -> text-align 속성
속성값
start : 줄 시작 위치에 맞춰서 정렬
end : 줄 끝 위치에 맞춰서 정렬
left : 왼쪽에 맞춰서 정렬
right : 오른쪽에 맞춰서 정렬
center : 가운데에 맞춰서 정렬
justify : 양쪽에 맞춰서 정렬
match-parent : 부모 요소에 맞춰서 정렬
줄 간격 조절 -> line-height 속성 (텍스트 세로 정렬)
line-height: 100px;
텍스트 줄 표시 -> text-decoration 속성
text-decoration: line-through // 취소선 표시
text-decoration: overline // 윗줄 표시
text-decoration: underline // 아랫줄 표시
텍스트 그림자 표시 -> text-shadow 속성
text-shadow: 가로거리 세로거리 번짐정도 색상;
