<css 공부> 3장. 색깔 입히기

이번 장에서는 CSS를 이용해 색깔을 입히는 방법에 대해 알아보겠습니다!

---

CSS를 이용해 색을 입히기 위해서는 색을 입힐 대상이 필요한데 그 대상을 HTML로 작성해보도록 하겠습니다.

 

See the Pen OJbpqBx by JaeyongLee (@jaeyonglee960212) on CodePen.

 

짜잔!

 

간단하게 HTML 파일을 작성해보았습니다.

 

이제, 각 요소들에게 색을 입혀줄텐데 저는 color, background-color 속성을 이용해서 넣어주겠습니다.

 

우선, color와 background-color를 어떻게 사용하는지 보여드리겠습니다.

 

◈ color

-> 색을 입히고자 하는 것(클래스, 아이디, 태그 등) {

color : 원하는색;

}

◈ background-color

-> 배경색을 입히고자 하는 것(클래스, 아이디, 태그 등) {

background-color : 원하는색;

}

 

위와 같은 방식으로 색을 입힐 수 있습니다.

color의 경우 색을 입히고자 하는 것에 색이 입혀지는 반면에,

background-color는 배경에 색을 입히는 것이니 주의해주세요!

 

그리고!

 

기본적인 red, blue와 같은 색상을 제외하고 내가 원하는 색상을 찾을 때는 2가지 방법이 있는데

 

하나는 제가 자주 사용하는 사이트를 이용하는 방법입니다.

 

↓ 이 사이트입니다 ↓

 

HTML Color Codes

↑ 사이트에서 색깔 찾는 법 예시

위 사이트에 접속하셔서 원하는 색과 비슷한 색을 오른쪽 바에서 고르신 후

 

왼쪽 네모에서 원하시는 색깔을 고르시면 됩니다.

이후, 위에 뜨는 #000000 이 부분을 복사하셔서 color : #000000 이런식으로 적용하시면 됩니다. 

 

실제로 작성한 코드를 통해 보여드리도록 하겠습니다.

 

See the Pen bGBqypG by JaeyongLee (@jaeyonglee960212) on CodePen.

 

조금 이해가 되셨나요?

 

이제 여기에 background-color를 적용시켜 보겠습니다.

 

See the Pen WNopBZw by JaeyongLee (@jaeyonglee960212) on CodePen.

 

 

 

어때요? 페이지 전체에 배경색을 줘서 조금 더 분위기 있게(?) 만들어 보았습니다!

 

---

공부하면 할수록 신기한 CSS의 세계네요 ㅎㅎ

근데 여기서 센스 있으신 분들은 궁금한게 생기셨을텐데요...

네, 맞습니다.

제가 여러분들한테 각 요소를 어떻게 선택하는지에 대해 안 알려드렸죠.

그.래.서.

다음 장에서는 요소를 선택하는 선택자 (Selector)에 대해 알아보도록 하겠습니다.

그럼 다음 장까지 안녀어어엉~