읽으면서 배우는 CSS, 색상 변경하기

읽으면서 배우는 CSS, 색상 변경하기

출처: Code Academy

CSS를 공부하는데 있어 가장 기본은 사용 법이다. HTML문 안에서 CSS를 어떻게 사용하는지 아래 그림을 보면 알 수 있다. 

출처: Code Academy

두 가지 link 사용이 나와있는데 각각 차이가 있다. 첫번 째 링크는 인터넷 상에 있는 주소를 직접 입력하여 CSS를 적용하는 것이고, 두 번째 방법은 직접 만든 CSS 파일을 가지고 적용하는 방법이다. 

이 글의 첫 이미지 처럼 selector를 지정하여 html 내에서 어떤 테그에 저 속성을 지정할지 정해야 한다. 그리고 그 뒤에는 적용하고자 하는 속성 즉 property를 지정해 폰트 크기, 사이즈, 배경 색깔, 배경 이미지 등을 지정할 수 있다. 속성 다음은 반드시 콜론( : ) 을 넣어 줘야하며 각각의 속성마다 세미콜론( ; )으로 마쳐야 한다. 

색상 변경하기

색상을 변경하는 방법에는 몇 가지가 있다. 색상 이름을 직접 입력 하는 방법, GRB 코드를 입려하는 방법, Hex 값을 입력하는 방법, HSL 값을 입력하는 방법 등이 있다.

1. 색상 이름을 직접 입력 하는 방법

색상을 직접 입력 할 수 있는 가지수는 무려 147개가 있다. 색상에 대해 입력 가능한 것을 보려면 아래 그림을 클릭 하면된다. 색상 위에 마우스를 올리면 해당 색상의 이름이 나온다. 

출처: Code Academy

2. Hex 코드를 입력하는 방법

위의 그림 처럼 입력해도 색상 값을 지정할 수 있다. # 뒤의 가장 앞의 두 자리는 red 값을, 중간 두 자리는 blue 값을, 가장 마지막 두 자리는 green 값을 나타내며 이 모든 값을 섞었을 때 색상이 최종적으로 나타난다. 

3. HSL 값을 입력하는 방법

hsl(Hue, Saturation, Lightness) 즉 색상, 채도, 명도로 볼 수 있는데 이 값을 입력해서 색상 값을 출력할 수 있다. 

Hue 값은 0 ~ 360 까지 입력이 가능하며 채도와 명도는 퍼센트로 입력한다. 

rgb나 hsl에 'a'를 붙이면 alpha 즉 투명도를 설정할 수 있는데 이 투명도는 0~1까지 값을 입력할 수 있다. 

투명도가 낮을 수록 유리창이 깨끗하다고 생각하면 된다. 투명도가 1이면 유리창이지만 뒤를 볼 수 없다고 생각하면 된다.