[스마트폰]스마트폰 레이아웃 구성 #2(스프라이트 이미지)

이번 포스팅에서는 스프라이트 이미지에 대해 설명을 하도록 하겠습니다.

비록 제목이 "스마트폰 어플 만들기" 이지만 어플은 안만들고 스마트폰 레이아웃이 

어떻게 이루어지는가를 알아보는 포스팅입니다.

STEP1. 스프라이트 이미지가 무엇인가?

---

스프라이트 이미지란 이미지를 여러개 뭉쳐놓은 것 입니다.

스프라이트 이미지가 무엇인지 한번 사진을 통해 알아보도록 할게요

위 이미지가 바로 스프라이트 이미지 입니다.

물론 실제 사용할때는 이렇게 붙여서 사용하지는 않아요~

1. 일단 사용할 이미지를 포토샵으로 만들어 놓습니다.

이렇게 따로 따로 만들어 줘요~

2. http://csssprites.com 에서 스프라이트 이미지를 만듭니다.

이렇게 파일을 순서대로 넣어주시고

설정을 해줍니다.

설정을 완료하고 GENERATE를 클릭하시면 이렇게 Style코드가 나옵니다.

이제 이 코드를 이용할 거에요

완료하면

이렇게 원래 다른 이미지가 합쳐진 것을 볼 수 있습니다.

이런식으로 웹 페이지를 만들때 여러 이미지를 사용할경우 하나의 이미지르 만들어주시면 편리합니다.

STEP.2 스프라이트 이미지를 사용해보자

---

Visual Studio Express for 2013으로 가서 스프라이트 이미지의 스타일을 한번 지정해보도록 하겠습니다.

스프라이트 이미지의 스타일로 지정하기 전에는 이렇게 보여질 것 입니다.

이제 어떻게 변하는지 잘 보세요

이렇게 이미지를 넣을 부분이 #main_header의 <a>태그의 left클래스 인것을 확인할 수 있습니다.

http://csssprite.com 에서 설정해준 코드를 사용합니다.

background(배경) 은 sptires.png 로 해준다는 뜻 입니다.

위 처럼 코딩을 하시면 이렇게 나오는데요.. Main이라는 글씨가 너무 걸리적 거리죠???

그럴때는

※indent : 들여쓰다

text-indent : -99999px; 을 입력을 해주면

이렇게 Main 글자가 Button 이미지 뒤로 들어가게 됩니다.

왼쪽 Toggle도 마찬가지에요

다음 포스팅에는 Toggle 에 대한 내용을 하겠습니다.

Toggle가 무엇이면 스마트폰에서 어떠한 버튼을 터치하면 숨겨졌던 목록들이 보여지는? 그런걸 할거에요