SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

a:visited pseudo 선택자 스타일 제한?

얼마전 조금 이상한 점을 발견했는데..

크롬(chrome) 브라우저(ver.6.0.472.63)에서, a:visited 에 background-images 와 border 속성이 적용되지 않는 것을 발견했습니다. 관련된 정보를 구글링해 봤더니, stackoverflow 에서 비슷한 현상을 질문한 글이 있었습니다.

http://stackoverflow.com/questions/3788855/google-chrome-avisited-background-image-not-working

Jquery 로도 시도해 봤지만.. jQuery('a:visited').length returns 0 이라는군요.;

답변글 중에 Firefox 도 곧 그렇게 될거라는 이야기가 있습니다. 오늘 FF 4.0 베타를 설치했는데, 정말 Firefox 도 속성이 적용되지 않았습니다..

답변글에 링크된 문서인 (privacy-related changes coming to CSS :visited) 에 따르면 보안 문제로 a:visited의 처리가 바뀔꺼고.. a:visited pseudo 선택자에서 color 를 제외한 다른 속성이 제한될거라고 말하는것....... 같긴한데, 너무 어려운 이야기라 잘 모르겠습니다.ㅎ 위 링크글의 한국어 번역본 (CSS :visited에 대한 프라이버시 정책변화) 을 찾긴 했습니다만.. 역시 어렵긴 마찬가지네요. :)

아무튼, 브라우저별 테스트를 위해 간단한 테스트 페이지를 만들었습니다.

a:visited 테스트 페이지

어떻게 보이시나요? 스타일시트(CSS)에서 링크에 준 속성은 아래와 같습니다.

        a {
            color: blue;
            text-decoration: underline;
            padding: 4px;
            font-size: 18px;
        }
        a:visited {
            color: red;
            background: black;
            border: 5px solid #8da437;
        }
        a:hover {
            color: yellow;
            background: gray;
            border: 5px solid #8da437;
        }

링크를 클릭해서 :visited 상태가 되면 아래와 같이 보이는 것이 의도한 결과입니다. (IE 6 ~ 9beta), (FF 3.x) 에서 아래와 같이 보임을 확인했습니다. IE9도 아래와 같이 보였습니다.

css 의도한 결과

css 의도한 결과

하지만 webkit 기반의 chrome, safari 두개의 브라우저, 그리고 FF 4.0 beta 에서는 아래와 같이 보입니다.

webkit등 새버젼의 브라우저 테스트

Chrome, Safari, FF 4.0

정말 color 만 빨강으로 바뀌고, 다른 부분은 적용 되지 않습니다. background-image, background-color 모두 적용되지 않습니다.

hi8ar_blog_rp

최근글 목록

사실, 지금 보시고 있는 제 블로그 왼편 사이드바 최근글 목록(Recent post)에도 a:visited 일때 background-image(checkmark) 가 적용되도록 되어 있습니다. a:visited 에 배경이미지를 적용해서 사용자가 이미 방문한 글임을 표시하는 트릭(?)... 음 기술(?)은 꽤나 일반적으로 사용하는 방법이 아니었던가요? ^^;; Chrome, Safari, FF 4.0 으로 보고 계시다면 아무리 클릭해서 visited 상태로 만들어도 배경이미지가 나타나지 않는것을 확인하실 수 있습니다....;;;;;;

맥에서도 결과는 같았습니다. :) 웹킷계열은 이미 적용되지 않고 있었습니다. ( 한가지 특이한 점은 아이폰에 들어가 있는 모바일 사파리에서는 아직 그렇지 않았습니다 )

아무튼 뭐... 흥미진진하군요... :p 위 내용과 관련된 정보를 알고 계시거나, 혹시 제가 잘못 알고 있는 사항이 있다면 알려주시면 감사하겠습니다!

역시나 읽지는 않을거지만 링크기록...

 

CSS 만으로 이미지에 테두리 넣기.

sample1

CSS(스타일시트)에서 img 에 border 속성만 몇줄 적어주는 것으로 , 사진 따위의 이미지에 적당한 테두리를 두를 수 있다. 워드프레스(Wordpress) 스킨 따위에는 흔히 포함되어 있는 트릭! 태터툴즈(Tattertools) 스킨에는 tiskin의 스킨 말고는 아마 없을걸?

다만, 그냥 전체 img에 적용해 버리면, 모든 이미지가 위와 같은 테두리 border를 갖게 되므로 곤란하다. 이를 해결하기 위해서...
.entry img { } 에만 적용하거나, (이렇게 하면 본문 영역에 들어간 모든 이미지에 테두리가 생겨 버린다. 본문영역에 이미지가 사용된 스킨의 경우 곤란할수 있다.) 사실 이건 1UP님의 스킨을 열어보고 안 건데, 1UP님은 .imageblock img { } 에만 적용되도록 넣으셨더라~ 태터툴즈 이미지 업로드 버튼으로 본문에 넣으면 좌,우,센터의 위치를 지정하기 위한 .imageblock 클래스가 들어갈 테니까. 다만 이 경우 FREE 라고 써진 버튼으로 넣을 경우에는 테두리가 생기지 않는다.

Stylesheet ..



아무튼 이미지의 border를 넣고 나면 그 여백과 border의 크기가 더해져 이미지가 차지하는 공간이 결과적으로 커져버린다. 스킨의 '본문 가로 크기'와 '스킨 index.xml에서 지정한 본문 가로크기'(이미지 리사이즈 크기)가 동일하다면, 이미지가 본문의 크기를 넘어 버리게 되는 것. 때문에 여백과 border의 크기를 계산하여 본문의 가로 크기를 늘려주어야 한다. 혹은 'index.xml 의 본문 크기'를 여백과 border를 포함하는 크기가 되도록 줄여주는 방법이 있을 수 있다.(다만 이 경우에는 앞으로의 글들에는 유효하나, 예전에 작성한 글에서는 효과가 없다.)
물론 스킨 자체에 overflow:hidden 따위의 속성이 포함되어 있는 경우, 10~15px 정도 이미지 크기가 늘어난다고 해서 스킨 전체가 틀어져 버리거나 하진 않는다.

몇 가지 더 문제 될 수 있는 경우가 있을 수 있는데,

sample2

예제2


이미지의 배경과 본문의 배경이 일치해야 더 보기 좋은... 이런 이미지의 경우가 그렇다. ㅡ,.ㅡ


포스팅 할때마다 조금 귀찮긴 하겠지만, 스타일 시트에 적당한 이름의 클래스로 넣어 두고, 태터툴즈 에디터 html 모드에서 완전 수동으로 class 를 추가해 주면, 원하는 이미지에만 테두리를 넣을 수도 있다.

sample3

Stylesheet ...



차라리 간단한 사진 편집기, 혹은 포토샵으로 사진 테두리를 만드는게 편할지도.... ㅡ,.ㅡ'