문자 관련 스타일

1. font-family

문자의 글꼴을 지정하는 속성입니다.

 

여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.

font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ;

 

2. font-size

문자의 글자 크기를 지정하는 속성입니다.

글자 크기는 명시하지 않을 경우 16px이 기본입니다.

 

CSS에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다.

단위	코드 예시	설명
px	font-size: 12px;	해상도에 따라 상대적으로 달라지는 기본 단위
%	font-size: 150%;	부모 요소의 글자 크기를 100% 기준으로 계산한 단위
em	font-size: 1.5em;	부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위
rem	font-size: 1.5rem;	em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
vw	font-size: 10vw;	뷰포트 너비값의 100분의 1단위
vh	font-size: 10vh;	뷰포트 높이값의 100분의 1단위

 

 

3. font-weight

문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.

• 굵은 문자로 설정 : font-weight : bold;
• 보통 문자로 설정 : font-weight : normal;

 

4. font-style

문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.

• 기울어지게 설정 : font-style : italic;
• 기울어지지 않게 설정 : font-style : normal;

 

5. font-variant

문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.

• 작은 대문자로 설정 : font-variant : caps;
• 원래대로 설정 : font-variant : normal;

 

6. line-height

줄 간격을 지정하는 속성입니다. 단위는 아래와 같습니다.

• px
• %
• em

 

7.font

'font-'로 시작하는 속성들은 line-height와 함께 'font:~' 한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.

font:[font-weight, font-style, font-variant][font-size/line-height][font-family];

 

 

8. 웹폰트

기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.

웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.

 

 

9. color, 색상 코드 고찰

글자의 색상을 지정하는 속성입니다.

color : blue;

CSS의 색상은 글자색(color) 뿐만 아니라 배경색(background), 테두리색(border) 등 다양한 CSS속성들에 적용됩니다.

 

색상명

해당 색상을 의미하는 고유명사를 속성값으로 사용합니다.

사용할 수 있는 속성값으로는 red, green, blue, aqua, corel,.... 등 여러가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다.

 

• HEX값 : red, green, blue 세가지 색을 16진수 00~ff 사이의 수치로 표현. #rrggbb 형태로 기술합니다.
• RGB값 : 10진수 0~255 사이의 수치로 표현. rgb(red, green, blue) 형태로 기술합니다.
• HSL값 : hue(색 상환 값), saturation(채도), lightness(명도)는 % 값으로 표현합니다.
• RGBA값 : red, green, blue, alpha(0~1 사이의 투명도) 형태로 기술합니다.
• HSLA값 : hue, saturation, lightness, alpha 형태로 기술합니다.

 

10. letter-spacing, word-spacing

글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.

letter-spacing 에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.

 

 

11. text-decoration

글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.

속성 값	속성 설명
underline	밑줄
overline	윗줄
line-through	가운데줄
none	줄 없음

 

 

12. text-transform

대소문자 변경을 실행합니다.

속성 값	속성 설명
uppercase	대문자
lowercase	소문자
capitalize	첫글자만 대문자

 

 

13. text-shadow

글자에 그림자를 주는 속성입니다.

 text-shadow : 2px 3px 5px rgba(0,0,0,0.4);

속성 값	속성 설명
2px	그림자가 원본에서 떨어지는 가로 거리
3px	그림자가 원본에서 떨어지는 세로 거리
5px	그림자가 흐릿하게 퍼지는 정도 (쓰지 않으면 퍼지는 효과 없음)
rbga(0,0,0,0.4)	그림자의 색상(red, green, blue, alpha)