롤오버실험,이미지 안쪽테두리와 CSS3 트랜지션(Transition)

삼성투모로우 블로그(티스토리)를 보고서 롤오버하면 이미지안에 테두리가 생기도록 해 보았다. 그래서 여기에서 소스를 얻어 마우스를 이미지에 가져가면 바같쪽이 아닌 안쪽에 테두리가 생기게 했다. 그런데 삼성투모로우 블로그에 어떻게 했는지 모르겠다.그래서 대강 흉내내기 위해 여기의 소스를 보고 CSS3의 transition(트랜지션)을 이용했다. 그런데 이 효과가 모바일 페이지와 PC 페이지에서 다르게 나온다. 모바일 페이지에서 보니 오른쪽 공간이 생긴다. 무엇이 문제인지 모르겠고, 알면 댓글 부탁한다. 그리고 transition의 시작과 마지막색의 일치하지 않는데 색변화를 조절할 수 있는지 알아봐야겠다. 이것에 대해서도 알면 댓글 부탁한다.

<style type="text/css">

.example-one a                            {    border: 0; overflow: hidden; float: left; }

        .example-one a:hover                    {    border: 3px solid #e5e5e5;

                                                              -webkit-transition: border-color 0.3s ease;

                                                              -moz-transition: border-color 0.3s ease;

                                                              -o-transition: border-color 0.3s ease;

                                                              -ms-transition: border-color 0.3s ease;

                                                               transition: border-color 0.3s ease;

}

         .example-one a:hover img                 {  margin: -3px; }

</style>

CSS3의 트랜지션인 경우는 위 코드에서 파란색 글자처럼 했다. CSS3의 트랜지션 속성에 대해 많이 알아봐야 겠다. 참고로 익스플로러(IE)9의 경우는 CSS3의 trasition(트랜지션)속성을 지원하지 않는다. 이 블로그 상단에 있는 메뉴중 공지는 트랜지션(transiton)을 이용했는데 익스플로러8에서는 트랜지션이 나오지 않는다. 익스플로러는 항상 골치아프다.  

CSS3 속성	Transition
익스플로러(IE) 6,7,8,9	×

오해말 것은 이 글을 쓰는 시점을 기준으로 최신 버전인 익스플로러10은 css3의 transition을 지원한다. 익스플로러라고 모든 것이 나쁜 것이 아니다. 일반적으로 익스플로러는 무조건 나쁘다고 생각한다. 많은 사람이 익스플로러를 업데이트하지 않고 윈도우 운영체제의 기본 브라우저를 기본으로 사용하고 있기 때문이다. 아래는 윈도우 운영체제의 기본 브라우저이다.

• 윈도우XP - 익스플로러6 (많은 사람이 사용하고 익스플로러8까지만 설치할 있고 9나 10은 설치할 수 없다.)
• 윈도우Vista - 익스플로러7
• 윈도우7 - 익스플로러8
• 익스플로러8 - 익스플로러10 (수정 날짜를 기준으로 최신 버전)

1.  IE(익스플로러)6~9까지 CSS3의 Transition(트랜지션) 속성을 지원하지 않는다. jQuery를 사용할 때 어떤 jQuery를 이상하게 보일 것이다. 예로 이 블로그 상단 메뉴에 있는 공지의 트랜지션은 익스플로러9에서 나오지 않는다.
2. 이미지 바깥쪽이 아닌 안쪽에도 테두리를 만들 수 있다. 위 이미지 두 번째는 바깥쪽 검은색 테두리가 롤오보하면 안 보이는 것을 보면 이미지 안쪽에 테두리가 생겼다고 할 수 있다.