Thursday, October 12, 2006
HTML-CSS : 글자 색깔 지정하기, 글자색 변경 - Color 컬러 지정
웹문서(.html)에서 글자색 즉 "전경색(Foreground Color)"을 변경할 때에는, span 등의 임의의 태그 속에서, CSS를 사용합니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
빨간색 글자입니다.
파란색 글자입니다.
좀 미묘한 색깔입니다.
위의 경우는 특정 구절에 색깔을 지정하는 법이고, 이것은 웹페이지 전체의 색깔을 한꺼번에 지정/변경하는 방법입니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
body { color:#009933; } 이것은 본문 태그인 body 속의 글자색을 한꺼번에 바꾸는 것입니다.
<body> 태그 안에서 직접 바꿀 수도 있습니다. 위의 예제에서는 background-color 로 배경색을 바꾸었습니다.
밝은 청회색 바탕에, 녹색 글씨가 나옵니다.
#E5EBF7
이런 것은, 색깔의 16진수 RGB코드입니다.
포토샵으로 RGB코드를 구하는 방법: ▶▶ [HTML/CSS] 스크롤바(Scrollbar) 색상 변경하기 (IE 전용)
▶▶ HTML-CSS] CSS 글꼴; 스타일 시트로 폰트(FONT) 지정하는 법
▶▶ HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters
글자색 직접 지정 예제
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<span style="color:red">빨간색 글자입니다.</span>
<br />
<span style="color:blue">파란색 글자입니다.</span>
<br />
<span style="color:#92B3B7">좀 미묘한 색깔입니다.</span>
<br />
<span style="color:blue">파란색 글자입니다.</span>
<br />
<span style="color:#92B3B7">좀 미묘한 색깔입니다.</span>
실행 결과
빨간색 글자입니다.
파란색 글자입니다.
좀 미묘한 색깔입니다.
본문 전체 글자색 지정
위의 경우는 특정 구절에 색깔을 지정하는 법이고, 이것은 웹페이지 전체의 색깔을 한꺼번에 지정/변경하는 방법입니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<html>
<head>
<style type="text/css">
body { color:#009933; }
</style>
</head>
<body style="background-color:#E5EBF7">
춥고 음울한 날씨가 왠지 계속되었고 나는 그 이유를 아는 데 조금이라도 도움이 될까 싶어, 구석진 창문을 열어 보았었다. 건너편 아파트 건물이 겨울에 찌들어 우울을 풍기고 있었다. 그리고 평소와 다른 무엇이 눈에 띄어 왔었다. 앞에서 설명한 바로 그것이다. 온통 잿빛인 아파트에서 저것은 유난히 두드러져 보였다. 전혀 비일상적인 어떤 존재가 불가해한 목적을 가지고 창가에 걸터앉아 음모를 계획하고 있는 것처럼 보이기도 했다.
</body>
</html>
<head>
<style type="text/css">
body { color:#009933; }
</style>
</head>
<body style="background-color:#E5EBF7">
춥고 음울한 날씨가 왠지 계속되었고 나는 그 이유를 아는 데 조금이라도 도움이 될까 싶어, 구석진 창문을 열어 보았었다. 건너편 아파트 건물이 겨울에 찌들어 우울을 풍기고 있었다. 그리고 평소와 다른 무엇이 눈에 띄어 왔었다. 앞에서 설명한 바로 그것이다. 온통 잿빛인 아파트에서 저것은 유난히 두드러져 보였다. 전혀 비일상적인 어떤 존재가 불가해한 목적을 가지고 창가에 걸터앉아 음모를 계획하고 있는 것처럼 보이기도 했다.
</body>
</html>
body { color:#009933; } 이것은 본문 태그인 body 속의 글자색을 한꺼번에 바꾸는 것입니다.
<body> 태그 안에서 직접 바꿀 수도 있습니다. 위의 예제에서는 background-color 로 배경색을 바꾸었습니다.
밝은 청회색 바탕에, 녹색 글씨가 나옵니다.
#E5EBF7
이런 것은, 색깔의 16진수 RGB코드입니다.
포토샵으로 RGB코드를 구하는 방법: ▶▶ [HTML/CSS] 스크롤바(Scrollbar) 색상 변경하기 (IE 전용)
▶▶ HTML-CSS] CSS 글꼴; 스타일 시트로 폰트(FONT) 지정하는 법
▶▶ HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home