728x90
반응형
ion-button 이나 ion-item 등의 컴포넌트를 쓰다보면 원치않는 기본 css가 적용되어있고,
바꾸려고 해도 원하는대로 적용되지 않는다.
https://ionicframework.com/docs/api/item
문서의 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
--background 속성을 이용해 값을 넣어주면된다.
728x90
반응형
'아이오닉' 카테고리의 다른 글
[하이브리드앱 ionic]시작해보기 8 - 모달창(ion-modal) 만들기 (0) | 2019.07.02 |
---|---|
[하이브리드앱 ionic]시작해보기 7 - 페이지이동하면서 toast 창 보이기 (0) | 2019.07.02 |
[하이브리드앱 ionic]시작해보기 5 - 다양한 컴포넌트 만들기 (0) | 2019.06.28 |
[하이브리드앱 ionic]시작해보기 4 - alert창 띄우기 (0) | 2019.06.28 |
[하이브리드앱 ionic]시작해보기 3 - 새로운 페이지 추가 (0) | 2019.06.28 |
댓글