font-familly
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
ex) font-family:'돋움', Dotum, Arial, Helvetica, sans-serif;
font-size, 단위의 고찰
문자의 글자 크기를 지정하는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다.
css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다.
px
해상도에 따라 상대적으로 달라지는 기본 단위입니다.
ex) font-size: 12px;
%
부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다.
ex) font-size: 150%;
em
부모 요소의 글자 크기를 100% 기준으로 계산한 100분의1 단위입니다.
ex) font-size: 1.5em;
rem
rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다.
ex) font-size: 1.5rem;
vw,vh
vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위입니다.
ex) font-size: 10vw
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 |
line-height
줄간격을 px, %, em등의 단위로 지정할 수 있습니다.
ex) line-height:1.4;
단위를 생략하면 em으로 처리됩니다. 1.4em은 140%입니다. 줄간격 없이 딱 붙이고자 할 경우에는 100% 또는 1em 값을 지정하면 됩니다.
부모 요소의 font-size를 기준으로 계산되며, height와 같은 수치를 주면 세로 중앙정렬을 할 수 있습니다.
ex) height: 50px;
line- height: 50px;
font
'font-'로 시작하는 속성들은 line-height와 함께 'font: ~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
font:[font-weight, font-style, font-variant][font-size/line-height][font-family]
ex) body { font: 12px/1.4 '굴림', Gulim;}
| 맞는 예 | 틀린 예 |
| font:24px Times; | font:bold 12px/1.5; (글꼴을 쓰지 않았음) |
| font:12px/1.5 bold Times; (bold를 맨앞에 써야함) |
웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
@font-face
css3에서는 글꼴 파일을 업로드하여 사용할 수 있습니다. 글꼴 파일의 용량이 크면 로딩 되는 속도가 느리고 용량이 적으면 글자가 약간 뭉개져 보일 수 있으므로 여러 번 테스트하여 결정합니다.
구글 웹폰트
글꼴 파일을 구해 업로드하지 않고도 구글 웹폰트를 이용하면 이미 업로드되어 있는 경로를 통하여 무료 웹폰트를 사용할 수 있습니다.
color, 색상 코드 고찰
글자의 색사을 지정하는 속성입니다.
ex) color: blue;
css의 색상은 글자색 (color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 속성들이 있습니다.
색상명
해당 색상을 의미하는 고유명사를 속성값으로 사용합니다.
| color:orange; | 글자를 오렌지색으로 표현 |
| background:beige; | 배경을 배이지 색으로 표현 |
| border:tomato; | 테두리를 토마토색으로 표현 |
HEX값
red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치로 표현하는 것으로서 #rrggbb형태로 기술 합니다.
#aabbcc와 같이 세 가지 색 모두 두자리 값이 같으면 #abc 라고 한자리로 줄여 쓸 수 있습니다.
| color:#000000; | red:0, green:0, blue:0 색상으로 표현 |
| color:#ff0000; | red:255, green:0, blue:0 색상으로 표현 |
| color#00ff00; | red:0, green:255, blue:0 색상으로 표현 |
| color#0000ff; | red:0, green:0, blue:255 색상으로 표현 |
HEX값으로 색상 속성을 부여한 예입니다.
ex) color:#abcdef; = 글자를 red:ab, green:cd, blue:ef 색상으로 표현
REB값
rgb(red, green, blue)형태로 기술하며 red, green, blue는 10진수 0~255 사이의 수치로 표현합니다.
ex) color: rgb(255, 128, 0); = 글자를 red:255, green:128, blue:0 색상으로 표현
HSL값
hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)은 0~360 색상환 값,saturation(채도)과 lightness(명도)sms %값으로 표현합니다.
ex) color: hsl(300,100%,50%); = 글자를 hue:300도, 채도:100%, 명도:50%로 표현
RGBA값
rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1사이의 투명도를 나타냅니다.
ex) background: reba(255, 0, 0, 0.5); = 배경을 빨간색 반투명으로표현
HSLA값
hsla(hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1사이의 투명도를 나타냅니다.
ex) background: hsla(0, 100%, 100%, 0.5); = 배경을 빨간색 반투명으로 표현
lettet-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
letter-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬수 있습니다.
ex) letter-spacing: -1px;
text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 쳣던 줄을 없애줍니다.
| underline | 밑줄 |
| overline | 윗줄 |
| line-through | 가운데 |
| none | 줄 없음 |
text-transform
대소문자 변경을 실행합니다.
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫글자만 대문자 |
text-shadow
글자에 그림자를 주는속성을 부여할 수 있습니다.
ex) text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
위 예문의 의미는 다음과 같습니다.
| 2px | 그림자가 원본에서 떨어지는 가로 거리 |
| 3px | 그림자가 원본에서 떨어지는 세로 거리 |
| 5px | 그림자가 흐릿하게 퍼지는 정도(쓰지 않으면 퍼지는 효과 없음) |
| rgba(0, 0, 0, 0.4); | 그림자의 색상(red, green, blue, alpha) |
자료 출처:Responsive Web Publishing 반응형 웹 실전 프로젝트 가이드 책