개요
내가 원하는 사이트를 클론 코딩해보는 과제를 받았다.
아래 이미지 처럼 슬라이더 영역이 있어서 swiper 라이브러리로 구현하고자 했다.
문제점 발견 🤯
swiper에서 제공하는 pagination은 기본이 파란색 bullet이다.
이는 내가 클론 코딩할 사이트의 bullet과 스타일이 달랐다.
목표
- bullet 색상 변경
- margin 값을 줘서 간격 띄우기
- 위치 변경하기
작성한 코드
.swiper {
margin-top: 120px;
position: relative;
}
.swiper .swiper-pagination {
position: absolute;
bottom: 65px
}
.swiper .swiper-pagination-bullet {
background-color: #000;
margin: 0 10px;
}✅ bullet 색상 변경
❎ margin 값을 줘서 간격 띄우기
❎ 위치 변경하기
색상은 변경이 바로 되었는데 마진과 배치가 이뤄지지 않았다. 선택자가 잘못되었나 싶어서 swiper도 뜯어보고 공식 사이트도 뒤져보고 했으나.. 원인을 알지 못했다. 그러다가 정말 생각보다 간단한 해결 방안을 찾게 되었다.
바로 !important 이다.(설마..하면서 써봤는데 되어버려서 약간 허무..)
swiper에는 기존 스타일이 적용되어있어서 새로운 스타일이 먹히지 않는 것이였다.
당연한건데 처음 겪어보는거라 쉽게 생각하지 못했다.
변경 코드
.swiper .swiper-pagination {
position: absolute;
bottom: 65px !important;
}
.swiper .swiper-pagination-bullet {
background-color: #000;
margin: 0 10px !important;
}bottom 과 margin에 !important 를 추가로 입력하니 강제로 스타일이 덮여씌워지면서 정상으로 작동되었다.
✅ bullet 색상 변경
✅ margin 값을 줘서 간격 띄우기
✅ 위치 변경하기
선택자 우선순위?
선택자 우선 순위란, 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.
- 점수가 높은 선언이 우선함
- 점수가 같으면, 가장 마지막에 해석된 선언이 우선함
주의할 점!
여기서 !important는 중요점수가 무한대이다. 그래서 되도록 사용 안하는 것을 권장한다.
그 이유는, 점수가 무한대이니 수정하려고 할 때 수정이 불가능해지는 상황이 발생하고, 또 !important를 사용하는 악순환이 반복된다.
아주 중요한 극히 일부분을 제외하고 거의 사용되지 않는다. 슬라이더 영역은 한번 스타일 지정하고 건들지 않을거기 때문에 그냥 진행 했지만 깔끔하게 짜고 싶다면 다른 방법도 존재한다. 이는 팀원분이 알려주신 방법인데..
swiper-bundle.css 를 복사해서 새로운 파일로 만든 후, HTHL에 링크해주고 그 파일 안에서 스타일을 변경하는 방법이다.
swiper-pagination이랑 bullet쪽에서 !imporatnt로 해결해야만 했던 부분만 수정하면 된다고 한다.
회고
선택자 우선순위 개념에 대해서 와닿는 순간이였다. 우선순위를 염두하면서 CSS를 짜야하구나 느꼈고, 처음으로 사용해본
!imporatnt... 정말 막강한 아이였다.. 🫢
결론은 swiper 번들에 기본 테마가 붙어있는 거라 커스텀 하려면 번들을 가져와서 그 파일 내에서 직접 커스텀 하는 방법이 깔끔한 것 같다.
몰랐던 사실을 팀원 분의 정보 공유를 통해 알게된 점이 가장 좋았다.(감사합니다 팀원님..🥺)
