a태그에서 밑줄 없애기와 이미지 고정
☞ 밑줄 없애기 & 앵커 가상 클래스 효과
먼저 우리가 글자에 하이퍼링크를 설정해주면 글자가 파란색으로 변하면서 밑줄이 쫙~ 생기죠... 이걸 없에는 방법이 있습니다. 물론 스타일시트를 이용해서 없앨 수 있습니다. 게다가 앵커 가상 클래스까지 첨부시키면 더욱 멋져 보이죠. 이걸 스타일 시트라인에 넣어보세요 a { text-decoration : none; color : black; } 그럼 밑줄이 없어 질겁니다. 자~~ 보세요.....
먼저 우리가 글자에 하이퍼링크를 설정해주면 글자가 파란색으로 변하면서 밑줄이 쫙~ 생기죠... 이걸 없에는 방법이 있습니다. 물론 스타일시트를 이용해서 없앨 수 있습니다. 게다가 앵커 가상 클래스까지 첨부시키면 더욱 멋져 보이죠. 이걸 스타일 시트라인에 넣어보세요 a { text-decoration : none; color : black; } 그럼 밑줄이 없어 질겁니다. 자~~ 보세요.....
| <style type='text/css'> <!-- body { font-family: "돋움", "돋움체", "Arial";} A:link { text-decoration:none; color: 00448B;} A:visited { text-decoration:none; color: green;} A:active { text-decoration:underline; color:red ;} A:hover {color: black; text-decoration:underline;} --> </style> <body> <a href="3"><h2>밑줄 없애는 것과 앵커 가상 클래스 효과</h2></a> 어때요? 잘 되죠? ^^ </body> |
설명을 드리자면 text-decoration 속성을 이용해서 처음 link 부분에서는 none 값을 주어서 밑줄을 없애는 거죠. 다른 visited 부분에서도 밑줄을 없애주고 active와 hover 부분에서는 underline 를 주어서 마우스가 링크 위에 가면 밑줄이 생기게 하는 거죠. 또한 색상도 마찬가지로 각각 다른 게 설정을 해주면 마우스를 대면 색상이 변하게 됩니다. 좋은 틱이죠? ^^ 여러분들 홈페이지에 맞게 고쳐서 사용해보세요. ^^
☞ 배경이미지를 하나만 나타나게 하기 (패턴 없애기)
HTML을 이용해서 배경이미지를 넣으면 배경이미지가 반복이 되어 화면에 가득차게 됩니다. 원래 패턴을 위한 배경이미지라면 몰라도 그렇지 않은 배경이미지는 보기에 별로 좋지 않을 겁니다. 이럴 경우를 해결하기 위해 배경이미지를 자신이 원하는 위치에 딱 하나만 넣을 수 있는 방법에 대해서 알아보겠습니다.
| <style type="text/css"> <!-- BODY {background: url(https://tagmania.net/images/5.jpg); background-repeat:no-repeat; background-position:50% 50%} --> </style> <body> <font color="green" size="2" face="돋움"> 어때요? 근사하죠? ^^ 브라우저의 크기를 변하게 해도 <br>퍼센트를 지정이 되었기 때문에 <br>항상 정 가운데 배경이미지가 놓이게 되죠 ^^ </font> </body> |
위에 예제는 스타일 시트의 background-repeat 와 background-position 속성을 이용해서 표현을 한 거죠. 지금까지 특강을 잘 들어 오신 분이라면 충분히 이해하실 수 있을 겁니다.
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
