당신은 주제를 찾고 있습니까 “스프라이트 이미지 – HTML/CSS 무료 강좌 3-1. 클래스와 이미지 스프라이트“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 ZeroCho TV 이(가) 작성한 기사에는 조회수 7,557회 및 좋아요 95개 개의 좋아요가 있습니다.
스프라이트 이미지 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 HTML/CSS 무료 강좌 3-1. 클래스와 이미지 스프라이트 – 스프라이트 이미지 주제에 대한 세부정보를 참조하세요
조현영(zerocho)의 자바스크립트와 노드 프로그래밍 강좌
무료 강좌는 평생 무료!
유료 강좌는 1달 간 무료 공개 후 유료로 전환됩니다. (유료 강좌 사이트에 업로드)
밤 10시 JS 관련 강좌 진행합니다. 방송 날짜가 불규칙하니 구독하셔서 알림 받으세요!
유료 코드 리뷰도 진행합니다. 받으실 분은 [email protected]으로 연락주세요.
후원도 해주시면 감사히 받겠습니다 ㅎㅎ
— 깃헙 —
https://github.com/zerocho (레포지토리 스타 눌러주세요)
— 후원 —
https://toon.at/donate/zerocho
— 소개 —
Node.js 교과서(길벗) 저자
제로초닷컴(ZeroCho.com) 운영자
스프라이트 이미지 주제에 대한 자세한 내용은 여기를 참조하세요.
CSS 이미지 스프라이트(Image Sprite) – 코딩의 시작, TCP School
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 …
Source: www.tcpschool.com
Date Published: 6/17/2022
View: 353
CSS – 이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법
스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지 …
Source: 7942yongdae.tistory.com
Date Published: 1/21/2022
View: 2814
[HTML/CSS] 이미지 스프라이트 기법 ✂️ – velog
스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 “여러 개의 이미지 …
Source: velog.io
Date Published: 3/18/2021
View: 5469
CSS 이미지 스프라이트란 무엇일까? – 라이브러리 브랜드
웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다.
Source: creativestudio.kr
Date Published: 8/1/2021
View: 4137
Sprites이미지 | 무료 벡터, 스톡 사진 및 PSD
상업적 용도로 무료 사용 ✓고품질 이미지. … Figma를 위한 Freepik Figma 프로젝트용 이미지 … 게임 또는 애니메이션을위한 비누 거품 버스트 스프라이트.
Source: kr.freepik.com
Date Published: 12/22/2022
View: 4483
CSS : 스프라이트 이미지(sprite images) 이해와 적용
웹에서 사용하는 이미지 중 아이콘같이 100px 이하의 작은 이미지의 경우 스프라이트를 활용하여 제작합니다. 이미 많은 웹 사이트에서 스프라이트 …
Source: webty.tistory.com
Date Published: 12/14/2022
View: 2602
100 + 무료 Sprites & 스프라이트 이미지 – Pixabay
Sprites의 이미지를 검색하세요. ✓ 상업적 용도 무료 이용 ✓ 권한 필요 없음 ✓ 저작권 자유.
Source: pixabay.com
Date Published: 7/29/2021
View: 1484
CSS 이미지 스프라이트 (Image Sprite) – RedK
이미지 스프라이트(Image Sprite)란? … background-image로 사용될 여러 개의 이미지들을 한 개의 이미지로 묶은 후, 각 이미지가 필요한 곳에서는 해당 …
Source: redk.tistory.com
Date Published: 8/19/2022
View: 52
[HTML/CSS] 스프라이트 이미지(Sprite Image) 기법
스프라이트란 여러 사진을 하나로 모아. 사진 파일의 리퀘스트를 줄이는 방법이에요. . 사용자 입장에서는 세개나 받아야 했던 이미지를.
Source: m.blog.naver.com
Date Published: 1/12/2022
View: 2899
주제와 관련된 이미지 스프라이트 이미지
주제와 관련된 더 많은 사진을 참조하십시오 HTML/CSS 무료 강좌 3-1. 클래스와 이미지 스프라이트. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 스프라이트 이미지
- Author: ZeroCho TV
- Views: 조회수 7,557회
- Likes: 좋아요 95개
- Date Published: 2019. 9. 26.
- Video Url link: https://www.youtube.com/watch?v=aiSClJhuKMY
코딩교육 티씨피스쿨
CSS 이미지 스프라이트
CSS 이미지 스프라이트(Image Sprite)
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.
하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.
이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.
모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.
또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.
다음 예제는 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제입니다.
네 개의 아이콘을 만들기 위해 네 개의 이미지를 사용하는 것이 아닌 다음 이미지 하나만을 가지고 작업하게 됩니다.
예제
코딩연습 ▶
연습문제
이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법
이미지 스프라이트의 정의
스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다.
이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다.
1. 요청을 단 한번 만한다.
브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다.
// 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드
예를 들어 위와 같은 예제는 서버에서 이미지를 가져오기 위해 서버에 3번의 요청을 합니다. 즉 자원을 사용하는 구문 하나는 서버 요청 하나입니다. 예제 코드는 3번의 이미지 요청을 이야기했지만, 가져와야 하는 이미지가 10개 혹은 그 이상이 되면 서버에 이미지를 요청하기 위해서 많은 브라우저 자원을 사용해야 합니다. 이는 결국 화면을 그리는 속도를 저해합니다.
// 3개의 아이콘 이미지를 하나로 만들고 이미지 스프라이트를 CSS를 이용해서 사용하면 // 한번의 요청으로 3개의 아이콘 이미지를 사용하는 것과 같은 화면을 만들 수 있다.
그렇기 때문에 하나의 이미지에 여러 개의 이미지를 합쳐서 사용하는 이미지 스프라이트를 사용하면, 서버에 이미지를 요청하는 횟수를 한 번으로 줄 일수 있습니다. 거기에 CSS를 사용하면 이미지 스프라이트(여러 개의 이미지가 하나로 합쳐진 이미지)를 하나의 이미지처럼 보이게 할 수 있습니다. 즉 이미지 스프라이트를 잘 활용한다면, 서버에 이미지 요청하는 횟수를 줄이고 화면을 빠르게 그릴 수 있습니다.
2. 하나의 이미지 파일만 관리한다.
이미지 스프라이트는 여러 개의 이미지를 하나로 합쳤기 때문에, 합친 이미지의 개수만큼 관리를 해야 하는 이미지 파일이 줄어듭니다. 관리해야 하는 이미지 수가 줄어든다는 것은 관리하는 대상이 줄어든다는 말과 같기 때문에 유지보수 측면에서도 유리한 점이 있습니다.
다만 스프라이트 이미지를 만드는 경우는 아이콘들처럼 문맥적으로 같은 유형을 묶어서 사용하는 것이 좋습니다. 아무리 하나의 이미지라도 다른 의미를 지닌 이미지를 합친다면, 하나의 이미지를 관리하는 게 아니라 여러 개의 이미지를 하나의 파일에서 관리하는 것 일 뿐입니다.
이미지 스프라이트 사용법
1. 이미지 스프라이트로 만드는 아이콘
상, 하, 좌, 우 아이콘 이미지
이미지 스프라이트를 사용하는 경우 CSS의 backgroud와 backgroud-position 속성 설정을 통해 하나의 이미지로 보이게 할 수 있습니다.
이미지 스프라이트와 CSS 활용하기
2. 역동적인 이미지 스프라이트 사용법
모션을 하나로 합친 이미지 스프라이트
@keyframes run { to { background-position: -192px 0; } } #hero { position: absolute; width: 64px; height: 64px; background: url(‘./hero.png’) no-repeat 0 0 / auto 64px; animation: run 0.5s infinite steps(3); }
CSS의 backgroud, backgroud-position에 뿐만 아니라, @keyfraems, animaition 기능도 같이 사용하면 움직이는 것처럼 보이는 화면을 만들 수 있습니다. 이전에는 자바스크립트 코드를 많이 사용해야 했지만 CSS가 자체적으로 애니메이션 기능을 제공함으로써 간단한 코드로도 쉽게 아래와 같은 화면을 만들 수 있습니다.
역동적인 이미지 스프라이트 활용 방법
위에서 제시한 예제 코드는 첨부파일로 제공합니다. 필요하신 분은 첨부파일을 다운로드 받아서 사용하시면 됩니다.
이미지 스프라이트 활용법.zip 0.01MB
추가로 키보드 이벤트도 활용하면 게임처럼 움직이는 화면도 만들어 볼수 있습니다.
게임처럼 움직이는 이미지 만들기
2021.05.24 – [프로그래밍/Javascript] – Javascript – 키보드 이벤트를 활용한 움직이는 이미지 만들기
반응형
CSS 이미지 스프라이트란 무엇일까?
이미지 스프라이트(image sprite)
웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다.
일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버 요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다.
이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 수 있습니다.
예를 들어, 네이버 포털에 로그인을 하고 메인에서 이러한 부분을 발견할 수가 있는데, 날씨 아이콘의 이미지는 하나의 이미지로 표현되는 것이 아니라, 사실은 이미지의 집합인 이미지 스프라이트에 연결이 되어 있고 일부분만 표현이 된 것입니다.
이미지 스프라이트(image sprite)
바로 위의 이미지가 이미지 스프라이트(image sprite)입니다. 위 이미지가 적용된 스타일시트를 살펴보면 아래와 같이 되어 있습니다.
display: inline-block; width: 29px; height: 29px; vertical-align: top; background-position: 0 -68px;
다른 요소보다도 background-position을 통해 가로의 위치의 세로의 위치를 지정하고, 이미지의 사이즈(29px)로 스타일을 주게 되면 위와 같이 딱 저만큼의 부분만 이미지로 적용할 수 있는 것입니다.
이미지 스프라이트(image sprite)의 위치를 얻는 방법
하나씩 스타일을 조정하면서 위치를 얻는 방법도 있겠지만, 편한 방법으로 온라인 도구를 사용하는 것이 가장 좋습니다. 스트라이프 카우와 같은 사이트에서는 이미지 스프라이트 위치를 쉽게 찾을 수 있습니다. 따라서, 이미지들을 조합하여 이미지의 집 한인 스프라이트를 생성했고, 그것을 웹페이지에 적용하고자 한다면 해당 이미지를 요청한 뒤 위의 사이트를 활용하여 위치 값을 잡을 수 있습니다.
무료 벡터, 스톡 사진 및 PSD
불타는 화재 시퀀스 애니메이션이 있는 중세 스프라이트 횃불 세트. 불꽃이 있는 고대 나무 브랜드. pc 게임, 불타는 횃불 또는 조명 flambeau 고립 된 벡터 아이콘에 대 한 만화 요소
upklyak
52
CSS : 스프라이트 이미지(sprite images) 이해와 적용
728×90
웹에서 사용하는 이미지 중 아이콘같이 100px 이하의 작은 이미지의 경우 스프라이트를 활용하여 제작합니다.
이미 많은 웹 사이트에서 스프라이트 이미지로 수많은 작은 이미지들을 관리합니다.
네이버 스프라이트 이미지 일부
스프라이트란 2장 이상의 작은 이미지를 한 장으로 묶은 이미지를 뜻합니다.
* 스프라이트 이미지 활용 시 이미지 폴더가 단순해지고 관리가 쉬워진다는 장점이 있습니다.
▼ 스프라이트 사용 X (이미지 24개) ▼ 스프라이트 사용 O (이미지 1개)
스프라이트 이미지 만들기
1. 2장 이상의 작은 이미지를 준비합니다.
icon1.png 0.00MB icon2.png 0.00MB
2. 포토샵 또는 스프라이트 이미지 제작사이트를 이용하여 이미지를 제작합니다.
▼ 스프라이트 이미지 제작 사이트 접속
https://www.toptal.com/developers/css/sprite-generator
3. 스프라이트로 구성하고 싶은 2장 이상의 이미지를 선택 후 위 사이트의 CHOOSE FILES 로 드래그합니다.
3. 아래와 같은 화면이 나타나면 우측 DOWNLOAD 를 클릭하여 파일을 다운받아 바로 사용이 가능합니다.
좌측 CHOOSE FILES 아래 css 선택자와 속성을 미리 캡쳐 또는 메모하여 웹 개발 시 그대로 활용할 수 있습니다.
* 해당 웹 페이지 종료 시 좌측 선택자, 속성은 다시 볼 수 없습니다.
포토샵으로 좌표, 크기 체크하여 스프라이트 이미지 사용하기
1. 제작한 스프라이트 이미지를 포토샵으로 실행합니다.
2. View->New Guide Layout을 실행하여
스프라이트 이미지의 일정한 크기를 Columns, Rows를 활용하여 가이드를 생성합니다.
3. 사각선택툴을 활용하여 첫번째 이미지를 가이드에 맞게 선택 후
window->info(F8)을 실행하여 W, H 정보를 확인합니다. ex) 아래 예시 기준 44 x 44px
4. 해당 스프라이트 이미지를 적용하고 싶은 태그 대상에 아래와 같이 입력합니다.
* background-position의 좌표는 이동하는 방향에 따라 – + 를 구분하여 입력합니다. (x 오른쪽 이동은 -(마이너스))
p { background-image:url(css_sprites.png); width:44px; height:44px; } .target1 {background-position:0 0;} .target2 {background-position:-44px 0;}
728×90
CSS 이미지 스프라이트 (Image Sprite)
1. 개념
이미지 스프라이트(Image Sprite)란?
background-image로 사용될 여러 개의 이미지들을 한 개의 이미지로 묶은 후, 각 이미지가 필요한 곳에서는 해당 이미지만을 보여주도록 background-position을 조정해주는 기법입니다.
왜 사용해야 하는가?
페이지 접속 시 서버에게 전송하는 요청(Request)의 개수를 최소화하기 위함입니다.
이미지 스프라이트 비교표
스프라이트는 수직 정렬(Vertical) 타입과 바둑판(Tile) 타입 중 필요한 것을 선택하여 사용합니다.
수직 정렬 타입의 스프라이트는 이미지 개수가 늘어남에 따라 공간 또한 늘어나서 용량 이슈가 발생하므로, 모바일 환경에서는 바둑판 타입의 스프라이트를 사용하도록 합니다. (위 비교표 참조)
각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹화합니다.
2. 사용 가이드
타이틀 이미지
수직 정렬 타입에서 각 개체의 기본 간격은 50px이나, 높이가 크지 않으면 25px로 줄일 수 있습니다.
수직 정렬 타입은 좌우에 텍스트가 배치되거나 사이즈가 고정이 아닐 때 사용합니다.
버튼 이미지
바둑판 타입에서 각 개체의 기본 간격은 10px입니다.
가로 세로 사이즈가 고정일 경우 사용할 수 있습니다.
아이콘 이미지
좌측에 배치되는 아이콘은 가장 좌측에, 우측에 배치되는 아이콘은 가장 우측에 배치합니다.
GNB와 Tab 이미지
Off 상태인 Default 개체가 On 상태 개체의 바로 위에 있도록 합니다.
3. 이미지 용량 및 크기
PC Web 최대 사이즈 : 가로 1024px X 세로 1024px
(모바일 환경에서 PC 웹에 접속하였을 때, 다운로드된 이미지의 사이즈가 1024px이 넘어가면 해당 이미지가 올바르게 표시되지 않으므로 PC 웹에서 가로/세로 사이즈의 제한을 둠)
Mobile Web Css Image : 스프라이트 된 이미지의 용량이 60KB를 넘지 않도록 합니다. Promotion image : 스프라이트 된 이미지의 용량이 400KB를 넘지 않도록 합니다.
4. 사용법
Case 1) PNG
PNG로 스프라이트를 만들면 사용될 아이콘의 크기와 개수에 따라 이미지 파일이 커집니다. (PNG 파일 참고)
background-image 에 스프라이트를 연결합니다.
→ div { background-image: url(<이미지 파일 경로>); } 사용할 이미지의 위치를 background-position 을 이용하여 지정합니다.
→ div #one { background-position: 0 0; }
→ div #two { background-position: -36px 0; }
→ div #three { background-position: -72px 0; }
Case 2) SVG
SVG로 스프라이트를 만들면 .svg 파일 내 각 아이콘마다 translate로 위치값이 정해집니다. (SVG 파일 참고)
background-image 에 스프라이트를 연결합니다.
→ div { background-image: url(<이미지 파일 경로>); } .svg 파일에 기재되어 있는 translate(x, y) 를 참고하여 사용할 이미지의 위치를 background-position 을 이용하여 지정합니다.
→ div #one { background-position: 0 0; } # transform: translate(0, 0);
→ div #two { background-position: -147px -32px; } # transform: translate(147, 32);
→ div #three { background-position: -90px 0; } # transform: translate(90, 0);
5. CSS 이미지 스프라이트 생성 도구
6. References
7. 타 사이트의 적용 사례
[HTML/CSS] 스프라이트 이미지(Sprite Image) 기법
저는 위의 사진 하나로
6개의 사진을 만들어 볼거에요!
6개의 사진을 만들기 위해 6개의 사진을 필요로 하는 것이 아닌
단 하나의 사진만을 사용해 작업해보도록 하겠습니다 🙂
자 먼저 기본적인 셋팅부터 들어갈게요~
ul에 들어가 있는 기본 list-style을 해제하고,
태그의 “메뉴” 텍스트가 보이지 않기 위해 (사진이 보여야 하니까요!)
text-indent 값을 주었습니다
그리고 각 a와, a:hover에 사진을 넣었습니다
키워드에 대한 정보 스프라이트 이미지
다음은 Bing에서 스프라이트 이미지 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 HTML/CSS 무료 강좌 3-1. 클래스와 이미지 스프라이트
- node.js
- 노드
- 자바스크립트
- js
- javascript
- zerocho
- lecture
- 강좌
- 제로초
- 프로그래밍
- programming
- web
- html
- css
HTML/CSS #무료 #강좌 #3-1. #클래스와 #이미지 #스프라이트
YouTube에서 스프라이트 이미지 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 HTML/CSS 무료 강좌 3-1. 클래스와 이미지 스프라이트 | 스프라이트 이미지, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.