본문 바로가기

홈페이지만들기/Html_css&css3

CSS style 컬러 기본설정

반응형

CSS style컬러 기본설정


홈페이지를 디자인 할때 가장 중요한건 css style중에 font color입니다.

홈페이지 제작하거나 테이블 그리고 네비게이션등을 만들때 가장 기본적으로 알아두어야 할 css style color 속성을 알려 드리겠습니다.

컬러는 크게 html에서 대표적으로 쓰는 기본색상black (검정), silver (은색)등이 있으며 두번째는 16진수로 나타내는 정의가 있으며, RGB (RED, GREEN, BLUE)가 있습니다. 이들은 전부 웹상에서 가장 흔하게 사용하는 색상지정입니다. 하나하나 이해를 돕자면 아래의 표를 참고하시기 바랍니다.





background-color="white" 백그라운드 색상 과 font-color="black" 텍스트 색상 그리고 링크 속성까지 a hover="red"등 여러가지로 사용할수 있습니다.


참고로 16진수식 컬러형태 샘플<p style="color:#000000">이런식으로 나타냅니다.</p>


000000
330000
660000
990000
CC0000
FF0000
003300
333300
663300
993300
CC3300
FF3300
006600
336600
666600
996600
CC6600
FF6600
009900
339900
669900
999900
CC9900
FF9900
00CC00
33CC00
66CC00
99CC00
CCCC00
FFCC00
00FF00
33FF00
66FF00
99FF00
CCFF00
FFFF00
000033
330033
660033
990033
CC0033
FF0033
003333
333333
663333
993333
CC3333
FF3333
006633
336633
666633
996633
CC6633
FF6633
009933
339933
669933
999933
CC9933
FF9933
00CC33
33CC33
66CC33
99CC33
CCCC33
FFCC33
00FF33
33FF33
66FF33
99FF33
CCFF33
FFFF33
0000CC
3300CC
6600CC
9900CC
CC00CC
FF00CC
0033CC
3333CC
6633CC
9933CC
CC33CC
FF33CC
0066CC
3366CC
6666CC
9966CC
CC66CC
FF66CC
0099CC
3399CC
6699CC
9999CC
CC99CC
FF99CC
00CCCC
33CCCC
66CCCC
99CCCC
CCCCCC
FFCCCC
00FFCC
33FFCC
66FFCC
99FFCC
CCFFCC
FFFFCC
0000FF
3300FF
6600FF
9900FF
CC00FF
FF00FF
0033FF
3333FF
6633FF
9933FF
CC33FF
FF33FF
0066FF
3366FF
6666FF
9966FF
CC66FF
FF66FF
0099FF
3399FF
6699FF
9999FF
CC99FF
FF99FF
00CCFF
33CCFF
66CCFF
99CCFF
CCCCFF
FFCCFF
00FFFF
33FFFF
66FFFF
99FFFF
CCFFFF
FFFFFF


<p style="color:black">이런식으로 나타냅니다.</p>


black (검정) / silver (은색) / maroon (밤색) / red (빨강) / navy (네이비) / blue (파랑) / purple (보라) / fuchsia (자홍색) / green (초록) / lime (라임) / olive (올리브색) / yellow (노랑) / teal (틸) / aqua (아쿠아) / gray (회색) / white (흰색) 



RGB [ RED, GREEN, BLUE ]표현하기

<p style="color:rgb(0, 0, 0)">이런식으로 나타냅니다.</p>

  • (0, 0, 0) 검정
  • (255, 255, 255) 하양
  • (255, 0, 0) 빨강
  • (0, 255, 0) 초록
  • (0, 0, 255) 파랑
  • (255, 255, 0) 노랑
  • (0, 255, 255) 시안
  • (255, 0, 255) 마젠타

한 문단 전체에 지정하지 않고 일부에만 색상을 지정할려면 span의 태그를 사용하여 지정하면 됩니다.

<p>태그 문단 전체의 색을 지정하지 않고 span의 태그를 사용하여 <span style="color:red">일부에만</span> 색을 지정할 수 있습니다.</p>

문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다.



테이블 안에도 사용이 가능합니다.


<table>

  <tbody>

    <tr>

      <td style="color:red">이 셀안의 텍스트트 붉은색으로 지정됩니다.</td>

    </tr>

  </tbody>

</table>


td안의 텍스트를 붉은색으로 지정됩니다.





[홈페이지만들기] - 워드프레스 Vantage테마 Navigation

[홈페이지만들기] - Vantage무료테마 기능 Home - Home Page Slider

[홈페이지만들기] - vertical-align와 text-align CSS 활용하여 정렬하기

[홈페이지만들기] - html 순서 및 목록 만들기

[홈페이지만들기] - html 창크기 조절(반응형코딩)

[홈페이지만들기] - ul li 가로정렬로 메뉴만들기 (css가로정렬)


반응형