15. font-weight, font-style, color

이번 포스팅에서는 저번 포스팅에 이어서 글자와 관련된 속성인 font-weight, font-style, color에 대하여 다뤄보겠습니다.

글자와 관련된 스타일링은 매우 자주 사용되니 확실하게 익혀두시길 권해드립니다.

 

1. font-weight

font-weight는 글자의 두께를 지정하는 속성인데요.

글을 작성할 때 중요한 부분이거나 강조하고 싶을 때 자주 사용하곤 합니다.

그리고 시멘틱한 마크업을 하기 위해서도 필요한 부분입니다.

제목 태그인 <h1>~<h6> 태그나 <strong> 태그 등을 사용하다보면 기본적으로 다른 글자들보다 두껍게 표시되는 것을 확인하실 수 있는데요.

해당 태그들에는 기본적으로 글자 크키가 두껍게 표시되는 font-weight가 들어가있기 때문입니다.

  

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

이렇게 글자의 두께를 지정하는 속성인 font-weight는 아래와 같이 선언합니다.

 

h1 {
    font-weight:bold;
}

 

font-weight의 기본 값은 normal(400)이며, bold는 700을 의미합니다.

가장 많이 사용하는 속성 값으로는 숫자로 표기하는 방법이 있으며, 100~900까지 선언할 수 있습니다.

100과 가까울수록 얇게 표현되고, 900과 가까울수록 굵게 표현됩니다.

하지만, font-famliy에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있는 점 참고해 주세요.

 

2. font-style

font-style 속성은 글자의 스타일을 지정하는 역할을 하는데요.

<em> 태그를 사용하게되면 기본적으로 기울임꼴(italic)이 적용되어 있는 것을 확인하실 수 있습니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

이렇게 글자의 스타일을 지정하는 font-style은 아래와 같이 선언합니다.

 

h1 {
    font-style:normal;
}

 

font-style의 기본값은 normal이며, normal을 선언하게되면 아무런 스타일이 적용되지 않은 글자가 출력됩니다.

그 외의 스타일로는 italic, oblique 가 있으며, italic은 기울임꼴, oblique는 기울기에 대한 각도를 추가로 지정할 수 있습니다.

기울기에 대한 각도는 -90~90도이며, 별도로 지정하지 않는 경우 자동으로 14도가 적용됩니다.

 

속성 값을 찾아보다 보면 initial과 inherit을 확인하실 수 있을텐데요.

initial은 해당 태그의 기본 값을 사용하도록 하는 속성 값이고, inherit은 부모의 속성 값을 상속받도록 하는 속성 값인 점 참고해 주세요.

 

3. color

color 속성은 글자의 색상을 지정할 때 사용하는데요.

color 속성으로 색상을 지정할 때 선언하는 방법이 몇가지가 있습니다.

 

h1 {
    color:색상 값;
}

 

color 속성은 위와 같이 선언하며, 색상 값에 들어가는 방법에 대하여 설명드리겠습니다.

 

▶ 컬러 키워드

CSS 자체에서 사용 가능한 문자 식별자인데요.

red, black, blue, yellow, green 등과 같이 미리 정의되어 있는 키워드를 통하여 색상을 표현할 수 있습니다.

참고로, transparent는 투명색을 나타내는 키워드입니다.

 

▶ 16진법

#RRGGBB와 같이 6자리의 16진수로 나타내는 방법이며, RR은 적색, GG는 녹색, BB는 청색을 의미합니다.

각 자리에 맞는 색상을 조합하여 사용할 수 있으며, 알파벳은 대소문자를 따로 구분하지 않습니다.

 

▶ 16진법

6자리의 16진수에서 RR, GG, BB 중 두 자리가 같은 값을 가지는 경우 3자리로 축약하여 사용이 가능합니다.

예를 들어, #FFFFFF는 #FFF로, #000000은 #000으로 사용이 가능합니다.

 

▶ RGB

RGB는 R(적색), G(녹색), B(청색)의 강도를 정의하는 방법입니다.

0~255까지 정수로 된 값을 지정할 수 있으며, 0에 가까우면 검정색, 255에 가까우면 흰색입니다.

예를 들어, RGB(255,255,255)는 흰색을 나타내며, #FFF와 동일합니다.

 

▶ RGBA

RGBA는 RGB 방법에서 A(투명도)가 추가된 방법입니다.

A 값은 0~1사이의 값을 지정할 수 있으며, RGB와는 다르게 소수점으로도 표기가 가능합니다.

0에 가까울수록 투명, 1에 가까울수록 불투명하게 표현됩니다.

예를 들어, RGBA(255,255,255,0)은 투명한 색상을 가지게 됩니다.

 

이렇게 글자와 관련된 스타일에 대하여 알아보았는데요.

다음 포스팅에서는 서버에 저장하여 사용하거나, 웹 경로를 통해 사용하는 폰트에 대하여 알아보겠습니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)