글자속성

지금까지 CSS의 선택자에 대해 알아보았습니다.

이제 선택한 요소들을 디자인하기 위해 각종 주요 속성과 그 속성이 가지는 속성값에 대해 알아보겠습니다.

이번 포스팅에서는 글자속성에 대해 알아보겠습니다.

색상

CSS이 글자 생상은 색상 모델에 따라, 진법에 따라, 알파값 표현 여부에 따라 다양한 방법을 지원합니다.

이중에서 빨강, 초록 파랑 각 색상 요소의 강도를 두 자리의 16진수로 표기하는 #RRGGBB 방식이 웹 표준방식으로 가장 흔히 사용되고 있습니다. 이때 '#'가 없으면 색상 값으로 인정이 안되므로 주의해야 합니다!

출처 : w3cschools

#RRGGBB 방식으로 표현할 때 참고하면 좋은 자료입니다. 위의 사진외에도 많은 색상들을 지원해주고 있습니다.

평소에 우리가 #RRGGBB으로 어떤 색을 띄는지 알 수 없기 때문에 다음과 같은 Reference를 참고하여 코드를 짜면 좋습니다!!

이외에도 10진수로 색상 요소의 강도를 표현하는 RGB방식과 색상, 명도, 채도 방식인 HSL방식, 직관적으로 미리 정의된 색상의 이름을 사용하는 방식이 있습니다.

글자의 색상은 color라는 속성을 이용하여 사용할 수 있습니다.

예를들어 S { color : blue; }는 선택자 S의 글자색이 파란색을 띄도록 만드는 코드입니다.

CSS에서는 반투명 색상 또한 지원해줍니다. 이는 색상의 알파값으로 지정할 수 있습니다.

다만, 알파값은 RGBA나 HSLA 함수의 마지막 인수로 지정할 수 있습니다. 따라서 #RRGGBB 포멧에서는 지원하지 않습니다. 만약 투명도를 지정하고 싶다면 opacity라는 속성값을 이용하여 투명도를 조절 할 수 있습니다.

알파값이 1이면 불투명, 0.5이면 반투명, 0이면 투명입니다.(0~1의 범위를 가집니다.)

글꼴

글자의 크기는 font-size 속성을 이용하여 지정합니다. 참고로 속성의 이름이 두 단어 이상인 경우에는 '-'을 사용하여 연결합니다.

글자의 크기를 지정하는 방법도 여러가지가 있습니다. %, em, px, pt, cm 등이 있습니다.

%는 기본 크기에 대한 비율, em은 글꼴 높이의 배수를 이용하여, px은 픽셀단위로, pt는 포인트로, cm는 cm로 글자의 크기를 표현합니다.

여기서 주의할 점은 크기를 나타내는 수치값 다음에는 반드시 단위를 붙여서 표기해야합니다! 또, 수치값과 단위사이에는 공백이 없어야 합니다.

어떤 폰트를 사용할 지 지정하는 속성은 font-family를 이용합니다. 글꼴의 전반적인 모양과 특성을 결정하는 속성입니다.

S { font-family : "신명조";} 와 같이 지정하면 S 선택자의 글꼴은 신명조가 됩니다. 이때 폰트명이 여러단어로 구성된 경우 따옴표로 감싸주는 것이 안전합니다.

폰트를 지정하는 것은 비교적 간단하지만 장비, PC마다 해당 폰트가 존재한다는 보장은 없습니다. 따라서 폰트를 지정할 때 대체 폰트를 가급적 여러개 나열해 주는 것이 좋습니다. CSS에서는 font-family에서 지정한 폰트 중 앞쪽 폰트를 먼저 찾아보고 발견되지 않는다면 뒤쪽의 대체폰트를 사용합니다. 만약 지정된 폰트가 모두 없다면 기본 폰트를 사용합니다.

S { font-family : "궁서", "바탕", "신명조", "바다체"} 와 같이 나열할 수 있습니다.

가급적이면 마지막 폰트는 selif, sans-selif, monospace, cursive, fantasy 와 같은 일반 글꼴을 사용하는 것을 권장합니다.

웹폰트

만약 사용하고자 하는 폰트가 장비에 없다면 웹에서 공개된 폰트를 다운받아 사용할 수 있습니다.

@font-face를 이용하여 웹의 폰트를 사용할 수 있습니다.

@font-face {font-family : 폰트이름; src : local(로컬이름), url(폰트주소); font-style : 기울임체여부; font-weight : 폰트 굵기;  }

위와 같이 선언하여 폰트를 사용할 수 있습니다.

글자 모양

문자에 대한 장식은 단어, 음절에 대해 지정하므로 보통 <span>태그로 감싸고 스타일을 지정합니다.

font-style, font-weight, text-decoration, font-variant의 속성이 있습니다.

font-style은 글자에 기울임 정도를 지정합니다. italic은 약간 기울러진 상태, oblique는 더 많이 기울려진 상태입니다.

font-weight는 글자의 굵기를 지정하는 속성입니다. 수치나 예약어를 이용하여 지정할 수 있습니다.

보통의 글자 굵기는 normal 또는 수치로 400, 굵게는 bold나 700으로 지정할 수 있습니다. 그 외 bolder, lighter 등으로도 지정할 수 있지만 실질적으로는 보통, 굵게 이 두 가지 정도만 지원됩니다.

text-decoration은 문자에 선을 그을 것인가를 지정하는 속성입니다. none은 아무 줄도 긋지 않는 경우로 주로 <a>를 쓰면 자동으로 그어지는 밑줄을 지우기 위해 사용합니다. 그 외에 underline 밑줄, overline 윗줄, line-through 취소선이 있습니다.

font-variant는 작은 대문자를 표시하는 속성이지만 대소문자 구분이 없는 한글에는 아무효과가 없습니다.

축약형 속성

이렇게 지금까지 배운 폰트관련 속성을 일일이 다 적용하기에는 복잡합니다.

따라서 CSS에서는 축약형으로 font를 지정할 수 있도록 해줍니다. 

S { font : 기울임 작은대문자 굵기 크기/줄간 글꼴;} 과 같이 폰트를 지정할 수 있습니다.

이 때 기울임 작은대문자 굵기의 순서에는 상관이 없지만 크기/줄간과 글꼴의 순서는 꼭 지켜야합니다.

기울임 작은대문자 굵기는 생략이 가능한 속성값으로 생략시에는 default값이 나타납니다. 크기, 글꼴은 필수 속성으로 반드시 지정해 주어야 합니다.