1. 글꼴 관련 스타일
1) font-family
font-family : 글꼴명 : 기본
font-family : "맑은 고딕" : 글꼴명에 띄어쓰기가 있을 경우
font-family : "맑은 고딕", AppleGothic : 대체가 필요할 경우
- 시스템 폰트 : OS에 설치된 폰트
2) 웹폰트
OS가 달라도 동일한 폰트 적용 가능
다양한 디자인의 폰토 제공
@import url(css 경로) - 외부 CSS 파일 추가, style 태그 내부, css 파일 내부에 정의 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2? family=Noto+Sans+KR&display=swap');
html {
font-size : 13px; /*1rem = 13px*/
}
.font1{
font-size : 2rem; /*2rem = 26px*/
font-family : "Noto Sans KR", sans-serif;
}
.font2{
font-size: 30px
}
.font2 span {
font-size : 2em;
}
</style>
<p class="font1">가나다</p>
<p class="font2">
<span>가나다</span>
</p>
</body>
</html>3) font-size
-
글자 크기
-
고정 크기
px- 픽셀
pt- 글자 크기
-
상대 크기 : 기준사이즈
rem : 기준 상위 태그에 적용된 글꼴 사이즈 기준 - 1rem
html {
font-size : 13px; /*1rem = 13px*/
}
.font1{
font-size : 2rem; /*2rem = 26px*/
}em : 부모 요소의 적용된 글꼴 사이즈 기준
.font2{
font-size: 30px
}
.font2 span {
font-size : 2em;
}4) font-weight
- 폰트 두께
수치 : 100~900
normal: 기본값(400)
bold: 700
bolder: 900
lighter: 가늘게
.b100{
font-weight:100;
}5) font-variant
소문자 -> 대문자, 크기는 소문자 크기와 동일
span{
font-variant: small-caps;
}6) font-style
italic : 기울림체
참고) <i>, <em>
.font1{
font-style: italic; /*기울림체*/
}7) font
폰트 관련 여러 스타일을 한꺼번에 적용
.font2{
font : 30px bold italic dotum; /*순서 상관없음*/
}텍스트 스타일
1) color
- 글자색상
rgb(0~255,0~255,0~255)hex code: 10진수를 16진수로 표기rgba(0~255,0~255,0~255,0~1): 투명도까지 설정
.font1{
color : rgb(0,255,0); /*녹색 rgb*/
color : #00FF00; /*녹색 hexcode*/
color : rgb(0,255,0,0.5) /*녹색, 투명도 50%*/
}2) text-decoration
none: 기본값underline: 밑줄overline: 윗줄line-through: 글중간 / 취소선 - 참고)<s>,<strike>,<del>
3) text-transform
속성 - 텍스트 대,소문자 변환하기
none: 기본값capitalize: 단어의 첫 문자를 대문자uppercase: 소문자 -> 대문자lowercase: 대문자 -> 소문자
.font4{
text-transform: lowercase; /*대문자 -> 소문자*/
text-transform: uppercase; /*소문자 -> 대문자*/
text-transform: capitalize; /*단어의 첫 문자를 대문자*/
}4) text-shdow
그림자 효과
text-shadow: 가로거리 세로거리 번짐정도 색상
text-shadow : 3px 3px 5px #222;
5) white-space
줄개행
normal: 기본값nowrap: 줄개행 X
참고) overflow
visible: 기본값 : 넘치더라도 보여주기hidden: 넘치는 영역은 감추기scroll: 스크롤바 생성auto: 넘치면 스크롤바, 안넘치면 스크롤바X
text-overflow
ellipsis: 말줄임표
6) letter-spacing
글자 사이 간격
letter-spacing: 30px; /*글자사이간격*/7) word-spacing
단어 사이 간격
letter-spacing: 100px; /*단어사이간격*/
안녕하세요!