안녕하세요.

 

요즘 이미지는 그냥 보여주지는 않고 이미지 오버시 확대나 이벤트를 발생시켜서 생동감있는 페이지를 연출하는데요.

제일 간단하게 이미지 마우스 오버시 확대되고 마우스가 벗어나면 다시 되돌아오는 효과를 알려드리려고 합니다.

 

일단 정말 간단합니다.

 

1. html

<html>

<body>

<h1>이미지 확대 테스트 </h1>

<img class="scale" src="이미지 경로"/>

</body>

</html>

 

2. css

.scale {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.5s ease-in-out;  /* 서서히 확대 */
}
.scale:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

 

1번의 html에 이미지에 class를 추가 해주면 간단하게 서서히 확대 되었다가 축소되는 효과를 볼 수 있습니다.

 

감사합니다^^

'html' 카테고리의 다른 글

HTML 한글 깨짐 관련.  (0) 2017.07.05

안녕하세요!!


html에 한글이 깨질 경우 두 가지로 볼 수 있습니다.


브라우저 언어, html 페이지의 언어가 상의 할 경우 깨지게 됩니다.!!


제일 간단한 방법은 html tag에 charset 을 설정 하는 겁니다.


<html>

<meta charset=utf8> 요기에 넣어주세요 언어에 맞게~

<head>

</head>

<body>

</body>

</html>


utf8로 인코딩된 데이터를 euc-kr로 보여주게 되면 깨지게 되므로 meta에 charset=euckr로


반대로


ecu-kr로 인코딩된 데이터를 utf8로 보여지게 되면 깨지게 되므로 meta에 charset=utf8로 변경해주세요.


이렇게 했는데도 깨진다면, 하드코드로 박혀있는 한글이 아니라 디비에서 가져오는 거에서 깨질수가 있습니다. 그럴 경우.. 여러방법이 있지만



mysql_query("set session character_set_connection=utf8;");

mysql_query("set session character_set_results=utf8;");

mysql_query("set session character_set_client=utf8;")


요로커롬 php 에 쏘스에 넣어주시면 됩니다.


'html' 카테고리의 다른 글

이미지 마우스 오버시 확대시키기  (0) 2019.12.24

+ Recent posts

티스토리툴바