“ 발명될 수 있는 것은 모두 발명되었다. ”
- Charles H. Duell, Commissioner
U.S. Office of Patents
문자 관련 스타일
CSS에서 문자를 스타일링하는 다양한 방법이 있는데, 다음은 CSS에서 일반적으로 사용하는 문자 관련 스타일입니다.
font-family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-size
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
단위는 ?
| px | 해상도에 따라 상대적으로 달라지는 기본 단위 |
| % | 부모 요소의 글자 크기를 100%로 계산한 단위 |
| em | 부모 요소의 글자 크기를 100%로 계산한 100분의 1단위 |
| rem | 최상위 요소의 글자 크기를 100%로 계산한 100분의 1단위 |
| vw, vh | vw는 뷰포트 너비값의 100분의 1단위 vh는 뷰포트 높이값의 100분의 1단위 |
font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.
font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.
font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
line-height
줄 간격을 px, %, em 등의 단위로 지정하여 설정하는 속성입니다.
font
'font-' 로 시작하는 속성들은 'font : ~' 형식의 한줄로 붙여 쓸 수 있는데,
그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 생략할 수 없습니다.
| font : [font-weight, font-style, font-variant] [font-size / line-height] [font-family]; |
웹폰트
CSS에서는 글꼴 파일을 업로드하여 사용하는 @font-face를 사용할 수 있습니다. 글꼴 파일의 용량이 크면 로딩되는 속도가 느리고, 용량이 적으면 글자가 뭉개져 보일 수 있으므로 여러 번 테스트하여 결정해야합니다.
- 글꼴을 다운로드하거나 구매한 뒤 업로드할 폴더를 정해 올립니다.
- CSS에서 글꼴 이름, 파일 경로, 파일 유형을 설정합니다.
- 선택지에 글꼴 이름을 부여합니다.
color
글자의 색상을 지정하는 속성으로 다음과 같이 표현합니다.
| color : blue |
CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리색(border) 등 다양한 CSS속성들에 적용됩니다.
letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
letter-spacing 에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애주는 속성입니다.
text-transform
대소문자 변경을 실행합니다.
| 속성값 | 속성 설명 |
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫 글자만 대문자 |
text-shadow
CSS에서는 그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
| text-shadow : 그림자와 원본 가로거리 / 세로거리 / 블러정도(생략가능) / 그림자의 색상 |
순으로 적어 사용합니다 (/제외)
이상으로 문자 관련 스타일에 대해서 알아보았습니다 !