css image2 CSS image sprites CSS image sprites 이미지 스프라이트는 단일 이미지에 삽입된 이미지의 모음이다. 이미지가 많은 웹 페이지는 로드하는 데 시간이 오래 걸리고 여러 서버 요청을 생성할 수 있다. 이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약된다. CSS image sprite - 예제 세 개의 개별 이미지를 사용하는 대신 이 단일 이미지("img_navsprites.gif")를 사용한다: - src 속성을 비워 둘 수 없으므로 작은 투명 이미지만 정의한다. 표시된 이미지는 CSS에서 지정한 배경 이미지가 된다. 너비: 46px; 높이: 44px; - 사용할 이미지의 부분을 정의한다 background: url(img_navsprites.gif) 0; - 배경 이미지와 위치를 정의한다(왼쪽 .. 2023. 9. 5. CSS image gallery CSS를 사용하여 이미지 갤러리를 만들 수 있다. CSS Image Gallery 여기에 이미지 설명 추가 여기에 이미지 설명 추가 여기에 이미지 설명 추가 여기에 이미지 설명 추가 div요소에 gallery 클래스에 float left, width 180px를 설정하여 너비가 180px 이미지 영역을 스타일을 정의한다. div요소에 gallery 클래스에 hover상태이면 border 1px solid #777색으로 현재 커서 위치와 이미지 선택이 어디인지를 알려준다. div 요소에 gallery 클래스에 img 요소는 width 100%, height auto로 설정하여 width 180px에 자동으로 높이가 조절이 된다. 위의 코드를 실행한 결과는 아래 그림과 같다. Responsive Image .. 2023. 9. 4. 이전 1 다음
