CSS 스프라이트 생성기를 온라인으로 사용하는 방법

← 모든 블로그 기사

가이드가 업데이트되었습니다.:

작은 이미지를 CSS 스프라이트 시트로 결합하고 온라인으로 CSS 위치를 생성하세요.

데스크톱 및 휴대폰 스크린샷, 간단한 데모, 일반적인 질문에 대한 답변이 포함된 실용적인 지침입니다.

도구 열기 →

시작하기 전에

원본 파일을 보관하고 아래 링크된 작은 공개 데모 파일을 사용하세요. 자신의 파일을 선택하기 전에 서비스에서 지원되는 형식과 제한을 확인하세요.

데모 파일을 사용해 보세요 — landscape.png

이 작은 파일은 이 가이드를 위해 생성되었으며 개인 데이터를 포함하지 않습니다.

단계별 지침

  1. 비디오 옆에 있는 버튼을 사용하여 도구를 엽니다. 다음 단계에서 다른 모드를 지정하지 않는 한 기본 모드를 유지합니다.
  2. 데모 파일을 선택하세요. 이름이나 미리보기가 나타날 때까지 기다린 다음 사용 가능한 설정을 검토하세요.
  3. 작업에 필요한 옵션을 선택하세요. 설명을 보려면 물음표를 여세요. 데모에 사용된 값은 예시입니다.
  4. 전체 작업을 수행하려면 메인 처리 버튼을 누르세요. 서비스에서 로그인이나 가격 확인을 요청하는 경우 계속하기 전에 현재 약관을 확인하세요.
  5. 성공적인 결과를 기다렸다가 검사하고 페이지를 떠나기 전에 출력을 저장하세요. 설정 데모는 완료된 처리 결과가 아닙니다.

컴퓨터에서

파일 선택기를 사용하거나 데모 파일을 업로드 영역으로 드래그하세요. 소스가 준비될 때까지 기다린 후 옵션과 기본 작업을 검토하세요.

전화에서

파일 또는 갤러리에서 데모 파일을 선택합니다. 파일 로드가 완료될 때까지 기다렸다가 설정으로 스크롤합니다. 작업하는 동안 탭을 열어두세요.

iPhone의 Safari에서 공유 메뉴를 열고 결과가 새 탭에 열리면 파일에 저장을 선택하세요. Android Chrome에서는 다운로드를 확인하세요. 처리가 완료될 때까지 이 탭을 열어두세요.

더 나은 결과를 위해

작은 이미지를 CSS 스프라이트 시트로 결합하고 온라인으로 CSS 위치를 생성하세요. 성공적인 결과를 기다렸다가 검사하고 페이지를 떠나기 전에 출력을 저장하세요. 설정 데모는 완료된 처리 결과가 아닙니다.

스크린샷 및 비디오

데스크탑 데모

이 녹화는 기본 작업 이전에 소스와 사용 가능한 설정을 보여줍니다. 위 단계에 따라 처리를 시작하고 결과를 저장하세요.

데스크탑 데모
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 이 도구를 사용하는 방법 (컴퓨터에서)
이 도구를 사용하는 방법
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 소스 선택 (컴퓨터에서)
소스 선택
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 설정 및 다음 작업 (컴퓨터에서)
설정 및 다음 작업

전화 시연

이 녹화는 기본 작업 이전에 소스와 사용 가능한 설정을 보여줍니다. 위 단계에 따라 처리를 시작하고 결과를 저장하세요.

전화 시연
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 이 도구를 사용하는 방법 (전화에서)
이 도구를 사용하는 방법
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 소스 선택 (전화에서)
소스 선택
CSS 스프라이트 생성기를 온라인으로 사용하는 방법 — 설정 및 다음 작업 (전화에서)
설정 및 다음 작업

질문 및 문제 해결

이 데모에서는 실제 데이터를 사용합니까?

아니요. 녹음에서는 가이드용으로 생성된 공개 예시 값을 사용합니다. 서비스는 귀하가 귀하의 브라우저에 입력한 내용에 따라 작동됩니다.

결과에 의존하기 전에 무엇을 확인해야 합니까?

작은 이미지를 CSS 스프라이트 시트로 결합하고 온라인으로 CSS 위치를 생성하세요. 성공적인 결과를 기다렸다가 검사하고 페이지를 떠나기 전에 출력을 저장하세요. 설정 데모는 완료된 처리 결과가 아닙니다.

서비스가 과부하되었다는 메시지가 표시되면 잠시 기다렸다가 나중에 다시 시도하세요. 시도가 실패했다고 해서 소스 파일이 변경되었다는 의미는 아닙니다.

도구 열기 →