Style에서 li 두가지로 만들기.... 채택완료
탐크루지
10개월 전
조회 1,286
아래와 같이 li 에 배경이미지를 넣고 타임라인을 제작중인데요.
li에서 배경이미지를 한 두개 더 넣고 번갈아 가며 사용하고 싶은데요.
<li>A이미지</li>
<li class="b">B이미지</li>
<li>A이미지</li>
<li class="c">C이미지</li>
이런식으로 하려면 아래에서 b와 c에 해당되는 클래스를 어떻게 추가하면 될까요?
이리 해보고 저리해봐도 그냥 기본만 먹혀서요..
도움 주시면 감사하겠습니다.
</p>
<p>.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;
}
}</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
10개월 전
＊CSS에서 b와 c 클래스에 대해 별도로 배경 이미지를 지정.
</p>
<p>.itinerary_table li.b:before {
background-image: url('<a href="http://tom_cruise.kr/icons/image-b.svg');" target="_blank" rel="noopener noreferrer">http://tom_cruise.kr/icons/image-b.svg');</a>
}</p>
<p>.itinerary_table li.c:before {
background-image: url('<a href="http://tom_cruise.kr/icons/image-c.svg');" target="_blank" rel="noopener noreferrer">http://tom_cruise.kr/icons/image-c.svg');</a>
}</p>
<p>"http://tom_cruise.kr/icons/image-c.svg"의 Document Root 절대경로는 /icons/image-c.svg
＊클래스 이름이 올바르게 지정되었는지 확인하고, 필요한 요소에 적용
</p>
<p><ul class="itinerary_table">
<li>A이미지</li>
<li class="b">B이미지</li>
<li>A이미지</li>
<li class="c">C이미지</li>
</ul></p>
<p>
＊동일한 li에 여러 스타일이 중첩된다면,
우선순위를 설정하여 특정 클래스의 스타일이 우선 적용
</p>
<p>.itinerary_table li.b:before {
background-image: url('<a href="http://tom_cruise.kr/icons/image-b.svg')" target="_blank" rel="noopener noreferrer">http://tom_cruise.kr/icons/image-b.svg')</a> !important;
}</p>
<p>
＊CSS 파일이 제대로 로드되었는지 확인.
＊브라우저의 개발자 도구를 사용하여 해당 요소에 스타일이 적용되었는지 확인.
＊캐시 문제를 방지하기 위해 브라우저 캐시를 삭제하거나 강력 새로고침(ctrl+F5)을 수행.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인