각 이미지를 한 번씩 요청하면 총 세 번의 요청이 전송됩니다. 하지만 하나일 때는 한 번만 요청하면 됩니다. 단, 이미지가 하나로 합쳐져 있어서 화면에 표시할 때는 CSS와 자바스크립트로 적절히 잘라야 합니다.

① 가위, 바위, 보 이미지는 #computer 태그에 CSS의 background 속성을 적용해 표시합니다.

② background 속성은 'url(주소) x좌표 y좌표'로 구성되어 있습니다. 이미지가 매우 커서 화면에 맞춰 크기를 조절해야 합니다. 여기서는 가로는 auto(자동), 세로는 200px로 설정합니다. 그러면 가로와 세로 비율을 유지하면서 세로 길이가 200px이 될 때까지 이미지 크기를 줄입니다. 이를 지정하는 backgroundSize 속성은 background 속성과 항상 같이 있어야 합니다.

③ 이미지에서 가위, 바위, 보의 위치는 각각 좌표로 표시합니다. 가위의 x 좌표를 0(0px이면 px은 생략할 수 있습니다)으로 하면, 바위는 -220px, 보는 -440px에 위치합니다. y 좌표는 모두 0이고, 각 x좌표만 변수에 따로 저장합니다.