이번 포스팅에서는 각종 HTML 태그내에서 쓰이는 배경 관련 속성에 대해서 알아보도록 하겠습니다. 배경관련 속성에는 다음과 같은 것들이 있습니다.
background-color 는 배경 색상을 설정하기 위한 속성입니다.
background-image 는 배경 이미지를 설정하기 위한 속성입니다.
background-repeat 는 배경 이미지의 반복 여부를 설정하기 위한 속성입니다.
background-position 는 배경 이미지의 위치를 설정하기 위한 속성입니다.
background-attachment 는 배경 이미지의 스크롤링을 설정하기 위한 속성입니다.
background property is used as shorthand to specify a number of other background properties.
|
This will produce following result:
This text has a yellow background color. |
|
|
아래 예제는 배경 이미지를 세로로 반복시키는 예제입니다.
|
아래는 배경 이미지를 가로로 반복시키는 예제입니다.
|
배경 이미지를 왼쪽에서 100 픽셀 떨어뜨려서 위치시키는 예제입니다.
|
다으므 예제는 배경 이미지의 위치를 왼쪽에서 100 픽셀 그리고 위에서 200 픽셀 떨어진 곳에 위치시키는 예제입니다.
|
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
아래 예제는 배경이미지를 고정시키는 예제입니다.
|
이번 예제는 스크롤링을 해주는 예제네요.
|
background 속성은 여러개의 배경관련 속성을 한꺼번에 설정할 수 있도록 해줍니다.
|
Reference : http://www.tutorialspoint.com/css/css_backgrounds.htm
[CSS] 8. Text ( 텍스트 설정 ) (0) | 2016.06.12 |
---|---|
[CSS] 7. Fonts ( 폰트 설정 ) (0) | 2016.06.12 |
[CSS] 5. Colors ( 색깔 ) (0) | 2016.06.12 |
[CSS] 4. Units ( 단위 ) (0) | 2016.06.12 |
[CSS] 3. HTML에 CSS링크 - Associating Styles with HTML (0) | 2016.06.12 |
CSS 에서 색깔을 지정하는 방법은 아래처럼 5가지 방법이 있습니다
Format | Syntax | Example |
---|---|---|
Hex Code | #RRGGBB | p{color:#FF0000;} |
Short Hex Code | #RGB | p{color:#6A7;} |
RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
keyword | aqua, black, etc. | p{color:teal;} |
아래에서 좀 더 자세히 알아보도록 하죠.
16진수 코드로 표현할 때는 # 기호를 먼저 붙여주고 6자리의 RRGGBB 코드를 넣어주면 됩니다. RGB의 R은 빨강, G는 초록, B는 파랑입니다. RR이라는 것은 빨강을 나타내는 16진수 숫자를 말합니다. 예를 들면 00부터 FF까지의 값이 됩니다. GG와 BB역시 마찬가지입니다.
아래는 이렇게 16진수를 이용해서 색깔을 표시했을 때 어떻게 화면에 보여지는지를 보여주는 표입니다.
Color | Color HEX |
---|---|
#000000 | |
#FF0000 | |
#00FF00 | |
#0000FF | |
#FFFF00 | |
#00FFFF | |
#FF00FF | |
#C0C0C0 | |
#FFFFFF |
Color | Color HEX |
---|---|
#000 | |
#F00 | |
#0F0 | |
#0FF | |
#FF0 | |
#0FF | |
#F0F | |
#FFF |
이 방법은 rgb( ) 속성을 이용합니다. 0 부터 255 숫자나 퍼센트를 값에 넣어줄 수 있습니다.
NOTE: 모든 브라우저가 rgb() 속성을 지원하는 것이 아니기 때문에 이 방법은 권장하지 않습니다.
Color | Color RGB |
---|---|
rgb(0,0,0) | |
rgb(255,0,0) | |
rgb(0,255,0) | |
rgb(0,0,255) | |
rgb(255,255,0) | |
rgb(0,255,255) | |
rgb(255,0,255) | |
rgb(192,192,192) | |
rgb(255,255,255) |
예제 :
<body style="color:rgb(0,0,255); background-color:rgb(0,255,0);">
색깔 코드를 만들어주는 칼라 코드 빌더라는게 있네요. HTML Color Code Builder.
아래 표는 브라우저의 영향이나 컴퓨터 디스플레이의 영향을 가장 안받는 그런 칼라표라고 하네요. 총 216 개의 색깔이 있습니다.
색깔을 보고 맘에드는거 코드 골라다가 쓰시면 됩니당. ^____^
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Reference : http://www.tutorialspoint.com/css/css_colors.htm
[CSS] 7. Fonts ( 폰트 설정 ) (0) | 2016.06.12 |
---|---|
[CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
[CSS] 4. Units ( 단위 ) (0) | 2016.06.12 |
[CSS] 3. HTML에 CSS링크 - Associating Styles with HTML (0) | 2016.06.12 |
[CSS] 2. Syntax ( 문법, 사용법 ) (0) | 2016.06.12 |