-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
!important 에 대해서 질문 드립니다.
22.06.29 15:14 작성 조회수 218
1
guide 섹션 - 슬릭 슬라이더 css 상세 디자인 6:57
안녕하세요. 선생님 강의에 따라서 코딩하면서 공부하고 있는데요.
.mockup-slider .slick-arrow {
display: none; 적용이 안 되는 거예요. 선생님 강의에서는 적용이 되었고요. 하지만 안 되는 경우도 있으니 !important 넣어주면 될 거라고 말씀해주셨고요.
이 부분에서 궁금한 점이 생겨서요. 선생님과 똑같이 따라해왔는데 저는 display:none; 이 왜 적용이 안 된 건지 궁금하고요.
혹시 코딩에 있어서 순서의 다름 부분으로 이런 차이가 발생될 수 있는 건지요?
그리고 slick custom css 에서 보면,
.slideshow .slikck-arrow {
display: none !important; 이렇게 slideshow 이곳에 이미 넣어줬잖아요.
그래서 .mockup-slider 에서 display: none;이 적용이 안 된 거였을까요? !important넣어주니깐 적용은 됩니다.
임포턴트는 가급적 적게 쓰는 것이 좋다고 들은 것 같은데요. 이렇게 한번 사용하게 되면 그 다음 요소가 적용되기 위해서 또 사용할 수 밖에 없는 것 같은데요.
말이 너무 길어졌네요..ㅜㅜ그러니깐 선생님과 똑같이 코딩을 해왔는데도 강의에서는 display:none;이 적용되고 저는 적용이 안돼서 important로 해야 적용되는 것과,
적용 안 된 이유가 위에서 !importnant를 넣어준 것 때문에 적용이 안 된 것이 아닐까 하는 궁금증을 여쭙고 싶었습니다.
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2022.06.30
html과 함께 봐야 하는데 css만 있어서 정확한 답은 드리기 어렵네요.
아래처럼 작성하시면 작동하는게 맞습니다.
.slideshow .slick-arrow {
border: 1px solid #000;
display: none !important;
}
혹시 안되시는 경우에 슬릭 슬라이더의 화살표를 없애는 방법은 CSS로 display: none 해도 되지만 슬릭 슬라이더 옵션에서 간다하게 하실 수 있습니다. arrows: false를 넣어주시면 됩니다. 기본값이 true 입니다.
$('.slideshow').slick(
arrows: false
);
0
답변 2