text-decoration 속성(none, underline, overline, line-through)
Css에서는 글씨에 밑줄이나 윗줄, 중간줄을 넣을 때 text-decoration 속성을 사용합니다.
▶text-decoration 속성값
none 기본값으로 밑줄이 없는 보통 글자
underline 글자 아래에 밑줄
overline 글자 위에 줄이 그어짐
line-through 글자 중간에 줄이 그어짐
blink 글자를 반짝거리게 만듬. 퇴화 속성으로 사용을 권장하지 않습니다.
css 명세에서는 브라우저가 이 속성값을 무시하도록 하고 있음.
참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
상속 여부 : no
▶링크 밑줄 없애는 방법
보통 텍스트는 기본적으로 밑줄 형태가 아니지만, 링크 <a href...>로 연결된 글자의 경우
밑줄이 자동으로 들어갑니다. 이때 밑줄을 없애고 싶으면 text-decoration: none을 사용하면 됩니다.
사용 예:
span a{text-decoration: none}
h1 a{text-decoration: none}
▶CSS3 에서 text-decoration은 축약 속성으로 사용합니다.
즉 text-decoration-line, text-decoration-color, text-decoration-style을 한꺼번에 지정하는 속성인데
현재는 Firefox에서만 지원하고 있습니다.
▶html과 css 사용 예를 보겠습니다~
text-decoarion.htm|
html/css |
|
<!DOCTYPE hTML> <html> <head> <style> #no{text-decoration: none;} #no2 a {text-decoration: none;} #un{text-decoration:underline;} #ov{text-decoration: overline;} #li{text-decoration: line-through; } </style> </head> <body> <h3 id="no"> 기본값 text-decoration: none</h3> <h3> <a href="www.google.com"> 1. 기본 링크 : 구글 사이트</a></h3> <h3 id="no2"><a href="www.google.com"> 2. text-decoaration: none : 구글 사이트</a></h3> <h3 id="un">text-decoration: underline</h3> <h3 id="ov">text-decoration: overline</h3> <h3 id="li">text-decoration: line-through</h3> </body> </html> |
▶실행 화면
1번은 링크에 밑줄이 자동으로 들어간 반면
2번은 text-decoration: none을 사용함으로써 링크 밑줄이 없어졌습니다.
글자색 color 속성, 배경색 background-color 속성 배우기
배경 이미지를 넣는 background-image 속성
'css' 카테고리의 다른 글
| [html/css] 수직으로 가운데 정렬 방법 (다섯 가지) (3) | 2014.06.11 |
|---|---|
| [html/css] text-indent 속성(들여쓰기) (0) | 2014.06.10 |
| [html/css] vertical-align 속성 자세히 알기(수직 정렬) (3) | 2014.06.05 |
| 비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE (1) | 2014.06.02 |
| [html/css]background 속성(배경 전체 지정) (1) | 2014.05.30 |
댓글