[퍼블리싱] 광고배너 퍼블리싱

[요구사항]

1. 배너에 마우스를 올리면 배경이 생깁니다.

2. 배너 클릭 시 하얀색 하트가 빨간색 하트로 변경됩니다.

3. 배너 클릭 시 배너 color가 변경됩니다.

 

[이슈사항] 

*제이쿼리를 최소한으로 이용하고 css로 처리하는 방법입니다.

1. 광고배너와 배경 배너를 같은 위치로 마크업을 해줍니다.

2. 배경 배너를 position: absolute; 처리하여 광고배너와 위치를 맞춰줍니다.

3. 제이쿼리로 광고 배너 클릭 시 addClass : geryBanner 해 줄 예정입니다.

- geryBanner라는 클래스가 생겼을 시 변하는 color들을 css로 처리 해 줍니다. 

.newsLike.greyBanner {
    border: 1px solid #e1e4e6;
}
.likeBannerWrap.greyBanner .likeText p {
    color:#a9afb3;
}
.likeBannerWrap.greyBanner .likeText span {
    color:#a9afb3;
}
.likeBannerWrap.greyBanner .heartNum > span{
    font-weight: 700;
    color:#000;
}

.likeBannerWrap.greyBanner > .likeBg {
    display: none;
}

See the Pen by 현정 (@Celine__509) on CodePen.

*이미지 저작권은  (주)토큰포스트 에 있습니다.