Style에서 li 두가지로 만들기....
본문
아래와 같이 li 에 배경이미지를 넣고 타임라인을 제작중인데요.
li에서 배경이미지를 한 두개 더 넣고 번갈아 가며 사용하고 싶은데요.
<li>A이미지</li>
<li class="b">B이미지</li>
<li>A이미지</li>
<li class="c">C이미지</li>
이런식으로 하려면 아래에서 b와 c에 해당되는 클래스를 어떻게 추가하면 될까요?
이리 해보고 저리해봐도 그냥 기본만 먹혀서요..
도움 주시면 감사하겠습니다.
.itinerary_table li{
padding-bottom: 1.5rem;
border-left: 2px dotted #000000;
position: relative;
padding-left: 20px;
margin-left: 10px;
&:last-child{
border-left: 2px dotted #000000;
padding-bottom: 30px;
}
&:before{
background-image: url('/icons/pin-48.svg');
background-color: #FFFFFF;
background-size: 32px;
width: 32px;
height: 32px;
content: '';
border: 0;
/*box-shadow: 3px 3px 0px #000000;*/
/*box-shadow: 3px 3px 0px #000000;*/
border-radius: 50%;
position: absolute;
left: -17px;
top: 0px;
}
}
답변 2
＊CSS에서 b와 c 클래스에 대해 별도로 배경 이미지를 지정.
.itinerary_table li.b:before {
background-image: url('http://tom_cruise.kr/icons/image-b.svg');
}
.itinerary_table li.c:before {
background-image: url('http://tom_cruise.kr/icons/image-c.svg');
}
"http://tom_cruise.kr/icons/image-c.svg"의 Document Root 절대경로는 /icons/image-c.svg
＊클래스 이름이 올바르게 지정되었는지 확인하고, 필요한 요소에 적용
<ul class="itinerary_table">
<li>A이미지</li>
<li class="b">B이미지</li>
<li>A이미지</li>
<li class="c">C이미지</li>
</ul>
＊동일한 li에 여러 스타일이 중첩된다면,
우선순위를 설정하여 특정 클래스의 스타일이 우선 적용
.itinerary_table li.b:before {
background-image: url('http://tom_cruise.kr/icons/image-b.svg') !important;
}
＊CSS 파일이 제대로 로드되었는지 확인.
＊브라우저의 개발자 도구를 사용하여 해당 요소에 스타일이 적용되었는지 확인.
＊캐시 문제를 방지하기 위해 브라우저 캐시를 삭제하거나 강력 새로고침(ctrl+F5)을 수행.
.itinerary_table li.b:before{
background-image: url('/icons/pin-48b.svg');
}
.itinerary_table li.c:before{
background-image: url('/icons/pin-48c.svg');
}
답변을 작성하시기 전에 로그인 해주세요.