1. JavaScript 사용하지 않은 상태에서 이미지 변경이 가능
2. FF 에서 이미지 보이지 않음 을 하였을 경우(배경 이미지대한 정보)에 정상적인 출력
-> img 남용을 막고 CSS만을 통한 이미지 관리를 위한 부분
위의 1번은 책에서 보고 했는데 2번은 노가다의 성과 ㅋㅋ
( 국내 유명한 사이트는 전부 CSS 확인의 초노가다 )
핵심코드만 적겠습니다.
DTD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<a href=""><span>테스트 이미지</span></a>
<style type="text/css">
/*
a 에 대한 스타일을 지정합니다.
아래와 같이 했을 경우에는
위의 span 의 적힌 글과 같이 보입니다.
*/
a{
float:left;
width:100px;
height:42px;
overflow:hidden;
background:url("AAAA.jpg") no-repeat 0px 0px;
}
/*
a 에 대한 스타일을 지정합니다.
마우스가 롤오버가 되었을 경우 background-position 을 바꿔줌으로써
배경이 바뀌게 됩니다.
( 단, 롤오버, 롤아웃 했을 때의 이미지를 두개를 붙여놓고 사용합니다 )
아래와 같이 했을 경우 이미지 교체(롤오버, 롤아웃)를 했을 때 서버에 이미지를
재전송하는 트래픽을 없앨 수 있습니다.
*/
a:hover{ background-position: -20px 0px; }
/*
이제 SPAN 에 대한 스타일을 지정합니다.
span 의 포지션을 relative 로 주고 나서
(왜이런지는 정확하게 이해는 못했습니다. 고수님들 도움좀,,)
z-index 값을 -1 로 주니 원하는 결과값이 나왔습니다.
*/
a span{ position:relative; z-index:-1; }
</style>
왜이렇게 코딩을 하는지에 대해서 질문하시는 분들도 계실껍니다.
물론 JS 를 써서 <IMG> 테그의 src 를 바꾸면 된다고 이야기하시는 분들도 계실 껍니다.
그러나 위와 같은 방법으로 한다면 JS를 쓰지 않고 이미지 교체가 가능하며,
HTML 소스의 손을 대지 않은 상황에서 CSS 만으로 이미지 교체가 가능하다는
강력한 장점이 존재 합니다.
더군다다 이미지 교체를 할때 브라우저가 다시 서버에 image 요청을 하기에
서버의 부담(작을 터이지만,,)을 적게 줄수 있다는 장점도 있습니다.
그리고 가장 핵심인 FF 에서 이미지를 사용안함을 하였을 경우,
배경이미지가 보이지 않음으로 인해 링크된 이미지를 못찾는 경우가 발생
배경이미지가 보이지 않아도 text 가 보이기에 링크로 이동이 가능하다는 장점도
함께 가지고 있습니다~
위와같이 코딩한 소스를 테스트한 브라우저는
IE8, IE6, FF 에서 테스를 해보았습니다.
---------------------------
방금 테스트한 결과 Safari 에는 <img> 에 alt를 넣어도
alt 값이 보이 않는다는 것을 알았습니다.
위와 같은 방법으로 코딩한 경우 텍스트로 정상적으로 보였다는 점
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Test</title>
<style type="text/css">
#menu{margin:0; padding:0; width:485px; height:60px; list-style:none;}
#menu .menuli{margin:0; padding:0; display:inline; float:left;}
#menu .menuli a span{display:none;}
#menu .menu1{width:160px; height:60px; display:block; background:url('menu.png') no-repeat 0 -60px;}
#menu .menu1:hover{background-position:0 0;}
#menu .menu2{width:150px; height:60px; display:block; background:url('menu.png') no-repeat -160px -60px;}
#menu .menu2:hover{background-position:-160px 0;}
#menu .menu3{width:175px; height:60px; display:block; background:url('menu.png') no-repeat -310px -60px;}
#menu .menu3:hover{background-position:-310px 0;}
</style>
</head>
<body>
<ul id="menu">
<li class="menuli"><a href="#01" class="menu1"><span>menu1</span></a></li>
<li class="menuli"><a href="#02" class="menu2"><span>menu2</span></a></li>
<li class="menuli"><a href="#03" class="menu3"><span>menu3</span></a></li>
</ul>
</body>
</html>
2. FF 에서 이미지 보이지 않음 을 하였을 경우(배경 이미지대한 정보)에 정상적인 출력
-> img 남용을 막고 CSS만을 통한 이미지 관리를 위한 부분
위의 1번은 책에서 보고 했는데 2번은 노가다의 성과 ㅋㅋ
( 국내 유명한 사이트는 전부 CSS 확인의 초노가다 )
핵심코드만 적겠습니다.
DTD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<a href=""><span>테스트 이미지</span></a>
<style type="text/css">
/*
a 에 대한 스타일을 지정합니다.
아래와 같이 했을 경우에는
위의 span 의 적힌 글과 같이 보입니다.
*/
a{
float:left;
width:100px;
height:42px;
overflow:hidden;
background:url("AAAA.jpg") no-repeat 0px 0px;
}
/*
a 에 대한 스타일을 지정합니다.
마우스가 롤오버가 되었을 경우 background-position 을 바꿔줌으로써
배경이 바뀌게 됩니다.
( 단, 롤오버, 롤아웃 했을 때의 이미지를 두개를 붙여놓고 사용합니다 )
아래와 같이 했을 경우 이미지 교체(롤오버, 롤아웃)를 했을 때 서버에 이미지를
재전송하는 트래픽을 없앨 수 있습니다.
*/
a:hover{ background-position: -20px 0px; }
/*
이제 SPAN 에 대한 스타일을 지정합니다.
span 의 포지션을 relative 로 주고 나서
(왜이런지는 정확하게 이해는 못했습니다. 고수님들 도움좀,,)
z-index 값을 -1 로 주니 원하는 결과값이 나왔습니다.
*/
a span{ position:relative; z-index:-1; }
</style>
왜이렇게 코딩을 하는지에 대해서 질문하시는 분들도 계실껍니다.
물론 JS 를 써서 <IMG> 테그의 src 를 바꾸면 된다고 이야기하시는 분들도 계실 껍니다.
그러나 위와 같은 방법으로 한다면 JS를 쓰지 않고 이미지 교체가 가능하며,
HTML 소스의 손을 대지 않은 상황에서 CSS 만으로 이미지 교체가 가능하다는
강력한 장점이 존재 합니다.
더군다다 이미지 교체를 할때 브라우저가 다시 서버에 image 요청을 하기에
서버의 부담(작을 터이지만,,)을 적게 줄수 있다는 장점도 있습니다.
그리고 가장 핵심인 FF 에서 이미지를 사용안함을 하였을 경우,
배경이미지가 보이지 않음으로 인해 링크된 이미지를 못찾는 경우가 발생
배경이미지가 보이지 않아도 text 가 보이기에 링크로 이동이 가능하다는 장점도
함께 가지고 있습니다~
위와같이 코딩한 소스를 테스트한 브라우저는
IE8, IE6, FF 에서 테스를 해보았습니다.
---------------------------
방금 테스트한 결과 Safari 에는 <img> 에 alt를 넣어도
alt 값이 보이 않는다는 것을 알았습니다.
위와 같은 방법으로 코딩한 경우 텍스트로 정상적으로 보였다는 점
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Test</title>
<style type="text/css">
#menu{margin:0; padding:0; width:485px; height:60px; list-style:none;}
#menu .menuli{margin:0; padding:0; display:inline; float:left;}
#menu .menuli a span{display:none;}
#menu .menu1{width:160px; height:60px; display:block; background:url('menu.png') no-repeat 0 -60px;}
#menu .menu1:hover{background-position:0 0;}
#menu .menu2{width:150px; height:60px; display:block; background:url('menu.png') no-repeat -160px -60px;}
#menu .menu2:hover{background-position:-160px 0;}
#menu .menu3{width:175px; height:60px; display:block; background:url('menu.png') no-repeat -310px -60px;}
#menu .menu3:hover{background-position:-310px 0;}
</style>
</head>
<body>
<ul id="menu">
<li class="menuli"><a href="#01" class="menu1"><span>menu1</span></a></li>
<li class="menuli"><a href="#02" class="menu2"><span>menu2</span></a></li>
<li class="menuli"><a href="#03" class="menu3"><span>menu3</span></a></li>
</ul>
</body>
</html>
'html / javascript / css' 카테고리의 다른 글
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (3) | 2010.05.16 |
|---|---|
| meta 태그 (0) | 2010.01.11 |
| IE 버젼별 적용 (0) | 2009.11.18 |
| 구버젼 ie 백그라운드 캐쉬 (4) | 2009.11.16 |
| zoom 스타일 제어시 Flash Object가 사라지는 버그 (3) | 2009.11.13 |