안녕하세요 대남이 입니다. 이번에는 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> 태그의 배경색을 푸른색으로 나타낼 수 있습니다.
여러가지 방법 중 상황에 맞게 편한 방법으로 적용시키면 됩니다.
-
오늘은 색상 적용에 관한여 알아보았습니다. 정보가 유용하셨는지요.
다음번에는 좀 더 좋은 강좌와 유용한 정보로 찾아뵙겠습니다. 감사합니다 !
'PROGRAMING > CSS' 카테고리의 다른 글
| #04 CSS강좌 html 폰트 크기, 스타일 적용 (0) | 2017.11.27 |
|---|---|
| #02 CSS강좌 css 삽입하는 방법 (0) | 2017.11.25 |
| #01 CSS 강좌 선택자가 무엇인지 개념 그리고 종류 (0) | 2017.11.18 |
