ionic card 카드 디자인 퍼블리싱 예제 css 홀수 짝수 적용

다음과 같이 처리를 해준다.

 

1. content 백그라운드 회색배경

2. 공용 div scss 처리

3. 홀수 div 처리 짝수 div 처리

 

 

html

<ion-content>
  <div class="card_div">dd
  </div>
  <div class="card_div">ss
  </div>
</ion-content>

 

css

ion-content{
    --ion-background-color:#f3f3f3;
}

.card_div{
    float:left;
    width: calc(50% - 21px);    
    background: white;
    height: 180px;
}
.card_div:nth-child(even) {
    margin-right: 14px;margin-left: 7px;
  }
.card_div:nth-child(odd) {
    margin-left:14px;margin-right:7px;
}

 

결과 화면