4-4. 서체(font)와 글(text) 스타일 - 4

2018. 1. 26. 11:02웹 표준 퍼블리싱 바이블

1. 글자 장식하기

"text-decoration" 속성으로 선택한 요소의 위, 아래, 가운데에 선을 긋거나 깜박거리게 할 수 있습니다. 그 설정값으로는 다음과 같은 종류가 있습니다.

none 

장식이 없습니다. 

underline 

밑줄을 만듭니다. 

overline 

윗줄을 만듭니다. 

line-through 

가운데 지나가는 선을 만듭니다. 

blink 

깜박거리게 만듭니다. 


1-1. <a>요소는 기본값으로 밑줄(underline)을 가지고 있는데, "마우스를 올리는 경우(hover)"에 밑줄이 나타나게 하는 방법이 많이 쓰입니다.


<style type="text/css">

a{color: orange; text-decoration: none;}

a:hover{color: lime; text-decoration: underline;}

</style>

 


1-2. 문장을 깜박거리게 하는 효과는 파이어폭스와 오페라 브라우저에서 지원하는 기능입니다. 주의할 점은 깜박거리는 개체는 3Hz~49Hz 사이인 컨텐츠 요소를 포함해서는 안 된다는 점입니다.


※ 1Hz는 1초당 1번 깜박거림을 의미합니다. blink는 약 1Hz 정도이므로 사용에 무리는 없습니다. 하지만, "blink"값은 더 이상 지원되지 않습니다. 이제 스크립트의 지원 없이는 더 이상 브라우저에서 확인할 수 없습니다.


<style type="text/css">

a{color: orange; text-decoration: blink;}

</style>