2-10 스타일 적용하기

스타일 적용

대시보드에 스타일을 적용하기 위해 컴포넌트를 수정한다.

src/app/dashboard.component.ts

import { Component, OnInit } from '@angular/core'; import { Hero } from './hero' import { HeroService } from './hero.service';   @Component({   selector: 'my-dashboard',   templateUrl: './dashboard.component.html',   styleUrls:['./dashboard.component.css'] }) export class DashboardComponent implements OnInit {   heroes: Hero[] = [];     constructor(private heroService: HeroService){}     ngOnInit() {     this.heroService.getHeroes()     .then(heroes => this.heroes = heroes.slice(1,5));   }   }

 

대시보드 css

src/app/dashboard.component.css

[class*='col-'] {   float: left;   padding-right: 20px;   padding-bottom: 20px; } [class*='col-']:last-of-type {   padding-right: 0; } a {   text-decoration: none; } *, *:after, *:before {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } h3 {   text-align: center; margin-bottom: 0; } h4 {   position: relative; } .grid {   margin: 0; } .col-1-4 {   width: 25%; } .module {   padding: 20px;   text-align: center;   color: #eee;   max-height: 120px;   min-width: 120px;   background-color: #607D8B;   border-radius: 2px; } .module:hover {   background-color: #EEE;   cursor: pointer;   color: #607d8b; } .grid-pad {   padding: 10px 0; } .grid-pad > [class*='col-']:last-of-type {   padding-right: 20px; } @media (max-width: 600px) {   .module {     font-size: 10px;     max-height: 75px; } } @media (max-width: 1024px) {   .grid {     margin: 0;   }   .module {     min-width: 60px;   } }

 

영웅 세부내역 컴포넌트에도 스타일을 적용한다.

src/app/hero-detail.component.css

label {   display: inline-block;   width: 3em;   margin: .5em 0;   color: #607D8B;   font-weight: bold; } input {   height: 2em;   font-size: 1em;   padding-left: .4em; } button {   margin-top: 20px;   font-family: Arial;   background-color: #eee;   border: none;   padding: 5px 10px;   border-radius: 4px;   cursor: pointer; cursor: hand; } button:hover {   background-color: #cfd8dc; } button:disabled {   background-color: #eee;   color: #ccc;   cursor: auto; }

 

src/app/hero-detail.component.ts

import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { Location } from '@angular/common'; import 'rxjs/add/operator/switchMap';   import { Hero } from './hero'; import { HeroService } from './hero.service';   @Component({   selector: 'hero-detail',   templateUrl: './hero-detail.component.html',   styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit {   hero: Hero;     constructor(     private heroService:HeroService,     private route:ActivatedRoute,     private location:Location   ){}     ngOnInit(): void{     this.route.paramMap     .switchMap((params: ParamMap) =>       this.heroService.getHero(+params.get('id')))       .subscribe(hero => this.hero = hero);   }     goBack():void{     this.location.back();   } }

 

메인 앱 컴포넌트에서 스타일을 적용한다.

src/app/app.component.css

h1 {   font-size: 1.2em;   color: #999;   margin-bottom: 0; } h2 {   font-size: 2em;   margin-top: 0;   padding-top: 0; } nav a {   padding: 5px 10px;   text-decoration: none;   margin-top: 10px;   display: inline-block;   background-color: #eee;   border-radius: 4px; } nav a:visited, a:link {   color: #607D8B; } nav a:hover {   color: #039be5;   background-color: #CFD8DC; } nav a.active {   color: #039be5; }

nav태그에 대한 스타일을 만들었다.

 

메인 앱에도 스타일을 적용한다.

src/app/app.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'my-app',   template: `    <h1>{{title}}</h1>    <nav>     <a routerLink="/dashboard">대시보드</a>     <a routerLink="/heroes">영웅들</a>    </nav>    <router-outlet></router-outlet>    `,    styleUrls: ['./app.component.css'] }) export class AppComponent {   title = '영웅 여행'; }

 

 

어플리케이션 전역에 반영되는 스타일을 적용한다.

src/styles.css

/* Master Styles */ h1 {   color: #369;   font-family: Arial, Helvetica, sans-serif;   font-size: 250%; } h2, h3 {   color: #444;   font-family: Arial, Helvetica, sans-serif;   font-weight: lighter; } body {   margin: 2em; } body, input[text], button {   color: #888;   font-family: Cambria, Georgia; } /* everywhere else */ * {   font-family: Arial, Helvetica, sans-serif; }

이 파일은 index.html에 링크되어 있지 않지만 앵귤러 CLI가 자동으로 추가한다.

 

브라우저에서 실행해 보자