anchor.diff:  figure.image-display
       img(src='/resources/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes")
   :marked
  +  다음은 "Little Tour of Heroes" 컴포넌트입니다.
  +
     Below is the "Little Tour of Heroes"  component.
   
   +makeExample('user-input/ts/app/little-tour.component.ts', 'little-tour', 'app/little-tour.component.ts')(format=".")
   :marked
  +  ### 관찰
     ### Observations
     
  +  * **엘리먼트를 참조하기 위해 템플릿 참조를 사용** &mdash;
  +  `newHero` 템플릿 변수는 `<input>` 엘리먼트를 가르킵니다.
  +  `<input>` 엘리먼트의 어느 형제나 자식으로부터 `newHero`를 참조할 수 있습니다.
  +
     * **Use template variables to refer to elements** &mdash;
     The `newHero` template variable refers to the `<input>` element.
     You can reference `newHero` from any sibling or child of the `<input>` element.
   
  +  * **엘리먼트가 아닌 값을 전달** &mdash;
  +  `newHero`를 컴포넌트의 `addHero` 메소드에 전달하는 대신,
  +  입력 상자 값을 가져와서 *그 값*을 `addHero`에 전달합니다.
  +
     * **Pass values, not elements** &mdash;
     Instead of passing the `newHero` into the component's `addHero` method,
     get the input box value and pass *that* to `addHero`.
  +
  +  * **템플릿 구문은 간단하게 유지** &mdash;
  +  `(blur)` 이벤트는 두 개의 JavaScript 구문에 바인딩되어 있습니다.
  +  첫번째 구문은 `addHero`를 호출합니다. 두번째 구문인 `newHero.value=''`은
  +  새로운 히어로가 목록에 추가된 후 입력 상자를 지웁니다.
   
     * **Keep template statements simple** &mdash;
     The `(blur)` event is bound to two JavaScript statements.
  
positive.code: 
  .l-main-section
  :marked
    ## Summary
  
    You have mastered the basic primitives for responding to user input and gestures.
  
    These techniques are useful for small-scale demonstrations, but they
    quickly become verbose and clumsy when handling large amounts of user input.
  
negative.code: 
  .l-main-section
  :marked
    ## 소스 코드
    ## Source code
  
    다음은 이 페이지에서 논의 된 모든 코드입니다.
  
    Following is all the code discussed in this page.
  +makeTabs(`
  