background-position
The **background-position** CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.
백그라운드 포지션 설명.
값 0에는 px 붙이지 않음.
<html>
<head>
<style>
.hero {
background: url(https://js.cx/drag-heroes/heroes.png);
width: 130px;
height: 128px;
}
.hero2 {
background: url(https://js.cx/drag-heroes/heroes.png);
}
#superhero {
background-position: 0 -128px;
}
#hulk {
background-position: -250px 0;
}
</style>
</head>
<body>
<div class="hero">
</div>
<img src="https://js.cx/drag-heroes/heroes.png">
<div id="superhero" class="hero">
</div>
<div id="hulk" class="hero">
</div>
</body>
</html>
기본적으로 url 'https://js.cx/drag-heroes/heroes.png' 링크를 통해 불러오게 되면 히어로 여러명이 존재하는 사진이 추출된다. 그것을 div 컨테이너의 background(배경)으로 설정해주고 한 명의 히어로만이 노출될 수 있는 컨테이너의 크기(width, height)를 임의로 설정해준다.
background-position: 0 -128px; 이런 방법으로 X축 Y축을 조정하게 되면 div 컨테이너는 가만히 있지만 사진만 뒤에서 움직이게 되는 효과를 만들어 각 컨테이너에 여러명의 히어로를 하나씩 배치할 수 있는 것이다.
div는 그냥 틀임. 사진 프레임이라고 생각하라. (img spread기법)
Background-position으로 X축 Y축 배경 이미지를 움직일 수 있음.
(물론, Background가 설정되어야 함.)
Width: 130, height:128을 통하여 틀과 배경이미지를 설정함.
거기서 이미지를 움직이면서 보여줄 “히어로”만 틀에 맞춘 방식.
ㅁㅁㅁㅁ
ㅁㅁㅁ
궁극적으로, 각 히어로들은 div 틀로 되어 있어 개별적으로 이용 가능하게됨.
