Rev. 2.73

Retina.js는 사용자 기기의 레티나 디스플레이 지원 여부를 구분하여 이에 맞는 고해상도 이미지가 있는지를 확인한 후 교체해주는 스크립트입니다. 레티나 디스플레이용 고해상도 이미지를 준비하는 규칙은 애플에서 사용하는 방법(@2x)과 같습니다. 예를 들어 아래와 같은 이미지 요소가 있다고 가정하면:

<img src="/images/my_image.png" />

같은 경로에서 같은 포맷을 가진 @2x 이미지를 찾고 존재하는 경우에만 자동으로 교체하는 것이죠.

<img src="/images/my_image@2x.png" />

Retina.js를 웹사이트에 적용하는 것은 간단합니다. 스크립트를 다운로드하고 페이지의 최하단(</body> 이전)에 아래와 같은 코드를 삽입합니다:

<script type="text/javascript" src="/scripts/retina.js"></script>


레티나 디스플레이 사용자는 이런 느낌을 받을겁니다. +_+:

settings.png

LESS CSS의 믹스인(Mixin) 기능을 이용하여 요소의 배경에도 고해상도 이미지를 적용할 수도 있습니다. 이 역시 기존에 사용하던 오리지널 배경 이미지와 고해상도 배경이미지(@2x)를 각각 준비하고 스타일시트에 레티나 디스플레이를 구분할 수 있는 미디어 쿼리와 background-size속성을 작성하여 개별 요소에 선택적으로 적용할 수 있습니다. 이 방법을 이용하려면 먼저 LESS CSS의 사용법을 숙지하는 것이 좋습니다.

LESS는 훨씬 적은 분량의 코드로 CSS를 작성할 수 있게 하는 메타-언어(예: CoffeeScript)입니다. 변수, 믹스인, 연산 그리고 함수같은 동적 구문을 사용할 수 있습니다. 그리고 클라이언트측(크롬, 사파리, 파이어폭스) 뿐만아니라 서버측(Node.js, Rhino)에서도 사용할 수 있습니다.

동봉된 retina.less 파일에 다음과 같이 코딩하면:

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

요렇게 파싱되어 CSS에 적용되는 것이죠:

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar