본문 바로가기
웹 공부/3. CSS3

CSS3 - CSS 스타일 - 색상 지정방법 (5)

by 긴냥이 2017. 5. 29.
반응형


CSS3 - CSS 스타일 - 색상 지정방법 (5)




오늘은 CSS3의 다섯번째 내용으로 CSS 스타일 중 색상에

 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다.






CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)




css 스타일 - 색상이란?
 

먼저 css 에서 색상을 표현하는 방법입니다.

css 에서는 색상을 표현 하는 방법이 있는데 이 앞전 포스팅에 서 색상을

지정했던 영문 색상으로 지정 할 수도 있고16진수 10진수 퍼센트 등으로 표현이 가능 합니다.



 방법

내용 

 이름으로 표현

 "red" 

 16진수로 표현

 #000000 

 10진수로 표현

 rgb(255,255,255) 

 퍼센트로 표현

 rgb(100%, 0%, 0%) 









<css 색상 표현 방법 예시>




위와 같은 css 색상 표현 방법은 color , 이나 background 에서 사용이 되는데 


아래 부터는 body태그를 기준으로 하나 하나 사용법을 알아 보겠습니다.











1. 이름으로 색상표현








먼저 이름으로 색상을 나태내는방법입니다.

이러한 방법은 위와 같이 색상의 이름으로 사용하는 방법인데 가장 쉬우며

거의 흔히 쓰이는 색상이름 (red, yellow, white, blue, black, gray)등

여러가지 색상이름을 사용 할 수 있습니다. ^^














2. 16진수로 색상표현





16진수로 색상표현 방법입니다.

이러한 16진수코드 같은 경우 원하는 색을 임의로 포토샵이나

네이버 검색창에 "색상표"를 치시면 나오게 되는데 참고하여 쓰시면 될 것 같습니다.












3. rgb로 색상표현




이번 내용은 rgb로 색상 표현 방식 입니다.

rgb로 색상표 현하는 방법은 위와 같이 숫자 0에서 255 사이로 rgb 값을 각각

조정하는 방법과 100퍼센트 안 퍼센트로 표현하는 방법이 있습니다.



이러한 rgb 방식의 색상같은 것도 위 에서 이야기한 포토샵 또는

네이버 검색창에 "색상표"를 검색해 간단히 찾을 수 있습니다. ^^











이상 CSS3 - CSS 스타일 - 색상 지정방법 (5)에 

관련된 포스팅을 마치도록 하겠습니다.






반응형

댓글