728x90
반응형
- 이미지 스트라이트란? 단일 이미지에 넣은 이미지 모음
- 왜 사용하는가? 이미지가 많은 웹페이지는 로드할 때 시간이 오래 걸린다.(성능 저하) = 서버가 이미지를 가지러 여러 번 요청을 하게 됨
아래와 같은 이미지가 이미지 스트라이프
<코드예시>
<style>
#navlist {
position: relative;
}
#navlist li {
position: absolute;
top: 0;
margin: 0;
padding: 0;
list-style-type: none;
}
#navlist li,
#navlist a {
height: 44px;
width: 43px;
/* border: 1px solid red; */
display: block; /* 인라인 모드인 a태그에 적용되어서 사각형이 커짐(겹쳐보였던 선이 박스가 됨)*/
}
li#home {
left: 0;
background: url("../images/img_navsprites_hover.gif");
}
li#prev {
left: 63px;
background: url("../images/img_navsprites_hover.gif") -47px 0;
}
li#next {
left: 129px;
background: url("../images/img_navsprites_hover.gif") -91px 0;
}
li#home:hover {
background: url("../images/img_navsprites_hover.gif") 0 -45px;
}
li#prev:hover {
background: url("../images/img_navsprites_hover.gif") -47px -45px;
}
li#next:hover {
background: url("../images/img_navsprites_hover.gif") -91px -45px;
}
</style>
<body>
<ul id="navlist">
<li id="home"><a href="#"></a></li>
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
<적용결과>
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_CSS_days05_둥근 모서리 설정(border-radius 속성) (0) | 2022.05.26 |
|---|---|
| [SIST] Web_CSS_days05_CSS 특수성(특이성) (0) | 2022.05.26 |
| [SIST] Web_CSS_days05_검색창 / 평점 / 설문조사 / 막대그래프 / 반응형 웹 + 이미지 갤러리 (0) | 2022.05.25 |
| [SIST] Web_CSS_days05_time line 만들기 (0) | 2022.05.25 |
| [SIST] Web_CSS_days05_드롭 다운(Drop down) 메뉴 만들기 (0) | 2022.05.25 |