이미지확대,bootstrap은 사용자가 많으면서 쉽다는 것을 느꼈다.

마우스 커서를 이미지 위로 가져가면 이미지가 확대되는 아래 효과를 만들면서 부트스트랩은 쉬우면서 사용자가 많다는 것을 다시 느꼈습니다. 왜냐하면 아래와 같은 효과를 위해 CSS의 scale를 할 것 같아 CSS와 scale 검색어로 해결하지 못했습니다. 그런데 제가 이 블로그 스킨을 부트스트랩을 사용하니 혹시나 하며 bootstrap으로 검색했더니 한 번에 해결했습니다. 이제 소스를 검색할 때 bootstrap이라는 검색어를 넣어야겠다는 생각을 했습니다. 참고로 사용한 검색 엔진은 구글입니다. 그리고 bootstrap은 한글로 부트스트랩입니다.   

그건 그렇고 아래와 같은 효과를 위해서는 여기에(영어) 나오는 소스를 보듯이 class="img-wrapper"로 감싼 후 이미지에 class="img-responsive"만 주면 된다는 것을 알았습니다. 그런 후 CSS를 삽입하면 끝나는 작업입니다. 

바로 위에 사용한 HTML인 경우는 아래와 같습니다. 티스토리에 사용한 HTML입니다. img-responsive는 부트스트랩 CSS의 이미지를 보면 max-width: 100%;, height: auto; display: block;라고 정의합니다. img-responsive는 부트스트랩에서 이미지를 반응형으로 하기 위해 부트스트랩 CSS로 이미 정의한 것입니다. 즉 부트스트랩이 아니라면 img-responsive가 필요 없다는 말입니다. 만약 부트스트랩에서 이미지를 반응형으로 하고 싶다면 이미지에 class="img-responsive"를 추가하면 됩니다. 

<div class="img-wrapper">

      <img src="https://t1.daumcdn.net/cfile/tistory/2672EC35568C72F62D" class="img-responsive">

</div>

아래는 위 이미지에 사용한 CSS 입니다. 부트스트랩을 사용하지 않는다면 img-responsive를 정의해주면 사용할 수 있을 것 같아 해보니 되더라고요. img-reponsive의 CSS는 위에 있습니다. 그리고 아래 CSS 소스에서 빨간색 숫자는 확대되는 이미지 크기를 말하며 녹색은 트랜지션 시간으로 이미지가 커지는 시간으로 0.5초입니다. 참고로 이 블로그 티에디션이 있는 처음은 0.5초, 1.2 크기로 설정했습니다.  

<style>

.img-wrapper {

    display: inline-block;

    overflow: hidden;

}

.img-wrapper img {

    -webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -ms-transition: all .5s ease;

    -o-transition: all .5s ease;

    transition: all .5s ease;

    vertical-align: middle;

}

.img-wrapper img:hover {

    transform:scale(1.5);

    -ms-transform:scale(1.5); /* IE 9 */

    -moz-transform:scale(1.5); /* Firefox */

    -webkit-transform:scale(1.5); /* Safari and Chrome */

    -o-transform:scale(1.5); /* Opera */

}

</style>

알아둘 것은 위는 CSS3의 이미지 확대와 트랜지션 속성을 사용해서 익스플로러 9 이하에서는 안됩니다. 이 블로그에 설치한 구글 애널리틱스를 보면 익스플로러 7,8 사용자가 많은데 그 분에게는 안 보이는 것이 많습니다. 아래 더보기 안에 삽입한 이 블로그 접속자의 익스플로러 버전을 보면 11 사용자가 가장 많네요. 익스플로러의 경우 10 이상에서 이미지 확대와 트랜지션을 지원합니다. CSS 1,2와 달리 CSS 3의 경우는 익스플로러 10 이상 되는 것이 많습니다. 

여담으로 티스토리 글에서는 <style>...</style>을 사용할 수 있습니다. 그러니 위와 같이 사용했습니다. 위와 같이 사용했다고 네이버나 다음 블로그 등에서 사용하면 안됩니다. 그러면 개고생 합니다.