background 속성 7 - image sprite
배경에 이미지를 넣을 때, 하나의 이미지 안에 여러개의 이미지를 만들어 넣어 background-position으로 배경이미지를 보이도록 해주는 기법으로, 브라우저에 웹페이지를 로딩할 때 속도를 줄여주기 위해 많이 사용하는 방법이다. 이미지의 좌측 상단이 기준점(0,0) 이므로, 기준점으로 위치를 이동시켜주는 식으로 사용한다. 예를 들어 상단으로 가져오게 되면, 이미지의 위쪽 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시키고 이미지의 좌측 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시킨다. 네이버의 경우 로고를 배경이미지로 사용하려면, 많은 이미지가 있는 .png파일에서 로고의 위치를 찾아 이미지의 (0,0) 좌표까지의 거리를 재서, 음수방향으로 보내서 로고..
더보기
