예제 4-10. 색 활용
WEB/CSS3-CONCEPT 2017. 11. 4. 18:52 |색
첫 번째 방법. 16진수 코드로 색 표현
#8A2BE2
red 성분이 0x8A(10진수 138)
green 성분이 0x2B(10진수 43)
blue 성분이 0xE2(10진수 226)
*왼쪽부터 차례대로 red, green, blue
1 | div { color : #8A2BE2 } | cs |
두 번째 방법. 10진수 코드와 RGB()로 표현
rgb(138, 43, 226)
RGB() 표기법으로 r,g,b의 각 성분을 0~255 사이의 10진수로 색을 표현
*왼쪽부터 차례대로 red, green, blue
1 | div { color : rgb(138, 43, 226); } | cs |
세 번째 방법. 색 이름으로 표현
1 | div { color : blueviolet } | cs |
이름 - 코드
brown - #A52A2A
blueviolet - #8A2BE2
darkorange - #FF8C00
deepskyblue - #00BFFF
gold - #FFD700
oliverdrab - #6B8E23
1 2 3 | color : 색 /* HTML 태그의 텍스트 글자색 */ background-color : 색 /* HTML 태그의 배경 색*/ border-color : 색 /* HTML 태그의 테두리 색*/ | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3 색 활용</title> <style> div { margin-left : 30px; margin-right : 30px; margin-bottom : 10px; color : white; } </style> </head> <body> <h3>CSS3 색 활용</h3> <hr> <div style="background-color:deepskyblue"> deepskyblue(#00BFFF)</div> <div style="background-color:brown"> brown(#A52A2A)</div> <div style="background-color:fuchsia"> fuchsia(#FF00FF)</div> <div style="background-color:darkorange"> darkorange(#FF8C00)</div> <div style="background-color:#008B8B"> darkcyan(#008B8B)</div> <div style="background-color:#6B8E23"> olivedrab (#6B8E23)</div> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
예제 4-12. CSS3 폰트 활용 (0) | 2017.11.04 |
---|---|
예제 4-11. 텍스트 꾸미기 (0) | 2017.11.04 |
예제 4-9. 셀렉터 활용. 3. 셀렉터. (0) | 2017.11.04 |
예제 4-8. CSS3 규칙. 스타일 합치기(cascading)와 오버라이딩(overriding). 여러 스타일 시트가 중첩되는 경우 (0) | 2017.11.04 |
예제 4-7. CSS 규칙, CSS 스타일은 부모 태그로부터 상속된다. 부모 스타일 상속 (0) | 2017.11.04 |