CSS 기본 Style 변경

CSS에서 가장 기본적인 style 적용에 대해 알아보겠다.

먼저 색상변경에 대한 것을 살펴보겠다.

 - color : red;

 - color : rgba(255,0,0,0.5);

 - color : #ff0000;

첫번째 방법은 가장 단순한 정해져 있는 색상의 이름을 통해 설정하는 방식이다.

두번째로는 rgb를 사용해서 색을 표현하는 것인데 각 속성의 최댓값은 255이며

네번째 값은 알파값이라고 부르며 희미한 정도를 나타내는 속성이다.

세번째는 우리가 흔히 아는 16진수를 통해 색을 나타낸 것인데

인터넷에서 색상표를 이용하던가 

다음과 같이 style 목록에서 나오는 

color 옆에 있는 네모를 클릭해서 직접 색깔을 바꿔보면서 선택할 수도 있다.

다음으로는 font-size에 대해서 살펴보자

우리가 잘 알고있는 font-size : 16px 과 같은 방식으로

픽셀을 직접 지정해주는 방법 이외에

font-size : 1em 과 같이 설정해주는 방식도 있다.

기본적으로 가지는 글자의 크기가 16px인데 만약에 2em이라고 설정을 해주면

글자의 크기는 16의 2배인 32px으로 설정이 된다.

만약 기존에 다른 설정을 통해 글자가 16px이 아닌 다른 크기를 가졌을지라도

em을 통해 한번 더 사이즈를 주면 기존의 것의 n배의 크기를 가지게 된다.

이 외에도 font-family 라는 것을 통해 글꼴을 설정할 수 있으며

background-color을 통해 배경색을 선택할 수 있다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16675/