Angular Component Style 처리

# Angular Component Style 처리

컴포넌트.css 파일을 수정할 경우, 해당 컴포넌트.html을 대상으로 스타일이 적용된다.(View 캡슐레이션)

Angular에서 build할 때, 해당 컴포넌트에서만 스타일이 적용되도록, 별도로 class명을 변경한다.

.css 또한 inline형식으로 지정 가능하다.

todo.component.css 中

.title {

 background-color: blueviolet;

 padding: 46px; 26px; 26px; 16px;

 font-weight: normal;

 color: white;

}

h1, h2{

 margin: 0;

 font-wiehgt:normal;

}

h1 {

 margin-bottom: 16px;

}

 

# Inline 형식으로, Style 지정하기(예제 : checkbox)

styles 속성 내에 `` 기호 안에, css style 속성값들을 지정이 가능

@Component({

 styles:[`

   :host { //해당 컴포넌트 body를 의미?

     display: block; //컴포넌트 기본값은 inline-block이다.

     padding: 16px;

     color: darkgrey;

     background-color;

   }

   input {

     position: relative;

   }

   input:before { //state값

     content: ""; 

     display: inline-block;

     width: 20px;

     hieght: 20px;

     background-color: white;

     border-radius: 20px;

     position : absolute;

     top : -6px;

     left : -8px;

     border: 1px solid darkgrey

  }

  input:checked:after {

   content: '\\2713'; //체크표시 유니코드 원래는 \ 하나면 되는데, typescript때문에 2개 입력 

   display: inline-block;

font-size: 18px;

width: 20px;

hieght: 20px;

background-color: dimgray;

color: white;

border-radius: 20px;

position : absolute;

top : -6px;

left : -8px;

border: 1px solid darkgrey

 }

input:checked + label{ //sibling 선택자, :은 속성 선택자, 체크표시 가로 세로줄 표시해주기

 text-decoration: line-through;

}

`]

})

 

# Inline 형식으로, Style 지정하기(예제 : text)

styles 속성 내에 `` 기호 안에, css style 속성값들을 지정이 가능

@Component({

styles:[`

:host { //해당 컴포넌트 body를 의미?

display: block; //컴포넌트 기본값은 block이다.

padding: 16px 16px 16px 10px;

color: darkgrey;

background-color:white;

}

 

app-todo, app-add-todo { //자식 컴포넌트에도 스타일 지정 가능

 

}

input {

display: inline-block;

font-size:18px;

border:none;

}

input:focus, button:focus{

outline: none;

}

button {

 width: 24px;

hieght:25px;

border-radius:24px;

color:white;

line-height:17px;

border:1px solid dimgray;

backgroud-color :darkblue;

}

`]

})

 

# global style 적용하기

app/src/styles.css 상에 작성시, app 전체에 대한 스타일 속성 지정 가능

index.html 또는 styles.css 상에 외부 bootstrap 이나 여러가지 스타일들을 지정 가능