[구현 일기] 1. div 클릭 이벤트, 상상을 현실로!

요즘 코딩에 대한 자신감이 붙으면서 이것 저것 

만들어보고 싶은 것들을 시도 중이다..!

아직 드라마틱한 기능을 구현할 수는 없지만 내가 아는 선에서 재밌는 것들을 구현해보는 연습을 하고 있다.

 

 

과연 내 상상력이 현실이 될까?!

 

 

내가 구현하고자 하는 것은 배경이 깔려있고, 그 위에 사각형 여러개를 배치하여 

마우스 호버 시에 그림이 보이도록 하는 것이다. 

이후에 호버해서 그림이 다 보이게 되면 마우스에 랜덤의 이미지가 생기게 되는 것 까지 구현해보고자 한다.

 

호버 시에는 뒤에 있는 그림이 보이게 된다.

 

이미지가 다 보여졌을 때의 마우스 이벤트

랜덤한 이미지로 할 지, 해당 그림 이미지로 할 지는 아직 미정이다.

 

 

 

처음엔 이미지를 배경으로 깔고 그 위에 div 박스들을 올리는 방법으로

z-index를 생각해 보았지만, 

해당 방법으로는 구현되지 않았다..

(왜 안되지?...) 

 

 

html 코드

<img src="/실습/img//origami2.jpg" alt="" class="in-img">

이미지를 div 안에 한번 감싸주었었는데 코드 줄이려고 안감싸고 

이미지 자체에 이미지 크기를 설정가능하도록 display: inline-block 속성으로 넣어주었다.

(이미 알고 계시겠지만 원래 이미지 태그는 인라인 태그라 스스로 크기 조정을 못한다.)

 

Css 코드

.in-img{
        display: inline-block;
        position: absolute;
        width:100%;
        height:100%;
        z-index: -100;
    }

 

혹시나 하는 마음에 배경 이미지 position을 absolute 속성으로 해주고,

z-index: -100 정도 설정해주었더니

배경 처럼 div 박스 뒤에 깔리게 되었다..!

두가지 속성 모두 필요하다!

 

 

 

클릭 이벤트 설정은 다음 시간에..