문자 관련 스타일에 대해서 알아보자

1. font-family

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

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

 

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

2. font-size, 단위의 고찰

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

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

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

• px

해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다.

 

font-size: 12px;

• %

부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다.

 

font-size: 150%;

특별한 설정이 없다면 16px이 100%가 되므로, 150%는 240px이 됩니다.

만약 부모 요소가10px이었다면 150%는 15px이 될 것입니다.

• em

부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로서, 다음과 같이 표현합니다.

 

font-size: 1.5em;

특별한 설정이 없다면 16px이 lem이 되므로, 1.5em은 24px(16px*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 단위,  vb는 뷰포트 높이값의 100분의 1단위이며, 다음과 같이 표현합니다.

 

font-size: 10vw;

글자 크기가 뷰표트 너비의 10% 크기라는 의미입니다.

03. font-weight

문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성으로, 다음과 같이 표현합니다.

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

04. font-style

문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성으로, 다음과 같이 표현합니다.

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

05. 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; }

08. 웹폰트

기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 

언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.

 

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

 

글꼴을 다운로드 하거나 구매한 뒤 업로드 할 폴더를 정해서 올립니다.

css에서 글꼴 이름, 파일경로, 파일유형을 설정합니다.

선택자에 글꼴 이름을 부여합니다.

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진수 두 자리 값을 적절히 배합하면 어떤 색으 나올지 예상 가능합니다.

HEX 값	속성 설명
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 색상으로 표현
color: #ffff00;	red:255, green:255, blue:0 색상으로 표현
color: #00ffff;	red:0, green:255, blue:255 색상으로 표현
color: #ff00ff;	red:255, green:0, blue:255 색상으로 표현
color: #ffffff;	red:255, green:255, blue:255 색상으로 표현

HEX 값으로 색상 속성을 부여한 예입니다.

속성 값	속성 설명
color: #abcdef;	글자를 red;ab, green:cd, blue:ef 색상으로 표현

• RGB값

rgb(red, green, blue) 형태로 기술하며 red, green, blue는 10진수 0~ 255 사이의 수치로 표현합니다.

RGB값으로 색상 속성을 부여한 예입니다.

속성 값	속성 설명
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%로 표현

색상의 HEX값이나 RGB값 등은 포토샵과 같은 그래픽 프로그앰의 색상 피커( color picker)에서 확인 가능합니다.

• RGBA값

rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

 

RGBA값으로 색상 속성을 부여한 예입니다.

속성 값	속성 설명
background: rgba(255,0,0,0.5);	배경을 빨간색 반투명으로 표현

• HSLA값

hsla(hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

 

HSLA값으로 색상 속성을 부여한 예입니다.

속성 값	속성 설명
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

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

위 예문의 의미는 다음과 같습니다.

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