HTML web2 17일차 - 스프라이트이미지

Front-end/HTML

by 본투비곰손 2023. 6. 6. 23:59

728x90

스프라이트 이미지

여러개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법으로 하나로 합쳐진 이미지에서 필요한부분(주로 아이콘)을 추출하여 사용하는 개념이다.

파일명이 sprite.png인 하나로 합쳐진 이미지 한장

<style>
		*{margin:0;padding:0}
		
		div{width:50px;height:50px;
			 border:2px solid red;
				margin:30px;
				background-image:url("sprite.png");
				background-position:0px 0px}
		
		p{border:2px solid red;width: 43px; height: 50px;
    background: url('css_sprites.png') -10px -10px;}
	</style>
</head>
<body>
	<div></div>
	
	<p></p>
</body>

원하는 크기를 만들어주고 background-image:url("sprite.png")사용하여 이미지를 불러오고 background-position:0px 0px 을 사용하여 필요한 아이콘을 지정 한다. background: url('css_sprites.png') -10px -10px 속성을 이용하여 동일하게 사용 할 수 있다.

출력물은 아래와 같다.

대표사진 삭제

사진 설명을 입력하세요.

가로 , 세로 px 값을 변경하여 원하는 이미지를 찾아 적용하면 된다.

가각의 이미지를 하나로 만들고 그 px값을 css속성 값으로 만들어주는 사이트도 있으니 활용하면 된다.

www.toptal.com/developers/css/sprite-generator

728x90

'Front-end > HTML' 카테고리의 다른 글

HTML web2 19일차 - animation (0)	2023.06.07
HTML web2 18일차 - table태그 (0)	2023.06.07
HTML web2 16일차 - transform (0)	2023.06.05
HTML web2 15일차 - z-index (0)	2023.06.04
HTML web2 13일,14일차 - position (0)	2023.06.03