2010. 8. 28. 17:01ㆍIT/Tistory Tips
- 블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1)
지난번에 글자에 간단한 스타일을 적용하는 것에 대해 살펴봤다. <span style="">로 적용한 스타일은 영구적인 속성이다. 쉽게 이야기해서 한 번 지정하면 계속 그 상태로 유지된다. <span style="color: tomato;">글자 색을 토마토색으로 바꾸기</span>와 같이 지속적으로 유지되는 속성이 부여된다. 그러나 style 대신 OnMouseOver와 OnMouseOut을 사용하면 커서 위치에 따라 글자의 스타일을 바꿀 수 있다.
태그 사용 방식은 이전과 비슷하다. 기본 형식은
이며 OnMouseOver는 마우스 커서를 글자 위에 올렸을 때의 스타일이고 OnMouseOut은 마우스 커서를 글자에서 내렸을 때의 스타일이다. OnMouseOut은 속성 이름만 입력하고 속성값을 비워두면 마우스 커서를 글자에서 내렸을 때 원래 글자의 속성으로 되돌아간다. 여러 속성을 함께 사용할 땐 ;(세미콜론)으로 구분하고 글자 스타일을 지정할 문구가 끝나면 꼭 </span>를 입력해서 태그를 닫는다.
그런데 OnMouseOver와 OnMouseOut을 사용할 땐 주의해야 할 사항이 있다. 보통 태그는 소문자로 사용하며 특별히 대소문자를 구분하지 않는다. 그러나 OnMouseOver와 OnMouseOut을 사용할 때 this.style. 뒤의 속성값에서는 반드시 대소문자를 구분해야 한다. onmouseover 자체는 대소문자 구별없이 써도 되지만, this.style.fontSize의 대문자 S를 this.style.fontsize와 같이 소문자 s로 기록하면 태그가 적용되지 않을 수도 있다. 단, 첫 번째 글자는 대소문자 상관없이 사용할 수 있어서 FontSize나 fontSize 모두 태그가 제대로 동작한다. 말로 설명하면 복잡하니 아래 예를 보고 글자에 마우스 커서를 올려보자.
[예제 1 - 태그를 바로 사용했을 때]
마우스를 올려보세요. 글자가 커집니다.
</span>
[예제 2 - 태그를 잘못 사용했을 때]
마우스를 올려보세요. 글자가 커지지 않습니다.
</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>
<span OnMouseOver="" OnMouseOut="">은 글자 스타일 적용하기 (1)에서 다룬 <span style="">에 비해 자주 사용되진 않지만, 특별한 포인트를 줄 때 사용하면 효과가 있다. 위 내용만 따라 하면 큰 어려움 없이 글자 스타일을 지정할 수 있다. 그러나 글자를 반짝이게 하는 this.style.textDecoration='blink' 속성은 Firefox와 Opera에서만 작동하고 크롬, IE에서는 아무런 변화가 없다.
또 OnMouseOver와 OnMouseOut 외에도 마우스 단추를 누를 때와 누른 손을 떼었을 때 적용되는 OnMouseDown과 OnMouseUp으로 마우스 단추를 눌렀을 때 글자 스타일이 바뀌었다가 단추에서 손을 뗐을 때 원래대로 돌아가도록
마우스 왼쪽 단추로 천천히 클릭했다가 손을 떼세요.
</span>
이렇게 글자 스타일을 적용할 수 있다. 비슷한 개념으로 클릭했을 때 적용되는 OnClick과 더블클릭했을 때 적용되는 OnDblClick으로 클릭했을 때 글자 스타일이 바뀌고 다시 더블클릭하면 원래대로 돌아가도록
마우스로 글자를 클릭했다가 잠시 후 다시 더블클릭하세요.
</span>
이렇게 글자 스타일을 적용할 수도 있다.