6장 스마트폰 레이아웃

웹피이보다 스마트폰 레이아웃이 더 간단, 부가적인 내용을 알아보는 내용

스프라이트 이미지

웹페이지에서 아이콘 등을 불러올 때 많이 사용

웹페이지에서 아이콘을 적용하는 방법 3가지

1. 아이콘을 하나 하나의 이미지로 제공하는 방식
   커넥션을 방비하는 문제가 발생해서 좋지 않음
   전부 이미지로 불러오면 시간이 낭비되고 사용자도 불편

2. SVG 이미지를 svg태그로 그냥 뽑아서 제공하는 방법
   SVG이미지는 벡터이미지 깨지지 않음, 일러스트레이터에서 쉽게 뽑아 올 수 있음
   고해상도 스마트폰, 모니터를 위해 제공

3. 스프라이트 이미지를 사용하는 방법
   가장 대중적으로 사용되는 방법
   아이콘을 표현할 때 i 태그를 사용
   자주 사용되는 아이콘들을 하나로 모아둔것

   i태그는 원래 italic의 약자로 기울어진 글자를 만들기 위해 만들어진 태그지만, 기울어진 글자를 만들 이유가 거의 없어서, "이건 icon의 약자가 분명해"하고서 개발자들이 아이콘을 만들 때 사용하는 "사실상 표준"에 해당하는 태그

스프라이트 이미지 생성

※자주 사용되므로 꼭 기억

CSS Sprites Generator

가로, 세로, 간격 등을 선택할 수 있음
사용 할 때는 왼쪽에 태그를 복사해 스타일에 적용