글자에 적용할 수 있는 스타일은 font 스타일과 text 스타일이 있다?
font와 text 속성의 차이
- Font는 글자 디자인적 요소, Text는 글자의 배치 글자의 효과
- Font는 입력 순서가 있음(border background는 순서 상관 없음)
폰트(Font) 스타일
⭐ font-size - 글자 크기 조절
font-size : <절대크기>|<상대 크기>|<크기>|<백분율>
- 절대 크기 : 브라우저에서 지정한 크기 ex) xx-small ~ xx-large
- 상대크기 : 부모 요소의 글자크기를 기준으로 더 크게 표시하거나 더 작게 표시 ex) larger, smaller
- ⭐크기 : 브라우저와 상관 없이 글자 크기를 직접 지정
- 백분율 : 부모 요소의 글자크기를 기준으로 %를 계산해 지정
글자 크기의 단위
- ⭐em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절, 부모 요소의 글꼴 크기가 1em
- ⭐rem : 최상위 요소 기준 em
- ex : x-height, 해당 글꼴의 소문자 x의 높이를 기준으로 크기조절,
- px : 픽셀, 모니터에 따라 상대적인 크기, 모바일이면 너무 작아보임
- pt : 포인트, 일반 문서에서 많이 사용
대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100%
- px = pt / 0.75
- pt = px * 0.75
- em = pt / 12
- % = pt * 100 / 12
단위 변환은 : http://pxtoem.com/
em과 rem의 차이
- em : 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됨
- ⭐rem : 최상위 요소, <html>의 font-size 속성값이 기준이 됨. 상위 요소에 따라 달라지지 않는 rem을 주로 쓰자.
🐍 정리
html {
font-size: 62.5%
/*글자 크기를 10px 기준으로 하고 싶을 경우*/
}대부분의 반응형 웹에서는 다음과 같이 <html>에서의 font-size를 바꿔준 후, 나머지 요소들에서는 rem을 사용하면 될 듯 하다.
⭐ font-weight - 글자 굵기 지정하기
font-weight : normal|bold|lighter|bolder|100~900(400은 normal 700은 bold)
⭐ font-family - 글꼴 지정하기, 사용자 시스템에 설치된 글꼴만 가능
- 폰트가 없는 경우도 있으므로 font-family : Arial, sans-serif와 같이 여러 개 지정해줘야 한다.
- 꼭 마지막에는 sans-serif를 추가하자. 기본 글꼴
font-variant -작은 대문자로 표시
font-variant : normal | small-caps
font-style - 글자 스타일 지정하기 (글꼴 기울이기)
font-style - normal | italic | oblique
- italic : 기울어진 글꼴이 처음부터 디자인되어있는 것 (대부분 있으므로 이것을 사용)
- oblique : 원래 글꼴을 단지 기울어지게 표시할 뿐
⭐ font - 한번에 합쳐서 적기
⭐ 주의사항
- font-size, font-family 반드시 포함
- font-family는 가장 마지막, 그 앞에 font-size 있어야 한다.
- 자세한 규칙은 https://developer.mozilla.org/ko/docs/Web/CSS/font 참조
텍스트(Text) 스타일
⭐ color - 글자색 지정
앞에 아무것도 붙지 않고 그냥 color다. rgb값, 색상 이름, 16진수 사용
text-decoration - 택스트에 줄 표시하기/없애기
text-decoration : none | underline | overline | line-through
text-transform - 택스트 대소문자 변환
text-transform : none | capitalize | uppercase | lowercase | full-width
text-shadow - 텍스트에 그림자 효과 추가하기
text-shadow : none|<가로거리> <세로거리> <번짐정도> <색상>
white-space - 공백 처리하기
white-space : normal | nowarp | pre | pre-line | pre-wrap
여러 개의 공백을 하나로 표시하거나, 영역 너비를 넘어가는 내용을 자동으로 줄 바꿈하거나 할 수 있다.
letter-spacing과 word-spacing - 텍스트 간격 조절하기
letter-spacing : normal | <크기>; /* 글자와 글자사이 자간 */
word-spacing : normal | <크기>; /* 단어와 단어사이 자간2? */
'⭐ 코딩 기초 > HTML, CSS' 카테고리의 다른 글
| 📐 CSS 배경 속성 요약! (1) | 2022.09.25 |
|---|---|
| 📝 CSS 문단 및 목록 스타일 요약! (1) | 2022.09.24 |
| 📐 CSS 속성 값 길이 단위, 색상 설명! (0) | 2022.09.24 |
| 🎨 CSS 우선순위와 상속 요약! (0) | 2022.09.23 |
| 📌 CSS 가상 선택자와 기타 요소 정리! (0) | 2022.09.21 |
댓글