네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..
이미지 스프라이트 기법(Image Sprite)
네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고 이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데 오늘은 스프라이트 대하여 자세하게 알아보겠습니다! 이미지 스프라이트(Image Sprite)란? 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다. 쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다. 왜 쓰는 걸까? 이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 ..
2023.01.26