color Property

Home > Document > CSS > Font > color

페이지 목차

color Property

color는 웹 페이지의 모든 부분에 적용되는 중요한 요소 입니다. HTML body Element 의 bgcolor 속성이라든지 Table 의 bordercolor 등 많은 부분에 적용되지만, CSS 에서의 color Property 는 글자의 색상을 뜻합니다. 나모 에디터 같은 프로그램에서 전경색이라고 표현되는 Property 입니다. 이 페이지에서는 color Property 에 대해 알아보고, 몇 가지 DHTML 예제를 살펴 보겠습니다.

[표 보는 방법]

color Property
Value	<color> \| Inherit
Initial	UA(user agent)에 의해 좌우됨
Applies to	all elements
Inherited	Yes
Percentages	N/A
Media	Visual
HTML Syntax	{ color: sColor }
Scripting	object.style.color [ = sColor ]

Mouse Event를 이용한 color Property 예제

1. onMouseOver를 이용한 글자색 바꾸기

<HTML>
    <HEAD>
        <TITLE></TITLE>
    <STYLE type="text/css">
    <!-- 
   .mouseOver {color:red}    
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <P onmouseover="this.className='mouseover' ">마우스를 올리면 빨간 글자가 된다네요.</P>
    </BODY>
</HTML>

출력결과

마우스를 올리면 빨간 글자가 된다네요.

그럼 위의 Code를 좀 잘펴 보져. 일단 .mouseOver 라는 class 를 하나 지정 하고 color Property의 value를 red 로 지정 했습니다. 다음에

<P onmouseover="this.className='mouseover' ">...

이 부분을 분석해 보면 mouse 가 over(영역 위로 들어가는)하는 순간(on) 그 Object 자신(this)의 class 이름(className)을 mouseOver 로 지정하라... 머 이런 뜻이겠져. 이와 같이 Tag에 직접 Scripting하는 방식을 Inline scripting 이라고 합니다. 이 때 인용부호 속에 this 부터 나머지 부분 전체를 이중 따옴표 속에 넣고 mouseover는 단순 따옴표 속에 넣습니다. 반대로 해도 상관 없구요.

그런데 지금 상황은 마우스가 빠져 나와도 글자색이 여전히 red 로 남아 있습니다. 물론 의도적으로 그렇게 한거라면 상관 없지만 만약 빠져 나왔을 때 원래 색으로 돌아가게 하고 싶다면 다음과 같이 coding 합니다.

2. onMouseOver를 이용하여 글자색 바꾸고 onMouseOut으로 원래 색 만들기

<HTML>
    <HEAD>
        <TITLE></TITLE>
    <STYLE type="text/css">
    <!-- 
   .mouseOver {color:red}    
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <P onmouseover="this.className='mouseover' " onmouseout="this.className='' ">
        마우스를 올리면 빨간 글자가 된다네요. 빼면 원래 대로 되구...
    </P>
    </BODY>
</HTML>

출력결과

마우스를 올리면 빨간 글자가 된다네요. 빼면 원래 대로 되구...

위의 Code 를 분석해 봅시다.

<P onmouseover="this.className='mouseover' " onmouseout="this.className='' ">

이 부분은 mouse가 영역 밖으로 빠져나가는(out) 순간 (on) 그 Object 자신(this)의 class 이름(className)을 제거('') 하라는 뜻입니다. 다른 부분은 onmouseover와 같고, '' 부분은 얼핏 보면 이중 따옴표(Double quote) 같아 보이지만 단순 따옴표(Single quote) 2개가 붙어 있는 거져. 만약 붙이지 않고 ' ' 와 같이 Space 가 들어가면 작동되지 않는 에러가 납니다. 왜냐하면 Space도 엄연히 1 글자이기 때문에 색상값을 입력 받은 걸로 인식하게 되는데 Space 라는 색상은 없기 때문에 그냥 가만히 있는거져... 작은 따옴표 2개를 연달아 찍어야 됩니다.

이상으로 Mouse Event 에 대해 간단하게 알아 보았는데, 나머지 onClick, onMouseDown, onMouseUp, onDblClick, onMouseMove 등은 위의 onMouseOver, onMouseOut Event 대신 위의 Code에 대체 시켜보면 알 수 있습니다.

CSS Scripting을 이용한 글자색 바꾸기

이 번에는 CSS Scripting 을 이용하여 글자색을 바꾸어 보도록 하겠습니다. 과연 어떤 방법은 더 편한지 비교해 보시죠.

3. CSS Scripting을 이용한 글자색 바꾸기

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
    <P onmouseover="this.style.color='red';" onmouseout="this.style.color='';">
        마우스를 올리면 빨간 글자가 된다네요. 빼면 원래 대로 되구...
    </P>
    </BODY>
</HTML>

출력결과

마우스를 올리면 빨간 글자가 된다네요. 빼면 원래 대로 되구...

결과는 보다시피 똑 같습니다. 이 결과를 놓고 보았을 때 CSS Scirpting 이 확실히 편하다는 것을 알 수 있습니다. 하지만 과연 그럴까요? 어떤게 더 편한지에 대해서는 차차 설명하고, 위의 입력 Code 중에서 굵게 표시된 semi-colon( ; )을 눈여겨 보시기 바랍니다. 사실 HTML 에서도 인용부호를 사용했지만 Scripting 에서는 더 많은 인용부호를 사용하게 되는데, 위와 같이 작은 다옴표와 큰 따옴표 사이에 semi-colon을 넣으면 구분이 용이해 질 뿐더러 또 다른 이유가 있는데 그 이유는 여러 개의 property를 Scripting 할 때 semi-colon으로 구분해서 나열하기 때문이져. 예를 들어

"this.style.color='red';this.style.background='gold';......"

이런 식으로 말입니다. 그럼 다음 페이지에서...

Top

Back

New

검색