5. 색(Color)
오늘날 컴퓨터
모니터는 수백만 가지 색(color)을 표현할 수 있습니다. 이렇게
엄청난 색들 가운데서 여러분들이 원하는 색을 웹 페이지에 나타내기 위해서는 색(Color)에 대한 기본적인
이해가 필요합니다. CSS3에서 사용할 수 있는 색(Color)에
대하여 W3C에서는 작년(2011) 6월 권고안(Recommendation)을 채택하였고 해당 정보는 “http://www.w3.org/TR/css3-color/”에
있습니다.
위 권고안을 바탕으로 어떻게 색(Color)을 CSS3에서
다룰 수 있는지 알아봅니다.
5.1 색(Color) 관련 속성(Property)
색(color) 관련한 속성으로 HTML 요소(Element)의 내용(content)인 텍스트(text)의 색(color)를 설정하는데 사용되는 속성과 투명도(Transparency)를 나타내는 opacity 속성으로 나눌 수
있습니다.
먼저 color 속성을 보면 다음과 같은 형식으로 사용합니다.
HTML요소{ color: 원하는 색 | inherit }
위에서 “원하는 색”에는 “aqua”, “red”와
같이 문자열 형태의 색 키워드를 사용하거나 RGB, RGBA 같은 수치 색상값이 올 수 있으며 이를 p 요소를 이용하여 각각 나타내면 다음과 같습니다.
p{color:red}
p{color:rgb(255, 0, 0)}
p{color:rgba(100%, 0%, 0%, 1)}
이에 대한 자세한 설명은 다음에 이어지는 색(Color)을 표현하는 단위 부분에서 설명합니다. 다음으로 color 속성값으로 “inherit”가
올 수도 있습니다. “HTML요소{color:inherit}” 형태로 color 속성이 설정되면 해당 HTML요소의 color 속성은 HTML 요소의 부모 요소로부터 상속받아 적용됩니다.
다음으로 color 보다는 쉬운 투명도를 나타내는 opacity 속성은 HTML 요소(Element)의 불투명도를 나타내는 것으로 기본값은 1이며 0과 1 사이 값으로
설정하여 다음과 같이 사용합니다.
HTML요소{ opacity: 0과 1사이의 값 | inherit }
opacity
속성 역시 속성값으로 “inherit” 값을 사용할
수 있으며 color 속성에서와 마찬가지로 HTML 요소의
부모 요소로부터 상속받아 적용됩니다. 간단하게 예제를 하나 해봅니다.
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>color, opacity 예제</title>
<style type="text/css">
div{color:green;
opacity:0.5;
background:red;
}
p{color:white}
</style>
</head>
<body>
<div>
<h2>HTML5,CSS3 and
JavaScript</h2>
<p>HTML5,CSS3 and
JavaScript</p>
</div>
</body>
</html>
<style> … </style> 블록의 코드를 보면 div 요소에
대해서 색(color) 속성은 green, 불투명도(opacity)는 0.5, 배경색(background)은
빨강색(red)로 설정하고 p 요소에 대해서 색(color) 속성값으로 흰색(white)으로 설정합니다. “opacityEx.html”로 저장하고 IE9로 열어보면 다음과
같습니다.
결과에서 보는
것처럼 <style> … </style> 블록의 코드대로 적용된 것 같은데 색상은
조금 이상하게 나타납니다. 이것은 opacity가 0.5로 설정되었기 때문인데요. 위 코드에서 opacity 속성값을 1.0으로 변경 저장하고 다시 실행해보면 다음과
같이 나타납니다.
물론 위 결과들에서 이미 h2 요소의 color 속성이 내부적으로 div 요소에 의해서 상속(inheritance)되었다는 것을 알 수 있을 것입니다만 보다 확실히 하기 위해서 <style> … </style> 블록의 p 요소 스타일 부분을 “p{color:inherit}”로 변경하여 p 요소의 부모 요소인 div 요소에 설정된 color 속성값인 green이 p 요소에도 상속되는지 확인합니다. 변경 사항을 저장하고 다시 “opacityEx.html”로 저장하고 IE9로 열어봅니다.
결과에서 볼 수 있듯이 p 요소의 부모 요소인 div 요소에 설정된 color 속성값이 상속, 적용됨을 알 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6. 폰트(Font) (0) | 2013.08.04 |
|---|---|
| 5.2 색(Color)을 표현하는 방법 (0) | 2013.08.04 |
| 4. CSS에서 사용되는 수치(Measurements) (0) | 2013.08.04 |
| 3. CSS 적용 우선 순위 (2) | 2013.08.04 |
| 2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법 (0) | 2013.08.04 |
