• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

a태그에서 밑줄 없애기와 이미지 고정

오작교 33160

0
밑줄 없애기 & 앵커 가상 클래스 효과
 먼저 우리가 글자에 하이퍼링크를 설정해주면 글자가 파란색으로 변하면서 밑줄이 쫙~ 생기죠... 이걸 없에는 방법이 있습니다. 물론 스타일시트를 이용해서 없앨 수 있습니다. 게다가 앵커 가상 클래스까지 첨부시키면 더욱 멋져 보이죠. 이걸 스타일 시트라인에 넣어보세요 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 속성을 이용해서 표현을 한 거죠. 지금까지 특강을 잘 들어 오신 분이라면 충분히 이해하실 수 있을 겁니다. 

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 201703
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 287447 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 346499 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 291127 +14
300
normal
오작교 23.12.10.09:32 14333 0
299 Script
normal
오작교 23.12.10.09:29 19471 0
298 CSS
normal
오작교 21.01.09.14:18 40480 0
297 HTML
normal
오작교 15.09.17.08:58 116086 0
296 HTML
normal
오작교 15.09.13.21:38 21390 0
295 HTML
normal
오작교 15.09.13.21:30 24967 0
294 HTML
normal
오작교 15.08.30.12:19 52566 0
293 Script
normal
오작교 15.05.12.14:06 20913 0
292 HTML
file
오작교 12.03.08.13:51 35720 0
291 HTML
normal
오작교 11.06.03.10:44 40522 0
290 CSS
normal
오작교 11.06.03.10:29 70415 0
289 Script
normal
오작교 11.03.22.11:19 43235 0
288 Script
normal
오작교 11.03.22.11:15 37975 0
287 Script
normal
오작교 11.03.22.11:07 36860 0
286 HTML
normal
오작교 11.01.25.10:27 36000 0
285 CSS
normal
오작교 11.01.24.10:40 35120 0
284 HTML
normal
오작교 11.01.24.10:39 36846 0
283 Script
normal
오작교 11.01.24.10:34 37866 0
282 CSS
normal
오작교 11.01.24.10:31 37491 0
281 CSS
normal
오작교 11.01.24.10:27 35986 0