font-family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
표현방법
font-family: '돋움', Arial, Helvetica, sans-serif;font-size, 단위의 고찰
문자의 글자 크기를 지정한는 속성입니다.
글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다.
- px : 해상동 따라 상대적으로 달라지는 기본 단위입니다.
- % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다.
- em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위입니다.
- rem: rem은 em과 비슷하지만 붑모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, himl 요소를 뜻하므로, html 요소에서 지정한 크기가 1rem이 됩니다.
- vw, vh : vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위 입니다.
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 등의 단위로 지정할 수 있습니다.
표현 방법
ling-height: 1.4; // 단위를 생략하면 em으로 처리 됩니다. 1.4em은 140%입니다.font
'font-'로 시작하는 속성들은 line-height와 함꼐 'font: ~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
표현 방법
body { font: 12px/1.4 '굴림', Gulim; }웹폰트
기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다. 웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.
@font-face, 구글 웹폰트color, 색상 코드 관찰
css 색상은 글자색뿐 아니라 배경색, 테두리색 등 다양한 css속성들에 적용됩니다.
- 색상명 : 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. red,green,blue 등
- HEX값 : 세가지 색상(red, green, blue)을 16진수로 표현하는 것입니다. #rrggbb 형태로 기술합니다.
- RGB값 : rgb형태로 기술하며 red,green,blue는 10진수 0~255사이의 수치로 표현합니다.
- HSL값 : hsl(색상,채도,명도) 형태로 기술하며 hue(색상) 는 0~360 색상환 값, saturation(채도), lightness(명도)는 %값으로 표현합니다.
- RGBA값 : rgba(red,green,blue,alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다
- HSLA값 : hsla 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.
letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
lette-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
표현 방법
letter-spacing: -1px;text-decoration
글자의 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
underline : 밑줄
overline : 윗줄
line-through : 가운데줄
none : 줄 없음text-transform
대소문자 변경을 실행합니다.
uppercase : 대문자
lowercase : 소문자
capitalize : 첫글자만 대문자text-shadow
그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
표현 방법
text-shadow: 2px 3px 5px rgba(0,0,0,0.5);