블로그에 유용한 태그 2 - 글자 스타일 지정하기 (2) : 마우스 오버 글자 스타일 적용

* 이전 글 보기
- 블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1)

지난번에 글자에 간단한 스타일을 적용하는 것에 대해 살펴봤다. <span style="">로 적용한 스타일은 영구적인 속성이다. 쉽게 이야기해서 한 번 지정하면 계속 그 상태로 유지된다. <span style="color: tomato;">글자 색을 토마토색으로 바꾸기</span>와 같이 지속적으로 유지되는 속성이 부여된다. 그러나 style 대신 OnMouseOver와 OnMouseOut을 사용하면 커서 위치에 따라 글자의 스타일을 바꿀 수 있다.

태그 사용 방식은 이전과 비슷하다. 기본 형식은

<span OnMouseOver="this.style.속성='속성값'" OnMouseOut="this.style.속성='속성값'">

이며 OnMouseOver는 마우스 커서를 글자 위에 올렸을 때의 스타일이고 OnMouseOut은 마우스 커서를 글자에서 내렸을 때의 스타일이다. OnMouseOut은 속성 이름만 입력하고 속성값을 비워두면 마우스 커서를 글자에서 내렸을 때 원래 글자의 속성으로 되돌아간다. 여러 속성을 함께 사용할 땐 ;(세미콜론)으로 구분하고 글자 스타일을 지정할 문구가 끝나면 꼭 </span>를 입력해서 태그를 닫는다.

그런데 OnMouseOver와 OnMouseOut을 사용할 땐 주의해야 할 사항이 있다. 보통 태그는 소문자로 사용하며 특별히 대소문자를 구분하지 않는다. 그러나 OnMouseOver와 OnMouseOut을 사용할 때 this.style. 뒤의 속성값에서는 반드시 대소문자를 구분해야 한다. onmouseover 자체는 대소문자 구별없이 써도 되지만, this.style.fontSize의 대문자 S를 this.style.fontsize와 같이 소문자 s로 기록하면 태그가 적용되지 않을 수도 있다. 단, 첫 번째 글자는 대소문자 상관없이 사용할 수 있어서 FontSize나 fontSize 모두 태그가 제대로 동작한다. 말로 설명하면 복잡하니 아래 예를 보고 글자에 마우스 커서를 올려보자.

[예제 1 - 태그를 바로 사용했을 때]

<span style="color: deeppink" onmouseover="this.style.fontSize='18pt'" onmouseout="this.style.fontSize=''">
마우스를 올려보세요. 글자가 커집니다.
</span>

[예제 2 - 태그를 잘못 사용했을 때]

<span style="color: deeppink" onmouseover="this.style.fontsize='18pt'" onmouseout="this.style.fontsize=''">
마우스를 올려보세요. 글자가 커지지 않습니다.
</span>

첫 번째 예는 fontSize라고 올바르게 입력해서 마우스 커서를 올렸을 때 글자 크기가 변하지만, 두 번째 예는 fontsize라고 잘못 입력했으므로 마우스 커서를 올려도 글자 크기가 변하지 않는다. 이제 실제로 사용할 수 있는 속성 종류를 살펴보자.

▽ 각 칸의 속성 글자에 마우스 커서를 올려보세요. ▽

글자 크기	this.style.fontSize='16pt'	글자 크기는 pt(point), % 등을 사용할 수 있다.
글자 색	this.style.color='deeppink'	글자 색은 색 이름이나 html 코드, rgb 값 - rgb(xx, xx, xx) - 을 입력한다.
배경 색	this.style.backgroundColor='tomato'	배경 색은 색 이름이나 html 코드, rgb 값 - rgb(xx, xx, xx) - 을 입력한다.
글꼴	this.style.fontFamily='궁서'	글꼴 전체 이름을 입력한다.
굵기	this.style.fontWeight='900'	normal, bold, 100~900 사이 숫자를 입력한다.
꾸미기	this.style.textDecoration='none'	none, underline, overline, line-through, blink를 사용한다. 응용하면 두 줄이나 세 줄, 두 줄+깜빡임 등 여러 효과를 함께 사용할 수 있다. 또 글씨와 줄 색을 다르게도 할 수 있다. 아래 글자에 마우스 커서를 올려보자. <span OnMouseOver="this.style.textDecoration='line-through'; this.style.color='red'" OnMouseOut="this.style.textDecoration=''; this.style.color=''"> <span OnMouseOver= "this.style.color='blue'" onmoouseout="this.style.color=''"> 입력할 내용 </span></span>
	this.style.textDecoration='underline'
	this.style.textDecoration='overline'
	this.style.textDecoration='line-through'
	this.style.textDecoration='blink'
기울임	this.style.fontStyle='italic'	normal, italic, oblique를 사용한다.

위 내용을 실제로 적용할 땐 아래와 같이 입력한다.

<span OnMouseOver="this.style.fontFamily='바탕'; this.style.fontSize='19pt'; this.style.color='olive'; this.style.backgroundColor='khaki'; this.style.fontWeight='bold'; this.style.fontStyle='italic'; this.style.textDecoration='underline';" OnMouseOut="this.style.fontFamily=''; this.style.fontSize=''; this.style.color=''; this.style.backgroundColor=''; this.style.fontWeight=''; this.style.fontStyle=''; this.style.textDecoration='';">
스타일을 적용할 내용입니다. 마우스 커서를 올려보세요.
</span>

<span OnMouseOver="" OnMouseOut="">은 글자 스타일 적용하기 (1)에서 다룬 <span style="">에 비해 자주 사용되진 않지만, 특별한 포인트를 줄 때 사용하면 효과가 있다. 위 내용만 따라 하면 큰 어려움 없이 글자 스타일을 지정할 수 있다. 그러나 글자를 반짝이게 하는 this.style.textDecoration='blink' 속성은 Firefox와 Opera에서만 작동하고 크롬, IE에서는 아무런 변화가 없다.

또 OnMouseOver와 OnMouseOut 외에도 마우스 단추를 누를 때와 누른 손을 떼었을 때 적용되는 OnMouseDown과 OnMouseUp으로 마우스 단추를 눌렀을 때 글자 스타일이 바뀌었다가 단추에서 손을 뗐을 때 원래대로 돌아가도록

<span OnMouseDown="this.style.color='deeppink'; this.style.fontWeight='bold'; this.style.fontSize='14pt'" OnMouseUp="this.style.color=''; this.style.fontSize=''; this.style.fontWeight=''">
마우스 왼쪽 단추로 천천히 클릭했다가 손을 떼세요.
</span>

이렇게 글자 스타일을 적용할 수 있다. 비슷한 개념으로 클릭했을 때 적용되는 OnClick과 더블클릭했을 때 적용되는 OnDblClick으로 클릭했을 때 글자 스타일이 바뀌고 다시 더블클릭하면 원래대로 돌아가도록

<span OnClick="this.style.color='deeppink'; this.style.fontWeight='bold'; this.style.fontSize='14pt'" OnDblClick="this.style.color=''; this.style.fontSize=''; this.style.fontWeight=''">
마우스로 글자를 클릭했다가 잠시 후 다시 더블클릭하세요.
</span>

이렇게 글자 스타일을 적용할 수도 있다.