https://www.youtube.com/watch?v=1rZhnou0lEE&ab_channel=CodingArtist
마우스 호버 상태에서 이미지가 확대되는 재밌는 녀석이다.
최근에 프로젝트를 진행함에 있어 잠시 놓았던 Css를 다시 만지니 역시 재미지다.
이미지는 영상의 이미지와는 다른데, 전 시간에 언급했듯,
https://www.somanet.xyz/2017/06/blog-post_21.html
구글 드라이브를 외부 이미지 링크 저장소로 사용하기
Update 2020/6/19: 최근 구글 드라이브의 공유주소가 약간 변경되었나 봅니다. 몇몇분이 댓글로 알려주셔서 새롭게 바뀐 Prefix로 변환하도록 수정하였습니다. 다들 관심가져주셔서 감사합니다. ...
www.somanet.xyz
구글 드라이브에 이미지를 올린다음 공유를 통해 본인의 이미지를 테스트할 수 있으니 참고하길 바란다.
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shoes</title>
</head>
<body>
<div class="image"></div>
</body>
</html>
css코드
.image{
height: 500px;
width: 500px;
background : url("http://drive.google.com/uc?export=view&id=1g4LXC-sas3Cw7nkdnXcRe1ub2mPwkKNm") no-repeat center;
cursor: zoom-in;
/* background-position : center;
background-repeat: no-repeat; */
}
.image:hover {
background-size :200%;
}css background를 아래와 같이 한줄로 사용할 수도 있다.
/* background-position : center;
background-repeat: no-repeat; */
background : url(이미지주소) no-repeat center;이전 시간에는 이미지를 HTML상에서 불러왔는데, 이번에는 CSS단에서 불러오는 코드이다. 좀더 심화학습을 위해
Css background 관련 잘 정리된 포스팅을 링크해 놓을테니 함께 공부하길 바란다.
https://www.daleseo.com/css-background/
CSS 배경(background) 관련 속성
Engineering Blog by Dale Seo
www.daleseo.com
See the Pen Untitled by ektjtthsrk (@minos79) on CodePen.
신발 보니까 신발사고 싶으다....
여보얌~ 나이거 사줘~~
'GAS > [Css_손코딩]' 카테고리의 다른 글
| Background Color Changer On Click | Javascript Mini Project (0) | 2023.07.06 |
|---|---|
| [HTML] VIA.PLACEHOLDER 사용하기 (0) | 2023.07.04 |
| Apply Shadow To Clipped Elements (0) | 2023.06.20 |
| 가상클래스의 꽃(before after) (0) | 2023.06.20 |
| Stunning 3D Effect With CSS (0) | 2023.06.19 |
댓글