#03 CSS강좌 html 색 넣기

안녕하세요 대남이 입니다. 이번에는 css로 html 색상을 바꿔보는 방법에대해 배워보겠습니다.

일단 처음으로 색상을 변경하는 법에대해 알아 볼텐데요. 색상은 웹페이지의 배경색이나 폰트색 등 여러곳에 적용됩니다.

그렇기 때문에 잘 배워두시면 유용하게 쓰이게 될 겁니다.

색상을 적용하는 방법은 여러가지 있습니다. 표를 통하여 보겠습니다.

표현 방법	예시
이름으로 표현	red
16진수로 표현	#FF0000
10진수로 표현	rgb(255,0,0)
퍼센트로 표현	rgb(100%,0%,0%)

다음과 같이 표현하여 색상을 적용할 수 있습니다.

그럼 각각 간단한 예제를 보겠습니다.

---

1. 이름으로 색상 적용

색상을 이름으로 나타내는 방법이 가장 쉽습니다. 적용 시키자하는 속성에다가 색상 값을 적어주기만 하면 적용됩니다.

h2 태그의 배경 색을 푸른색으로 하는 간단한 예시입니다.

색상을 적용할 때 이름을 적는 방법으로 코딩하였습니다.

이렇게 background-color : blue; 로 값을 이름으로 적어주시면 됩니다.

---

2. 16진수로 색상을 적용시키는 법

색상은 기본적으로 16진수 코드로 정의됩니다. 그 코드는 빨간색,녹색,청색 값을 각각 2자리의 16진수로 표현한 것 입니다.

각 기본 색상에 대한 가장 낮은 값이 0이고 16진수로는 00 으로 표현합니다. 다음으로 가장 높은 값은 255

16진수로는 FF로 표현합니다. 값을 정하는 하나의 컬러값은 # OOOOOO 이런식으로 결정 됩니다.

간단한 예시 : # ff 00 00 ( 순서 : r (red) , g (green), b (blue) )

16진수코드는 #으로 시작하여야 합니다. 이 값은 빨간색 성분이 ff, 녹색 성분이 00, 청색 성분이 00을 합친 색입니다.

그럼 위에서 보았던 <h2> 태그의 색상을 적용한 것을 16진수로 적용할때를 보겠습니다.

이처럼 #0000ff 로 표현하면 됩니다.

---

3. rgb 값으로 색상 적용하기

이번에는 rgb 값을 적용하는 방법으로 색상을 적용하는 방법입니다. rgb를 퍼센트로 표현 하는 방법과 0 ~ 255 사이의

정수를 정하는 방법이 있습니다. rgb 퍼센트로 정하는 방법의 표현 방법은 다음과 같습니다.

background-color : rgb(60%, 50%, 20%);

이와 같이 각 함량을 퍼센트로 표현하는것 입니다.

두번째는 0 - 255 의 정수의 값을 정해주는 것 입니다.

background-color : rgb(153, 23, 54);

이렇게 정해주는 방법입니다.

그럼 <h2> 태그예시를 rgb 값을 정하는 방식으로 코딩해보겠습니다.

이 처럼 나타냅니다. 그러면 값으로 지정해보겠습니다.

이렇게 바꿔주면 됩니다. 여러가지 방법으로 <h2> 태그의 배경색을 푸른색으로 나타낼 수 있습니다.

여러가지 방법 중 상황에 맞게 편한 방법으로 적용시키면 됩니다.

-

오늘은 색상 적용에 관한여 알아보았습니다. 정보가 유용하셨는지요.

다음번에는 좀 더 좋은 강좌와 유용한 정보로 찾아뵙겠습니다. 감사합니다 !