문자 관련 스타일은 font-family, font-size, font-weight, font-style, font-variant, line-height, font, 웹폰트, color, letter-spacing, word-spacing, text-decoration,text-transform, text-shadow의 속성이 있습니다.
먼저, font family부터 알아보겠습니다.
font-family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감쌉니다.
여러 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ;font-size
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px가 기본값입니다.
font-size 단위
px
해상도에 따라 상대적으로 달라지는 기본 단위입니다.
font-size: 12px;%
부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다.
font-size: 150%em
부모 요소의 글자크기를 100% 기준으로 계산한 100분의 1 단위 입니다.
font-size: 1.5em;특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px(16px*1.5=24px)이 됩니다.
만약 부모요소가 10px이었다면 1.5드dms 15px이 됩니다.
rem
em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다.
rem의 r은 html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
font-size: 1.5rem;vw,vh
vw는 뷰포트 너비값의 100qnsdml 1 단위, vh 뷰포트는 높이값의 100분의 1 단위입니다.
font-size: 10vw글자 크기가 뷰포트 너비의 10% 크기라는 뜻입니다.
font-weight
문자를 굵게 하거나 굵은 분자를 보통으로 재설정 하는 속성입니다.
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight: bold; | font-weight: normal; |
font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정 하는 속성입니다.
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style: italic | font-size: normal |
font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
| 작은 대문자로 설정 | 원래대로 설정 |
| font-variant: small-caps; | dont-variant: normal; |
line-height
줄간격을 px,%,em 등의 단위로 지정할 수 있습니다.
line-height: 1.4;단위를 생략하면 em으로 처리됩니다.
1.4em은 140%입니다. 줄간격 없이 딱 붙이고자 할 경우에는 100% 또는 lem 값을 지정하면 됩니다.
font
'font-'로 시작하는 속성들은 line-height와 함께 'font: ~' 한 줄로 붙여 쓸 수 있습니다.
반드시 세가지 순서에 맞춰 써야합니다.
글자 크기와 글꼴은 결코 생략할 수 없습니다.
//body [font-weight, font-style,font-vatriant][font-size/line-height][font-family];
body { font: 12px/1.4 '굴림', Gulim;}
웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 나오지 않을 수 있습니다.
언제 어디서나 원하는 글꼴로 페이지가 나오도록 웹폰트를 사용하는 것이 있습니다.
웹폰트 중 라이센스가 필요한 유료폰트들도 있으므로 반드시 확인하고 사용합시다.
@font-face
CSS에서는 글꼴 파일을 업로드 하여 사용하는 @font-face를 사용할 수 있습니다.
글꼴 파일이 용량이 크면 로딩속도가 느리고 , 용량이 적으면 글자가 뭉개져 보일 수 있습니다.
그러므로 여러 번 테스트 하여 결정해야합니다.
color
글자의 색상을 지정하는 속성입니다.
color:blue;
HEX값
red, green, blue의 새가지 색을 16진수 00~ff 사이 수치로 표현합니다.
#rrggbb형태로 기술합니다.
세가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여 쓸 수 있습니다.
#fffff는 흰색, #000000은 검정색을 의미합니다.
rgb값
rbg(red, green, blue) 형태로 기술하며 red, green, blue 는 10진수 0~255로 표현합니다.
rgba값
rgba (red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이 투명도를 나타냅니다.
HSLA값
HSLA (hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1 사이 투명도를 나타냅니다.
letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
letter-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
letter-spacing: 1px
text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
| 속성 값 | 속성 설명 |
| underline | 밑줄 |
| overline | 윗줄 |
| line-throught | 가운데줄 |
| none | 줄 없음 |
text-transform
대소문자 변경을 실행합니다.
| 속성 값 | 속성 설명 |
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫글자만 대문자 |
text-shadow
CSS3에서는 그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
text-shadow: 2px 3px 5px rgba(0,0,0,0,0.4);| 속성 값 | 속성 설명 |
| 2px | 그림자가 원본에서 떨어지는 가로 거리 |
| 3px | 그림자가 원본에서 떨어지는 세로거리 |
| 5px | 그림자가 흐릿하게 퍼지는 정도(쓰지 않으면 효과 x) |
| rgba(0,0,0,0,0.4) | 그림자의 색상 (red, green, blue, alpha) |
이상 문자관련 스타일에 대해 알아보았습니다.