Angular2 | 컴포넌트 기본 코드 | HTML과 스타일 시트

앞에서 스크립트에 대해서 설명을 하였다면, 이제 HTML과 CSS에 대해서 설명하겠다.

app.component.html app.component.html이 어떻게 되어 있는지 보면 아래와 같다.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
.... 이하 생략 ...

<h1> 태그를 출력하고 있고, 해당 콘텐츠는 {{ title }}이라는 것이 작성되어 있다. 이 {{}}라는 기호는 JavaScript 문장을 작성해서 그 결과를 출력하는데 사용된다.

여기에서는 title 값을 출력하며, 이것은 앞에서 작성한 스크립트에서 작성한 export class에서 만든 변수이다. 스크립트에서 만든 변수를 템플릿에서 이와 같이 이용할 수 있는 것이다.

나머지 생략된 부분에는 로그 이미지 및 Angular와 관련된 몇가지 링크들이 있다. 이는 특별한 것이 없기 때문에 넘어간다.

app.component.css
다음으로 스타일 시트(app.component.css)을 열어 보면, 내용이 비어 있다. 여기에 필요에 따라 스타일을 작성하면 된다.

■ 사용자 정의 표시

여기서 컨포넌트의 기본 구조 알았다. 그럼 약간의 응용하여 컴포넌트의 표시를 약간 수정하여 보자.

아래에 app.component.html과 app.component.css 예제를 올려 두었다.

app.component.html

<div class="rect">
   <h1>AppComponent</h1>
   <p>{{'이것은, "' + title + '"라는 컴포넌트입니다.'}}</p>
</div>

app.component.css

.rect {
    border: 1px solid lightgray;
    padding: 10px 5px;
    margin: 10px 5px;
    color: darkgray;
}

이와 같이 파일을 수정하여 응용 프로그램을 다시 표시해 보자. 이번에는 사각형 테두리 안에 제목과 메시지가 표시된다.

여기에서는 app.component.css에 rect라는 클래스를 정의해 두고, 이를 app.component.html 에서 <div class="rect">와 같이 지정하여 사용하고 있다. 이것으로 HTML과 스타일 시트를 다시 쓰는 것만으로 간단히 컨포넌트의 표시를 사용자 정의할 수 있다.

그런데, HTML 파일의 템플릿에는 app.component.css을 읽어 오기 위한 태그가 없는 것을 이상하게 생각한 사람도 있을지도 모른다. 이는 app.component.ts 스크립트에서 @Component 어노테이션으로 이렇게 설정되어 있었다.

styleUrls: ['app.component.css']

이것으로 스타일 시트를 로드되기에, 스타일 시트를 로드하는 태그를 따로 작성할 필요가 없는 것이다.