anchor.diff:      ### 선택 표시하기
       ### Styling the selection
   
  -    이제 상세 영역에 선택된 히어로가 보이지만 선택된 히어로를 목록에서 빠르게 찾기는 어렵네요. 이 문제는 `selected` CSS 클래스를 마스터 목록의 적당한 `<li>`에 적용하여 해결할 수 있습니다. 예를들어 히어로 목록에서 Magneta를 선택하면 아래처럼 은은한 배경색으로 보이게 할 수 있습니다.
  +    이제 상세 영역에 선택된 히어로가 보이지만 선택된 히어로를 목록에서 빠르게 찾기는 어렵네요. 
  +    이 문제는 `selected` CSS 클래스를 마스터 목록의 적당한 `<li>`에 적용하여 해결할 수 있습니다. 
  +    예를들어 히어로 목록에서 Magneta를 선택하면 아래처럼 은은한 배경색으로 보이게 할 수 있습니다.
   
       We see the selected hero in the details area below but we can’t quickly locate that hero in the list above.
       We can fix that by applying the `selected` CSS class to the appropriate `<li>` in the master list.
  
positive.code: 
  .l-sub-section
    :marked
      `ngFor` 의 (`*`) 접두어는 `<li>` 엘리먼트와 그 자식요소가 마스터 템플릿을 구성한다는 것을 뜻합니다.
  
      The (`*`) prefix to `ngFor` indicates that the `<li>` element and its children
      constitute a master template.
  
      `ngFor` 지시자는 `AppComponent.heroes` 에서 반환된 `heroes` 배열을 순회하며 템플릿 인스턴스에 출력합니다.
  
      The `ngFor` directive iterates over the `heroes` array returned by the `AppComponent.heroes` property
      and stamps out instances of this template.
  
      `ngFor`에 할당된 인용문은 "*`heroes` 배열에 있는 모든 히어로를 `hero` 지역변수에 저장하고 템플릿 인스턴스에서 사용할 수 있도록 만들라는 것*"을 뜻합니다.
  
      The quoted text assigned to `ngFor` means
      “*take each hero in the `heroes` array, store it in the local `hero` variable,
      and make it available to the corresponding template instance*”.
  
      "hero" 앞의 `let` 키워드는 `hero`가 템플릿 입력변수임을 알아보게 합니다. 이 변수를 사용하여 템플릿 안에서 히어로의 속성에 접근할 수 있습니다.
  
      The `let` keyword before "hero" identifies `hero` as a template input variable.
      We can reference this variable within the template to access a hero’s properties.
  
negative.code:     ### 클릭 핸들러를 추가하기
      ### Add the click handler
  
      이벤트 연동에 사용한 `onSelect` 메소드는 아직 생성하지 않았습니다. 
      컴포넌트에 이 메소드를 추가해보겠습니다.
  
      Our event binding refers to an `onSelect` method that doesn’t exist yet.
      We’ll add that method to our component now.
  