※ 해당 포스트는 http://100dayscss.com/의 13번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.
※ 무단 스크랩은 허용하지 않습니다.
※
 |  |
이번에는 이미지에 대한 마우스오버 효과를 만들어보겠습니다. 마우스오버는 다양한 곳에서 아주 유용하게 사용될 수 있습니다. 그리고 마우스오버를 만들어내는 방법은 다양하게 있으므로, 제 포스팅에서 소개하는 방법이 유일한 정답은 아님을 생각하시면서 읽어주시면 되겠습니다.
그러면 우선 배경 바탕부터 만들어 볼까요?
See the Pen WOeyVW by Munkyu Yang (@moonformeli) on CodePen.
저의 블로그에서는 항상 맨 밑 바탕이 되는 div는 #wrapper로 지정합니다. 만약 제 블로그를 꾸준히 구독해주신다면, 이런 부분에서는 제 코드를 받아들이시는데 시간이 덜 걸리지 않을까 하네요.
우선 #wrapper는 오늘도 밑거름(?)이 되어주어야하기 때문에 width:500px; height:500px; 으로 설정해줍니다. 그 위에 갤러리같은 느낌을 주기 위해 #frame에서는 배경을 흰색으로하고, position을 이용해 적절히 위치를 이동시켜줍니다. 그리고 저는 항상 box-shadow를 이용해 그림자효과를 아주 살짝만 넣어주는데, 이렇게하면 하지 않았을 때와 차이가 은근히 많이 납니다. 막상 보면 티는 많이 나진 않지만 그래도 좀 더 현실감을 부여해줄 수 있죠.
그 다음으로 해야할 일은, 사진의 크기와 위치를 조절해주는 일입니다. 이미지는 인터넷에서 임의로 가져온거에요.
See the Pen PjYBbX by Munkyu Yang (@moonformeli) on CodePen.
추가된 부분을 봐주세요. 이미지를 담고 있는 .img-wrapper에 먼저 width와 height를 195px로 지정해주었고, 그 안에 있는 이미지 태그에서는 inherit으로 그대로 물려받도록 했습니다. 즉 195px로 똑같이 설정을 해주었다는 거죠.
이미지태그로 어떤 이미지를 넣어 레이아웃을 꾸밀 때, 그 이미지를 담고 있는 상위 태그의 영역과의 관계를 잘 고려하시는게 좋다고 생각합니다. 무슨 말인가하면, .img-wrapper에 대한 width와 height를 설정하지 않은채로 바로
를 적용하게되면 어떻게 될까요?
그러면 이미지와 그 부모 태그와의 영역이 어긋나게 되버립니다. 그림을 참고해보세요.
 |  |
