WEBDIR :: Holder - 클라이언트 측에서 이미지 예제 제공

이전에 다뤘던 이미지 예제(placehold) 제공 웹서비스를 클라이언트 측에서 제공할 수 있도록 도와주는 라이브러리입니다. 웹서비스에서 제공하는 것보다 많은 것들을 설정할 수 있기에 이에 대하여 알아봅니다.

Holder 소개

Holder는 지정한 자리에 이미지를 대체하는 라이브러리로, Cnavas와 SVG를 사용하여 색상, 폰트, 창의 크기 변화에 대한 동작을 설정할 수 있다. 무엇보다 유동적으로 창 크기가 변경되는 환경을 지원하기 때문에 활용도가 높다.

브라우저 지원

Chrome
Firefox 3+
Safari 4+
IE9+ (일부 6~8지원)
Opera 12+
Android(with fallback)

Holder 사용법

HTML 문서에 holder.js 를 삽입한다.

<script src="holder.js"></script>

Holder는 아래와 같이 특정 src 속성을 가진 모든 이미지를 처리한다.

<img src="holder.js/300x200">

위 예제는 너비 300픽셀, 높이 200픽셀의 이미지를 출력한다.

콘솔 404 에러를 피하기 위해서는 src 속성 대신에 data-src 을 사용해야 한다.

Placeholder 옵션

Placeholder 옵션은 URL 속성을 통하여 설정한다(예. holder.js/300x200?x=y&a=b). 다중 옵션은 & 문자에 의해 구분된다.

theme : placeholder의 테마를 설정한다. 예. holder.js/300x200?theme=sky
random : 랜덤 테마를 설정한다. 예. holder.js/300x200?random=yes
bg : 배경 색상을 설정한다. 예. holder.js/300x200?bg=2a2025
fg : 전경 색상(글자 색상)을 설정한다. 예. holder.js/300x200?fg=ffffff
text : 원하는 문구 설정. 예. holder.js/300x200?text=Hello
size : 글자의 크기로 기본 단위는 pt. 예.holder.js/300x200?size=50
font : 원하는 글꼴 설정. 예. holder.js/300x200?font=Helvetica
align : 글자 정렬. 예. holder.js/300x200?align=left
outline : placeholder에 외곽선과 대각선을 그린다. 예. holder.js/300x200?outline=yes

테마

Holder에는 사용자들의 레이아웃과의 조화에 도움이되는 테마들이 포함되어 있다.

6개의 기본적인 테마들 : sky, vine, lava, gray, industrial, social

테마 추가 및 설정

테마에는 foreground, background, size, font, fontweight 5가지 속성이 있다. size 속성은 테마의 최소 글꼴 크기를 지정한다. fontweight의 기본값은 bold이다.

아래와 같은 테마를 직접 만들 수 있다:

Holder.addTheme("dark", {
  background: "#000",
  foreground: "#aaa",
  size: 11,
  font: "Monaco",
  fontweight: "normal"
});

특정한 문구를 사용하고 싶은 placeholder 그룹이 있다면, 테마에 text 속성을 추가할 수 있다.

Holder.addTheme("thumbnail", { background: "#fff", text: "Thumbnail" });

추가한 테마 사용법

추가한 테마를 사용하는 두가지 방법 :

런타임에 테마를 삽입하고 테마 이름을 사용하여 placeholder를 표시한다.
어떤 곳이든 테마를 삽입하고 테마 이름을 사용하여 placeholder를 재표시한다.

첫번째 방법은 가장 쉬운 방법이다. holder.js 를 삽입한 후에, 원하는 테마를 추가하는 스크립트 태그를 추가한다:

<script src="holder.js"></script>
<script>
Holder.addTheme("bright", {
  background: "white", foreground: "gray", size: 12
});
</script>

두번째 방법은 테마를 추가한 후 run 호출해야 한다.

Holder.addTheme("bright", {background: "white", foreground: "gray", size: 12}).run();

특정 이미지에 추가한 테마와 도메인을 사용

추가한 테마를 다른 이미지에 서로 다른 영역에서 Holder를 사용할 수 있다.

<img data-src="example.com/100x100?theme=simple" id="new">

Holder.run({
  domain: "example.com",
  themes: {
    "simple": {
      background: "#fff",
      foreground: "#000",
      size: 12
    }
  },
  images: "#new"
});

추가한 테마에 이미지를 삽입

체인호출로 프로그래밍적으로 placeholder를 추가할 수 있다.

Holder.addTheme("new", {
  foreground: "#ccc",
  background: "#000",
  size: 10
}).addImage("holder.js/200x100?theme=new", "body").run();

addImage 의 첫번째 인자는 src 속성이고, 두번째 인자는 부모 요소의 CSS 선택자이다.

텍스트

Holder는 이미지의 경계를 벗어날 경우, 자동적으로 글자에 줄바꿈을 추가한다. 글자가 수평 및 수직 경계 모두를 벗어날 정도로 너무 긴 경우, 글자는 위로 이동된다. 줄바꿈을 제어하기 원하는 경우 text 속성에 \n 을 추가할 수 있다.

<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.">

줄바꿈을 해제하려면, nowrap 옵션에 true를 설정한다.

<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.&amp;nowrap=true">

직접 지정한 글꼴을 사용하는 Placeholders는 도메인간 자원 연결에 SVG의 제약으로, 기본적으로 canvas를 사용하여 출력한다. 오직 로컬로만 글꼴을 사용하는 경우, Holder.run 옵션에 ture 로 noFontFallback 을 설정하여 동작을 사용하지 않도록 설정할 수 있다. 그러나 외부에서 로드한 글꼴을 사용하여 SVG placeholder 를 출력할 필요가 있다면, img 태그 대신에 object 태그를 사용하고 해당 link 태그에 holderjs 클래스를 추가해야 한다.

