IS

<title>0511image sprite</title>

<style>

#weather {background-image:url(1.png);
display:inline-block;
width:55px;
height:55px;
background-position:-264px -67px;
background-repeat:no-repeat;
font-size:0;

}

span:nth-child(5) { border:2px dashed red;
background-image:url(1.png);
display:inline-block;
background-position:-67px -67px;
width:55px;
height:55px;
font-size:0;
}

* {list-style:none;}

li:first-child   {}

li:first-child+li {}

li:first-child+li+li {}

</style>

<body>
<h1>이미지 스프라이트 기법</h1>

<img src=”1.png” alt=”네이버 날씨 이미지”>

<br>

오늘의 날씨<span id=”weather”>흐림 </span> <span> 비</span>

<!– 이미지 대체기법 ; IR ; image replacement : 구조와 디자인이 서로 다른경우 마크업에서 텍스트를 css에서 이미지를 바꿔 사용하는 기법;
네이버에서 h1에 네이버라고 되어 있지만 실제로는 naver 로고 이미지로 대체 –>

<!– 롤오버 이미지 만들기  transition  //애니메이션–>
<br>

<ul>

<li><a href=”#”> 1</a></li>

<li><a href=”#”> no image</a></li>

<li><a href=”#”> rollover image </a></li>
</ul>

</body>

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.