“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
CSS 문자 관련 스타일
아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다.
웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다.
01. font - family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: '돋움', dotum, arial, Helvetica, sans-serif;02. font - size
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다.
ex) font-size: 12px
| px | 해상도에 따라 상대적으로 달라지는 기본 단위 |
| % | 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 |
| em | 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위 |
| rem | em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산 |
| vw, vh | vw는 뷰표트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위 |
03. font - weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight: bold; | font-weight: normal; |
04. font - style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style: italic; | font-style: normal; |
05. font - variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성
| 작은 대문자로 설정 | 원래대로 설정 |
| font-variant: small-caps; | font-variant: normal; |
06. line-height
줄간격을 px, %, em 등의 단위로 지정
line-heigth: 1.4;단위를 생략하면 em으로 처리됩니다. 1.4em은 140%입니다.
줄간격 없이 딱 붙이고자 할 경우에는 100%, 또는 1em 값을 지정하면 됩니다.
07. font
'font-'로 시작하는 속성들은 line-height와 함께 'font: ~' 한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
font: [font-weight, font-style, font-variant][font-size/line-height][font-family];08. 웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
- @font-face
- 구글 웹폰트
참고
웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.
09. color
글자의 색상을 지정하는 속성
color: blue;css의 색상은 글자색 뿐 아니라 배경색, 테두리색 등 다양한 css속성들에 적용됩니다.
색상을 표현하는 방법에 대해 알아보겠습니다.
| 색상명 | 해당 색상을 의미하는 고유명사를 속성값으로 사용 |
| HEX값 | red,green,blue의 세 가지 색을 16진수로 표현하는 것 |
| RGB값 | rgb 형태로 기술하며 10진수로 표현 |
| HSL값 | hsl 형태로 기술하며 hue는 0~360 색상환 값, saturation(채도),lightness(명도)는 % 값으로 표현 |
| RGBA값 | rgba 형태로 기술하며 alpha는 0~1사이의 투명도를 나타냄 |
| HSLA값 | hsla 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냄 |
10. letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
lette-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
ex) letter-spacing: 1px;11. text-decoration
글자의 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
| 속성 값 | 속성 설명 |
| underline | 밑줄 |
| overline | 윗줄 |
| line-through | 가운데줄 |
| none | 줄 없음 |
12. text-transform
대소문자 변경을 실행합니다.
| 속성 값 | 속성 설명 |
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫글자만 대문자 |
13. text-shadow
css3 에서는 그래픽 프로그램의 도움 없어도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
text-shadow: 2px 3px 5px rgba(0,0,0,0.4);
위 예문의 의미는 다음과 같습니다.
| 속성 값 | 속성 설명 |
| 2px | 그림자가 원본에서 떨어지는 가로 거리 |
| 3px | 그림자가 원본에서 떨어지는 세로 거리 |
| 5px | 그림자가 흐릿하게 퍼지는 정도 (쓰지 않으면 퍼지는 효과 없음) |
| rgba(0,0,0,0.4) | 그림자의 색상(red, green, |