이제 그림을 보시면, 부모에서 영역을 지정해 자식이 물려받지 않게된다면, 오른쪽의 그림처럼 영역이 어긋나버리게됩니다. 그렇지만 눈에 보이는 레이아웃은 크게 망가지진 않습니다. 왜냐하면 현재는 다른 태그들과의 영역 겹침 문제가 발생하지 않기 때문인데요, 이 경우에는 영역을 넘어가버린 부분에 대해서 나중에 추가적으로 레이아웃의 배치를 다시 맞춰줘야 할 수도 있습니다.
그래서 부모인 .img-wrapper에서 영역을 조절해주고, 자식도 같은 영역을 갖도록해 마치 하나인것처럼 보이게 해주었습니다. 이렇게하면 적어도 영역이 넘치는 overflow에 대해 걱정할 필요는 없어진 셈이죠.
그 다음에는 역시 position을 이용한 이미지의 재배치만 남았습니다.
이번에는, 이미지에 마우스를 올렸을 때 보여줄 버튼을 작성해보겠습니다.
See the Pen bRbjZd by Munkyu Yang (@moonformeli) on CodePen.
HTML에 새롭게 .darkness, .btn-plus라는 div를 모든 .img-wrapper들의 자식으로 넣어주었습니다. 그 다음에는 CSS속성을 이용해서 색상이나 위치를 조절하는데요. 여기서 주목해서 보실 것은, 제가 바로 이전에 .img-wrapper에다가 position:absolute를 설정해주었습니다. 그리고 나서 위치를 이동시켰죠. 기억나시나요?
부모의 position 속성이 absolute, relative일 경우에 자식의 position이 absolute면 부모 요소의 맨 좌측 상단이 시작 기준점으로 적용됩니다.
그렇기때문에 .darkness의 position이 absolute로 설정되었을 때 부모의 좌측상단부터 적용되어 시작할 수 있었던 겁니다. 이렇게하지 않으면 무엇이 다르게 나타날까요?
잘 보이시나요? 바로 .img-wrapper와 #frame사이에 존재하는 저 얉은 흰색 영역, 저 부분을 .darkness가 가리게됩니다. 왜냐하면, .img-wrapper가 position:absolute를 갖고있지 않다면, .darkness의 position이 설정이 되었을 때 시작기준점을 누구에 맞추려고할까요? .img-wrapper가 아니라 바로 #frame입니다. 왜냐면 #frame이 position:relative를 갖고 있기 때문이죠. 만약에 #frame도 아무런 설정이 없다면 그 위의 부모로 다시 올라가서 찾겠죠. 결국 아무도 갖고 있지 않으면 윈도우창의 맨 좌측상단이 시작 기준점으로 설정이 되는 원리입니다. 너무나도 중요한 이야기이니 반드시 이해하고 넘어가세요.
그리고 .btn-plus는 원으로 만들어줄 것이기 때문에 radius속성을 이용을 했구요. span에서는 HTML단에서 + 라는 문자를 텍스트로 넣어주었습니다. 다시 말해서 이 텍스트가 마우스로 드래그되서 선택될 수 있다는건데 이건 상당히 거슬리지 않을 수 없죠. 그래서 마우스로 드래그를 하지 못하도록 하는 설정이 바로 user-select:none 입니다.
이제 여기까지 무리없이 잘 오셨다면, 남은 부분은 쉽게 넘어갈 수 있습니다. 마우스오버 효과만 넣어주면 마무리가 될 것 같네요. 여기서는 opacity와 scale만을 가지고 효과를 간단히 넣어보겠습니다.
See the Pen zzOJYR by Munkyu Yang (@moonformeli) on CodePen.
.img-wrapper에 hover효과가 올라가게되면 .darkness에는 어두운 느낌을, .btn-plus에는 서서히 나타나는 효과를 넣어주었습니다. 주의해서 보셔야할 점은, hover에 대한 효과를 생각을 할 때, 마우스가 올라가는 것 뿐만이 아니라 마우스가 영역 밖으로 나갈 때의 효과까지도 같이 고려해야 한다는 점입니다.
마우스가 올라갔을 때는 :hover로 설정하면 그만이지만, 마우스가 밖으로 나가버리면 효과는 어떻게될까요? 바로 없어져버리게되죠. 이는 상당한 이질감을 느끼게합니다. 그래서 반대로 효과가 reverse하게 보이게하려면, 그에 맞는 시간에 대한 값과 기타 디폴트값을 애니메이션 효과를 주고싶은 요소에다가 넣어놓아야합니다. 예로 .btn-plus에 추가된 기본 속성 값들을 참고해보세요.
이로써 이번 마우스효과에 대한 포스팅도 끝났습니다.
도움이 되셨다면 다행이네요. 댓글은 언제든지 환영입니다. 앞으로도 더 많은 효과에 대해 다룰 예정이니 많이들 와주세요^^
2019/03/12 - [Web Tech/CSS] - CSS 애니메이션 효과:: 패럴랙스(Parallax) 효과로 멋진 배경 만들기
2019/03/10 - [Web Tech/CSS] - CSS 애니메이션 효과:: 트랜지션 - 펼쳐서 보여주기 [CSS Effect]
2017/07/05 - [Web Tech/JavaScript] - jQuery를 이용한 메뉴 접었다 펼치기[더보기 기능]
2018/08/06 - [Web Tech/CSS] - CSS효과 - 원(Circle)으로 나타났다 사라졌다 효과 구현하기
2017/05/19 - [Web Tech/CSS] - CSS를 활용한 다양한 효과를 어떻게 만드는지 설명하려고합니다
2017/06/02 - [Web Tech/CSS] - CSS효과 - 이미지 마우스오버(hover) 효과 넣어주기
2017/06/01 - [Web Tech/CSS] - CSS효과 - 다양한 도형으로 폭발하는 것 같은 효과 넣어주기
'Web Tech > CSS' 카테고리의 다른 글
| CSS 애니메이션 효과:: 트랜지션 - 펼쳐서 보여주기 [CSS Effect] (0) | 2019.03.10 |
|---|---|
| CSS효과 - 원(Circle)으로 나타났다 사라졌다 효과 구현하기 (0) | 2018.08.06 |
| CSS효과 - 다양한 도형으로 폭발하는 것 같은 효과 넣어주기 (0) | 2017.06.01 |
| CSS를 이용한 슬라이딩 효과 넣기 (0) | 2017.05.27 |
| CSS - 햄버거 버튼 만들기 (4) | 2017.05.21 |