[CSS] 글자 꾸미기(color, font)

HTML 에서 가장 많이 손을 봐야 하는게 글자의 스타일 변경하는게 아닐까 싶다.

 

앞서 보았던 선택자 태그 중

classs 태그를 이용해 글자의 색을 지정하고 모양 변경(스타일,굵기)하는 방법을 보려고 한다.

---

-색 변경하기

먼저 색을 변경하기에 앞서 색을 어떤 방식으로 지정하는지 살펴보자.

색을 지정할 때 기본적으로 빛의 삼원색인 빨강, 녹색, 파랑의 세가지(RGB 값)으로 지정한다.

아래와 같은 서식으로 나타낸다.

색명	red
rgb() 와 %값	rgb(100%,0,0)
rgb()와 십진수 값	rgb(255,0,0)	0~255 수치로 표현
#와 16진수 값	#ff0000	# 뒤에 6자리 중 1,2번째는 빨강, 3,4 번째는 녹색,  5,6 번째는 파랑. 00~ff의 16진수(256단계)로 표현한다

즉, color 안에 4가지 방식중 맘에 드는 것으로 선택해서 쓰면 된다.

 

rgb 표는 추후에~

 

예를 보면 쉽게 알 수 있다. 

 

4개 중에 색명하고 16진수 값을 적용해 보았다. 둘다 빨강을 나타낸다. 당연히 결과는 둘다 똑같은 색으로 나올것이다.

 

똑같은색

쓰고 싶은대로 쓰면 된다. 그런데, 보통 rgb 표를 가지고 있으면 수치를 넣어서 자신이 맘에 드는 색을 찾아서 하는게 좋아보인다.

---

-글자 모양 변경하기

이번엔 글자의 모양을 바꾸는 요소에 대해서 알아보자.

텍스트 요소는 굉장히 많다. 글꼴 사이즈, 스타일, 굵게 할건지 기울임을 넣을것인지 위치는 어떻게 할 것인지 등등 세세히 들어가면 할 수 있는게 많은데 그중에서 문서작성할때 쓰던 기본적인 것만 다루려고 한다.

 

---

--font-size

글꼴 사이즈를 정하는 태그이다. 

 

.myfont{font-size :120%;}

 

이런 식으로 쓰게 될 것이다.

 

단위는 %뿐만 아니라 더 있다.

단위	요소
%	정해진 글꼴에 대한 배율
px	세로 픽셀의 크기
em	현재 문자의 크기에 대한 배율
ex	소문자 x의 크기에 대한 배율
이름지정	작은것부터 (xx-small, x-small, small, medium, large, x-large, xx-large)

---

--font-style 

font-style 은 글꼴의 기울임을 나타내고 싶을 때 쓴다.

 

.myfont{font-style: italic;}

 

종류는 세가지이다.

normal	표준	적용
italic	이탤릭체	적용
oblique	기울임체	적용

'적용' 으로 각각을 나타냈다. 보면 알겠지만 이탤릭체와 기울임체는 거의 다른게 없는 걸 볼 수 있다.

---

--font-weight

font-weight 는 글자의 굵기를 지정한다.

 

.myfont{font-weight : bold;}

 

normal	표준(=400)
bold	굵은문자(=700)
bolder	상속값보다 굵은 문자
lighter	상속값보다 가는 문자
inherit	부모 요소의 상속
100,200,...,900	숫자가 클수록 진하다.

상속은 나중에 부모 요소에 대한 설명을 하면서 다시 설명하겠다.

숫자로 예를 보면 어떤걸 써야하는지 알기 쉬울 것이다.

 

---

--font-family

글꼴의 종류를 지정한다.

 

.myfont{font-family ; serif;

 

몇가지만 소개한다(복수 지정도 가능하다)

serif	명조체 계열
sans-serif	고딕체 계열
cursive	필기체 계열
fantasy	화려하게
monospace	글자폭이 같은 글꼴

 

대충 이런 느낌을 준다.

 

 

font-family 는 중복으로 넣을수 있는데, 해당 글꼴이 없으면 그 다음 글꼴로 대체되는 방식이다.

 

.myfont{font-family : serif, cursive, monospace}

 

이렇게 설정하면, 접속한 기기에서 먼저 serif 글꼴이 있는지 확인하고, 없으면 cursive, 또 없으면 monospace 이런 식으로 글꼴을 찾아서 있는 글꼴을 쓰게 된다.

 

이런 원리를 이용하면 , 영어 글꼴과 한글 글꼴을 다르게 할 수 있다.

먼저, 한글 글꼴이 없는 글꼴을 넣고, 그 다음에 한글 글꼴을 넣으면 영어에는 영어글꼴이 적용되고 한글에는 한글글꼴을 적용할 수 있다.