<head>
<link href="http://.../font-awesome.css" rel="stylesheet" class="holderjs">
</head>
<body>
<object data-src="holder.js/300x200?font=FontAwesome"></object>

로컬에서 테스트할때, 글꼴 URL은 프로토콜에 정의된 HTTP 또는 HTTPS가 있어야 한다.

object placeholders는 자신의 DOM의 추가된 이점과 함께 검사하고 수정할 수 있는 img placeholders 처럼 작동한다. img placeholders 와 마찬가지로, data-src 속성은 data 속성보다 더 신뢰할만 한다.

유동적인 placeholders

백분율로 수치를 지정하면, 미디어쿼리에 응답하는 유동적인 placeholder가 생성된다.

<img data-src="holder.js/100px200">

기본적으로 유동적인 placeholder는 픽셀단위로 현재 크기를 보여준다.유동적이기에 이 값은 창의 크기에 따라 수치가 변경된다. 100%x75처럼 퍼센트율 치수로 표기하려면, 같은 문자에 텍스트모드 플래그를 holder.js/100px75?textmode=literal 로 설정해야한다.

픽셀단위 vs 퍼센트율단위

자동으로 크기가 결정되는 placeholders

강제로 이미지 크기가 지정되는 것을 피하려면 auto 플래그를 사용한다.

<img data-src="holder.js/200x200?auto=yes">

위의 예제는 어떤 내장된 CSS의 너비나 높이의 영향을 받지 않고 출력된다.

textmode 플래그로 exact를 설정하면 자동적으로 크기가 결정되는 placeholder의 현재 크기를 보여준다.

창 크기의 변경시 업데이트를 방지

exact 모드에서 유동적인 placeholder와 자동적으로 크기가 결정되는 placeholder는 창크기가 변경되면 크기가 업데이트 된다. 특정 이미지가 창 크기가 변경될때 업데이트 여부를 설정하려면, setResizeUpdate 메소드를 사용할 수 있다.

var img = $('#placeholder').get(0);
Holder.setResizeUpdate(img, false);

위의 예제에서는 지정된 이미지의 업데이트를 일시적으로 중지한다(DOM은 객체이어야함).

업데이트를 다시 사용하려면 아래와 같이 실행한다.

Holder.setResizeUpdate(img, true);

placeholder를 즉시 업데이트하여 출력해준다.

배경 placeholders

Holder는 holderjs 클래스 요소에 대한 배경 이미지로 placeholder를 출력할 수 있다.

#sample {background:url(?holder.js/200x200?theme=social) no-repeat}

<div id="sample" class="holderjs"></div>

CSS의 Holder URL은 ?를 앞에 두어야 한다. 이미지 placeholders와 같이 data-background-src 속성에 Holder URL를 지정할 수 있다.

<div class="holderjs" data-background-src="?holder.js/300x200"></div>

배경 placeholders에 요소의 높이 및 너비를 정의해야 한다. 유동적인 배경 placeholders는 아직 지원되지 않는다.

런타임 설정

Holder는 이미지 생성 과정에 영향을 미치는 몇가지 옵션을 런타임시에 설정할 수 있다. 이들은 Holder.run 호출을 통해 전달된다.

domain : 도메인은 이미지 생성을 위해 사용. 기본값은 holder.js
dataAttr : HTML 속성은 기본 src 속성에 폴백을 정의하는데 사용. 기본값은 data-src
renderer : renderer를 사용할 수 있다. 옵션으로는 svg, canvas. 기본값은 svg
images : CSS 선택자는 img 태그를 찾는데 사용된다. 기본값은 img
objects : CSS 선택자는 object placeholders를 찾는데 사용된다. 기본값은 object
bgnodes : CSS 선택자는 배경 placeholders를 가진 요소를 찾는데 사용된다. 기본값은 body .holderjs
stylenodes : CSS 선택자는 SVG placeholders에 임포트된 스타일시트를 찾는데 사용된다. 기본값은 head link.holderjs
lineWrapRatio : 이미지의 외곽에서부터 글자를 감싸는 비율. 기본값은 0.9

로드시에 맞춤화 설정을 사용

holder.js를 포함한 직후에 맞춤화 설정에 Holder.run 을 실행하여 기본 구성으로 실행되는 것을 방지할 수 있다. 그러나 기본 구성을 사용하는 어떤 placeholders을 출력하기 위해 다시 Holder.run 을 실행해야 한다.

lazyload.js와 함께 사용

Holder는 lazyload와 호환되며, 유동적인 그리고 고정된 너비의 이미지에서 작동된다. 최상의 결과를 얻으려면, .lazyload({skip_invisible:false})를 실행하자.

활용

필자는 이미지 업로드 폼을 만들면서 이를 활용해 보았다. 이미지를 업로드 전에 Holder를 이용해 무대를 표시하고 업로드 후엔 이를 이미지로 대체하는 방법으로 말이다. 비슷한 방법으로 고정크기의 이미지를 업로드해야 한다면 이를 Holder를 이용해 표기하는 것도 나쁘지 않을 것이다.

'웹코딩 > App,Plugin' 카테고리의 다른 글

Highlight.js - 코드 구문 강조 (2)	2015.08.07
matchHeight - 요소간의 높이 통일화 (0)	2015.08.06
이미지 예제(placehold) 제공 웹서비스 (0)	2015.08.04
Parsley validator(폼유효성 검증) remote와 extra #5 (0)	2015.07.17
Parsley validator(폼유효성 검증) UI와 이벤트 #4 (0)	2015.07.16