CSS - 링크 영역 잡기

하나의 PNG파일만 불러와도 되므로 서버에 요청을 덜해서 상대적으로 웹페이지 로딩 시간을 줄일수 있는 기법이 있다. 이 기법은 스프라이트 이미지 하나만을 서버에서 불러온다.

 

before, after 가상 선택자는 content를 ''; 와 같이 비우지 않는다면 width와 height속성을 무시하기 때문에 반드시 content:''; 구문을 넣어 준다음 영역을 잡아야 한다.

 

하지만 이런 방식에는 단점이 있다. 예를들어 페이지의 디자인이 자주 변경 되는 경우 그 페이지에서 사용된 스프라이트 이미지의 내용도 바껴야 하고 따라서, 변경된 이미지 위치 때문에 css파일을 수정해야 한다. 

이런 단점을 보완하기 위해서 node-sprite-generator와 같은 툴을 이용해서 자동으로 스프라이트 이미지를 만들어주고, css파일까지 자동으로 만들어 주는 툴을 사용하면 되게 편리할 것이다.