HTML, CSS
텍스트 관련 스타일
병호네
2024. 4. 23. 17:47
글꼴 관련 스타일
font-family 속성
- 웹 문서에서 사용할 글꼴 지정
- <body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소들에서 사용
- 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만
- 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정함.
- 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분
font-size 속성
- 글자 크기를 조절하는 속성
- 사용할 수 있는 값: 절대 크기, 상대 크기, 숫자, 백분율
- 기본 값은 상대 크기인 medium
<크기> 값에서 사용하는 단위
px 단위
- px 단위를 사용하면 폰트 크기가 고정됨
- 모바일 기기로 볼 때도 같은 크기로 화면에 표시되기 때문에 작은 화면 안에 작은 글씨로 표시됨
em 단위
- 사용하는 글꼴의 대문자 M을 기준으로 한다.
- 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산 해 다른 요소들의 글자 크기를 조절함
font-weight 속성
- 글자 굵기를 조절하는 속성
font-variant 속성
- 대문자를 소문자 크기에 맞추어 작게 표시
font-style 속성
- 글자를 이탤릭체로 표시하는 속성
font 속성
- 글꼴 관련 속성들을 한꺼번에 묶어 표기
line-height는 줄 간격 조절 속성인데 font 속성은 아니지만 글자 크기와 줄 간격이 밀접한 관련이 있기 때문에 fontsize/line-height처럼 하나의 속성처럼 사용하기도 함
텍스트 스타일
color 속성
- 글자 색 지정
- 16진수 값이나 rgb 값, 색상 이름 중에서 사용
text-decoration 속성
- 텍스트에 밑줄을 긋거나 가로지르는 줄 표시
- 텍스트 링크의 밑줄을 없앨 때도 사용
text-transform 속성
- 영문 텍스트의 대문자나 소문자를 바꾸는 속성
text-shadow 속성
- 텍스트에 그림자 효과를 추가하는 속성
letter-spacing, word-spacing 속성
- 글자간 간격, 단어간 간격
direction 속성
- 텍스트를 쓰는 방향 지정.
- 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어일 경우 direction 속성으로 right to left 로 지정
text-align 속성
- 텍스트 정렬 방법 지정
text-indent 속성
- 문단의 첫 글자를 얼마나 들여 쓸지 지정
line-height 속성
- 문단의 줄 간격 지정
- <숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정
- 보통 글자 크기의 1.5~2배 정도면 적당
text-overflow 속성
- 지정한 영역을 벗어나는 텍스트를 어떻게 할지 지정
- 해당 요소의 overflow 속성 값이 hidde일 때, 또는 overflow가 scroll, auto 이면서 white-space:nowrap일 때만 적용됨.
list-style-type 속성
- 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
1. 순서 없는 목록의 불릿 바꾸기
2. 순서 없는 목록의 불릿 없애기
3. 순서 목록의 숫자 바꾸기
list-style-image 속성
- 순서 없는 목록의 불릿을 이미지로 바꾸는 속성
list-style-position 속성
- 불릿이나 번호를 들여쓰거나 내어쓸 수 있음
list-style 속성
- list-style-type, list-style-position, list-style-image 속성을 한꺼번에 표기
