태터툴즈 본문 이미지에 점선 없애기
Posted 2007/04/01 22:57, Filed under: TattertoolsLifepod 개발블로그를 방문해 보니 보시는 것 처럼 본문의 이미지 하단 부분에 파란색 점선이 있더군요. 예전에 제가 배포한 초창기의 스킨에서도 이와 같은 모습이 있었습니다.
Lifepod 에서는 이 점선을 의도한 것 일 수도 있으나 그때 당시 저는 원치 않은 결과 중에 한 부분이었기 때문에 저런 모습이 눈에 자꾸 걸린답니다. 일종의 노이로제가 증상인가 봐요..
일단, 저 점선의 정체는 본문의 a element 에 dashed 값을 지닌 border 속성 입니다.
(보통 하이퍼링크를 식별자로 text-decoration:underline 를 사용하지만 선 모양, 두깨, 색상, 간격과 같은 설정을 지정하기 위해 border를 사용하기도 합니다.)
이 속성은 본문의 이미지에도 상속이 되기 때문에 하이퍼 링크가 걸리는 이미지에도 border 값이 나타나게 되는 것 이죠.
.article a:link, .article a:visited {
color:#0066CC;
border-bottom: 1px dashed;
}Lifepod 개발블로그의 CSS에는 위 처럼 본문의 A 엘리먼트 에 border 프로퍼티를 사용 하고 있는것을 확인 할 수 있는데, 이것을 없애기 위해선 다음과 같은 항목을 CSS에 추가해 주시면 됩니다.
.imageblock * {
border:none !important;
}
태터툴즈의 본문에 삽입되는 이미지는 class="imageblock" 이라는 div로 감싸지게 되고 있기 때문에 .imageblock 이후의 모든 값에 border 값을 없앤다는 의미 입니다.
블로고스피어에서 놀다보면 가끔씩 저런 점선이 있는 블로그들이 종종 보이고 있는데, 그 중에서 혹시라도 이미지에 점선을 없애고 싶은 분이 계시다면 한번 적용해 보시기 바랍니다.