[하이브리드앱 ionic]시작해보기 6 - 컴포넌트 css 적용하기

ion-button 이나 ion-item 등의 컴포넌트를 쓰다보면 원치않는 기본 css가 적용되어있고,

 

바꾸려고 해도 원하는대로 적용되지 않는다.  

 

https://ionicframework.com/docs/api/item

ion-item - Ionic Documentation

문서의 CSS Custom Properties 부분을 참고해 css를 수정해야한다. 

 

ion-item안에 이미지를 넣었는데 100%로 꽉채워도 빈공간이 생겨서보니 padding이 자동으로 설정되어 있었다.

 

ion-item{
  --padding-start: 0;
  --padding-end:0;
  --inner-padding-start:0;
  --inner-padding-end:0;
}

 

이렇게 설정해주면 원하는대로 이미지를 꽉 채울 수 있다! 

각 컴포넌트의 CSS Custom Properties 를 참고해 값을 넣어주면 된다. 

 

 

 

ion-button 에 기본적으로 설정되어있는 색 이외의 다른색을 넣고 싶을때도 아래에서 확인할 수 있듯이 

 

https://ionicframework.com/docs/api/button#css-custom-properties

ion-button - Ionic Documentation

 

--background 속성을 이용해 값을 넣어주면된다.