문자 관련 스타일
01. font-family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: '돋움', Dotum, Helvetica, sans-serif ;
02. font-size, 단위의 고찰
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다.
▶px
해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다.
font-size: 12px;
▶%
부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다.
font-size: 150%;
▶em
부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의1 단위로서, 다음과 같이 표현합니다.
font-size: 1.5em;특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px (16px x 1.5=24px)이 됩니다. 만약 부모 요소가 10px이었다면 1.5em은 15px이 될 것입니다.
▶rem
rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
font-size: 1.5rem;
▶vw, vh
vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이값의 100분의 1 단위이며, 다음과 같이 표현합니다.
font-size: 10vw;위 예문은 글자 크기가 뷰포트 너비의 10% 크기라는 의미입니다.
▶font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성으로, 다음과 같이 표현합니다.
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight: bold; | font-weight:normal; |
▶font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성으로, 다음과 같이 표현합니다.
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style:italic; | font-style:normal; |
▶font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성으로, 다음과 같이 표현합니다.
| 작은 대문자로 설정 | 원래대로 설정 |
| font-variant: small-caps; | font-variant: normal; |
06. line-height
줄간격을 px, %, em 등의 단위로 지정할 수 있으며, 다음과 같이 표현합니다.
line-height: 1.4;단위를 생략하면 em으로 처리됩니다. 1.4em은 140%입니다. 줄간격 없이 딱 붙이고자 할 경우에는 100%, 또는 1em 값을 지정하면 됩니다.
부모 요소의 font-size를 기준으로 계산되며, height와 같은 수치를 주면 세로 중앙정렬을 할 수 있습니다.
height: 50px;
line-height: 50px;
07. font
'font~'로 시작하는 속성들은 line-height와 함께 'font:~' 한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
font:[font-weight, font-style, font-variant][font-size/line-height][font-family];
body { font: 12px/1.4 '굴림', Gulim; }| 맞는 예 | 틀린 예 |
| font: 12px Times; | font: bold 12px/1.5; (글꼴을 쓰지 않았음) |
| font: 12px/1.5 bold Times; (bold를 맨 앞에 써야 함) |
08. 웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.
▶font-face
CSS3에서는 글꼴 파일을 업로드하여 사용하는 @font-face를 사용할 수 있습니다. 글꼴 파일과 용량이 크면 로딩되는 속도가 느리고, 용량이 적으면 글자가 약간 뭉개져 보일 수 있으므로 여러 번 테스트하여 결정합니다.
▶구글 웹폰트
글꼴 파일을 구해 업로드하지 않고도 구글 웹폰트를 이용하면 이미 업로드되어 있는 경로를 통하여 무료 웹폰트를 사용할 수 있습니다.
09. color. 색상 코드 고찰
글자의 색상을 지정하는 속성으로 다음과 같이 표현합니다.
color: blue;CSS의 색상은 글자색( color )뿐 아니라 배경생( background), 테두리색 ( border ) 등 다양한 CSS 속성들에 적용됩니다.
▶ 색상명
해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, ...등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다.
| 속성 값 | 속성 설명 |
| color: orange; | 글자를 오렌지색으로 표현 |
| background: beige; | 배경을 베이지색으로 표현 |
| border-color: tomato; | 테두리를 토마토색으로 표현 |
▶ HEX값
red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치로 표현하는 것으로서 #rrggbb형태로 기술합니다.
#aabbcc와 같이 세 가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여 쓸 수 있습니다.
red, green, blue는 빛의 3원색이므로 값이 커지면 더 밝은 색이 됩니다. 따라서 최대값 #ffffff는 흰색을 의미하고, 최소값 #000000은 검정색을 의미하며, 가운데 자리만 최대값인 #00ff00 은 green색을 의미합니다.
이와 같이 red, green, blue의 16진수 두 자리 값을 적절히 배합하면 어떤 색이 나올지 예상할 수 있습니다.
▶ RGB값
rgb( red, green, blue ) 형태로 기술하며 red, green, blue는 10진수 0~255 사이의 수치로 표현합니다.
| 속성 값 | 속성 설명 |
| color: rgb[255, 128, 0]; | 글자를 red:255, green:128, blue:0 색상으로 표현 |
▶HSL 값
hsl( hue, saturation, lightness ) 형태로 기술하며 hue ( 색상 )는 0~360 색상환 값, saturation( 채도 )과 lightness( 명도 )는 %값으로 표현합니다.
HSL 값으로 색상 속성을 부여한 예입니다.
| 속성 값 | 속성 설명 |
| color: hsl[300, 100%, 50%] | 글자를 hue:300도, 채도:100%, 명도:50% 로 표현 |
▶RGBA값
rgba( red, green, blue, alpha ) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅ㅈ니다.
| 속성 값 | 속성 설명 |
| background: rgba[255, 0, 0, 0.5]; | 배경을 빨간색으로 반투명으로 표현 |
▶HSLA값
hsla( hue, saturation, lightness, alpha ) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.
| 속성 값 | 속성 설명 |
| background: hsla[0, 100%, 100%, 0.5]; | 배경을 빨간색으로 반투명으로 표현 |
10. letter-spacing, word-spacing
글가 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
letter-spacing 에 음수를 부여하면 원래 자간이 떨어진 글꼴의 경우 더욱 밀착시킬 수 있습니다.
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, blue, alpha ) |