Image Sprite 기법이란 무엇입니까?

조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 입니다. 이 때 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용 됩니다.

HTML
<ul id="naverMenu">
_<li class="mail"><a href="#"><span>메일</span></a></li>
_<li class="cafe"><a href="#"><span>카페</span></a></li>
_<li class="blog"><a href="#"><span>블로그</span></a></li>
_<li class="kin"><a href="#"><span>지식iN</span></a></li>
_<li class="shopping"><a href="#"><span>쇼핑</span></a></li>
</ul>

Sprite Image
네이버 서비스

CSS
#naverMenu { position:relative; list-style:none; margin:0; padding:0; width:197px; padding:0 0 0 15px; background:url(http://naradesign.net/open_content/lecture/wp/img/naverMenu.gif) no-repeat; *zoom:1; }
#naverMenu:after { content:""; display:block; clear:both; }
#naverMenu li { position:relative; float:left; }
#naverMenu li a { position:relative; display:block; height:38px; text-decoration:none; }
#naverMenu li.mail a { width:33px; }
#naverMenu li.cafe a { width:32px; }
#naverMenu li.blog a { width:43px; }
#naverMenu li.kin a { width:42px; }
#naverMenu li.shopping a { width:32px; }
#naverMenu li a span { position:absolute; z-index:-1; visibility:hidden; }

<button type="button">...</button> 요소의 의미와 사용법을 알려주세요.

<button type="button" onclick="action()">...</button>

<button type="submit | button | reset">...</button> 요소는 <input type="submit | button | reset" /> 요소와 동일한 기능을 수행 합니다. <button>...</button> 요소는 어떤 의미를 마크업하는 요소가 아니라 사용자 인터페이스에 대한 기능을 정의하는 마크업 으로써 type 속성의 기본 값은 submit 이며 다음과 같은 기능을 수행합니다.

<button type="submit">...</button>
form을 전송하는 기능. (기본 값, 그러나 IE 6~7 브라우저는 표준 명세에 따르지 않았다)
<button type="button">...</button>
자바스크립트의 도움을 받아 인터페이스를 조작하는 기능. (IE 6~7 브라우저의 기본 값)
<button type="reset">...</button>
form 입력 항목들을 초기화하는 기능.

<input /> 요소와 가장 큰 차이점은 내용을 가질 수 있다는 점 입니다. <button>...</button> 요소는 텍스트 뿐만 아니라 이미지 요소를 자식으로 포함할 수 있습니다.

<button type="button">...</button> 요소의 디자인을 CSS로 제어할 수 없나요?

<button>...</button> 요소는 웹 브라우저 기본 값으로 회색 배경과 2px 크기의 outset 스타일이 지정되어 있는데 이 값을 다음과 같이 초기화 할 수 있습니다.

button { border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }

*overflow:visible 속성과 값을 추가한 것은 버튼 텍스트 길이에 비례하여 비 정상적으로 버튼의 폭이 커지는 IE 6~7 브라우저 버그를 해결하기 위한 hack 입니다.