K_blueprint
HTML5로 색 꾸미기 본문
- CSS3에서 색은 RGB, RGBA, HSL 등 3개의 방법으로 표현하게 되는데 가장 많이 사용되는 RGB에 대해서 살펴보려고 한다.
- 먼저 색을 표현하는 방법은 크게 3가지 정도가 있는데 이는 아래와 같다.
- 16진수 코드로 색 표현
- 10진수 코드와 RGB()로 표현
- 색 이름으로 표현
- 이 3가지와 관련해서 보다 자세히 살펴보도록 하자.
[16진수 코드로 색 표현]
- CSS3에서 색은 빛의 3원 색인 빨강(red), 초록(green), 파랑(blue)의 성문으로 #rrggbb의 16진수로 표현하게 된다.
- 아래는 <div> 태그 내의 모든 내용을 '보라색'으로 출력하는 스타일 시트이다.
div { color : #8A2BE2; }
- CSS에서 하나의 색은 총 24비트로 표현이 되기 때문에 2^24 즉, 1600만 개 정도의 색을 표현할 수 있다고 한다.
[10진수 코드와 RGB()로 표현]
- 해당 방법은 'RGB() 표현법'으로 각각의 성분을 0~255 사이의 10진수로 색을 표현한다.
- 예를 들어 <div> 태그 내의 모든 내용을 보라색으로 꾸미는 RGB() 표현법은 아래와 같다.
div { color : rgb(138, 43, 226); }
[색 이름으로 표현]
- 마지막 방법은 색 이름으로 표현하는 직관적이고 제일 단순한 방법이다.
- CSS3 표준에서는 총 140개의 색의 이름을 정의하고 있기 때문에 기존에 정의된 이름(ex. red, blue 등)을 사용하여 색을 적용시키는 방법이다.
- 아래는 색 이름으로 색을 지정한 예시 코드이다.
div { color : blueviolet; }
+ 색 관련 프로퍼티
- CSS3에는 색을 사용하는 여러 가지의 프로퍼티가 있는데 가장 자주 쓰이는 3가지에 대해 알아보자.
- color >>> '태그 내의 텍스트 색 지정'
- background-color >>> ' 태그의 배경 색을 지정'
- border-color >>> '태그의 테두리 선의 색을 지정'
아래는 다양한 문장들을 색으로 칠하며 꾸며놓은 코드와 출력 결과이다.
(소스코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>여러가지 색 가지고 놀기</title>
<style>
div{
margin-left : 30px;
margin-right : 20px;
margin-bottom : 10px;
border-radius: 15px;
color : green; /*모든 글자색은 초록 색상*/
}
</style>
</head>
<body>
<h3>색을 가지고 놀아봅시다!</h3>
<hr>
<div style="background-color: deepskyblue;">
<b>저는 '딥블루스카이'입니다.</b>
</div>
<div style="background-color: fuchsia;">
<b>저는 '마젠타'입니다.</b>
</div>
<div style="background-color : white">
<b>저는 '화이트'입니다.</b>
</div>
</body>
</html>
(출력결과)
★ 해당 게시물은 "HTML5+CSS3+Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ★
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML로 박스 만들기 (2) | 2024.11.20 |
|---|---|
| HTML5로 텍스트 꾸미기 (1) | 2024.11.19 |
| CSS3 규칙과 셀렉터 (0) | 2024.11.15 |
| CSS3으로 웹 페이지 꾸미기 (4) | 2024.11.12 |
| HTML5로 여러가지 입력 만들기 (3) | 2024.11.11 |
