Moon의 개발 일기

※ 해당 포스트는 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효과 - 다양한 도형으로 폭발하는 것 같은 효과 넣어주기

※ 해당 포스트는 http://100dayscss.com/의 98번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.

※ 무단 스크랩은 허용하지 않습니다.

※ 

다양한 도형을 이용하여 뭔가 중심에서부터 폭발하는 것 같이 보이는 애니메이션을 꾸며볼까 합니다. 

바로 시작할까요? 준비물부터 챙겨보겠습니다.

- 삼각형, 사각형 및 다채로운 도형

- 애니메이션 활용 방법 : 애니메이션에 대해 모르시면 잠시 들렀다 오세요.

- position 활용 방법 : position에 대해 모르시면 잠시 들렀다 오세요.

- transform에 대한 이해 : transform에 대해 모르시면 잠시 들렀다 오세요.

먼저, 기본적인 레이아웃 구성에 삼각형을 그려보겠습니다.

See the Pen aWeYpV by Munkyu Yang (@moonformeli) on CodePen.

지금 현재로써는 밑바탕이 되어줄 #wrapper div와 나머지 .clip div들에 대한 레이아웃만 설정되어 있는 상태입니다.  이 사각형들을 전부 삼각형으로 바꾸어준 후에 position을 이용해 적절히 배치를 해보겠습니다. 우선, 삼각형, 오각형, 육각형 등 사각형이 아닌 다른 특수한 도형을 그릴 때는 clip-path라는 것을 이용해야 합니다. clip-path는 좌표 값을 찍어 그 점들을 모두 잇고, 점과 점 사이로 연결된 선의 안쪽 영역을 도형의 모양이라고 간주합니다. 즉, 삼각형을 그리려면 좌표 3개가 필요하고, 이 3개의 좌표는 자동으로 이어지며 그렇게 생긴 선들의 안쪽 영역(삼각형 내부)이 화면으로 보여지게 될 영역이라고 간주되는 것입니다.

아래의 사이트는 clip-path에 대해 가장 보기 쉽고 좋게 구현된 사이트입니다.

http://bennettfeely.com/clippy/

방법은 아~주 간단합니다. 그저, 복사 후 붙여넣기 입니다.

약간의 position을 주어 모양을 갖춰보겠습니다.

See the Pen RVXMYz by Munkyu Yang (@moonformeli) on CodePen.

방금 바로 위에서 설명한대로, 사이트에 접속해 원하는 도형을 선택 후에 나온 코드를 그대로 복사 후 붙여넣기 하였습니다. 코드에 표현된 %는, 예를 들어 100% 50%라면, 해당 좌표는 x축으로 100%만큼, y축으로 50%만큼 이동했다는 뜻입니다. %의 범위는 현재 작업중인 태그의 크기입니다. 즉 100px의 div로 작업을 한다면 100%면 100px, 50%면 50px이 되겠죠.

이제 우리는 어떻게 삼각형을 그리는지 알았습니다. 이제는 여러가지 다채로운 도형들을 넣어보겠습니다. 제 코드를 보고 연습하시게 될 경우에는 이런 저런 다른 도형들도 커스터마이징해서 넣어보세요.

See the Pen XRvEwq by Munkyu Yang (@moonformeli) on CodePen.

겉보기에는 다를 것 없어보이나요?  코드를 먼저 살펴보겠습니다.

.clip에 설정된 z-index를 봐주세요.  z-index는 같은 영역에 2개 이상의 요소들이 위치할 때, 어떤 것부터 먼저 보여줄지를 결정하는 속성입니다. z-index가 높을수록 우선순위가 높아집니다.

다음으로는,  새롭게 추가된 도형 클래스를 살펴보겠습니다. 먼저 예를 들어, .circle-1 클래스에는 .circle이, .close-1 클래스에는 .close 라는 식의 클래스가 모든 도형들마다 설정이 되어있습니다. 당장에는 필요없는 작업이지만, 이것은 만약의 상황에서, 같은 도형이 더 추가가 될 경우, 클래스 재사용을 위해 넣어둔 것입니다. 이렇게하면 나중에 삼각형을 10개를 그린다고 가정할 때 하나하나 일일히 속성을 부여해주지 않아도 되는 것이죠.

그리고 한 가지 더 궁금해하실 법 한 것은 바로 clip-path를 사용해 만든 도형의 border를 어떻게 적용하냐의 문제입니다. 이러한 것은 딱히 방법은 없습니다. 단지, 새롭게 같은 모양의 도형을 그 위에 하나 더 그리고, 크기를 약간 작게하면 뒤에 가려진 도형이 조금 노출이 되겠죠? 마치 테두리가 입혀진 것처럼요. 이러한 것은 현재 우리가 다루고 있는 예제에서는 코드의 양만 늘릴 뿐이라 생각되어 추가하지는 않았습니다. 관심있으신 분들은 따로 시도해보세요.

자세한 내용은 https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style 에서 참고하실 수 있습니다.

위의 사진은 .clip이 z-index 속성을 갖지 않았을 때 나타나는 모습입니다. 왜 z-index를 설정해주어야 하는지 이제 이해하시나요?

자, 이제 얼마 남지 않았습니다. 드디어 기다리던 애니메이션을 넣어줄 시간이 왔습니다. 그 전에, 이 이야기를 먼저 다뤄보도록 하죠. 우리는 여기서 우주의 빅뱅처럼, 가운데에서 사방으로 흩뿌려지듯이 퍼졌다가 다시 모아지는 애니메이션을 다루고 싶습니다. 그런데, 퍼졌다가 돌아올 때의 약간의 시간차를 느끼게 해주고 싶어요. 무슨 말인가하면, 

위의 사진은 어떤 물체가 포물선 낙하운동을 하고 있을 때의 곡선입니다. 물체가 올라갈 때와 낙하할 때는 속도가 빨라졌다가 느려지거나 혹은 느려졌다가 빨라지는 운동을 하죠. 그러나 곡선의 최정점에서는 물체는 느린운동을 합니다. 마치 일순간 정지해 있는 것과 같은 착시를 불러일으키죠. 우리는 여기서 그러한 효과를 만들어보겠습니다.

animation의 animation-timing-function에는 animation의 진행속도를 설정할 수 있는데, 우리는 여기서 cubic-bezier라는 것에 집중을 해보겠습니다. cubic-bezier는 사용자가 임의의 운동 그래프를 커스터마이징할 수 있는 기능을 제공해주는데, 해당 링크로 들어가시면 직접 곡선을 그려볼 수 있는 화면이 나옵니다. 

https://dbaron.org/css/timing-function-graphs

animation은 이번에는 @keyframes를 이용해 구현하도록 하겠습니다. @keyframes는 설정하고자 하는 animation이 2개 이상이거나 단일 animation에서 여러가지 효과를 구간별로 다양하게 설정하고 싶을 때 유용하게 사용될 수 있습니다.

See the Pen zwgaqx by Munkyu Yang (@moonformeli) on CodePen.

이제 거의 다 왔습니다. cubic-bezier효과를 사용하니 정점에서 마치 거의 멈춘 것 처럼 느리게 움직이는 걸 보실 수 있을겁니다. 이처럼 cubic-bezier는 매우 유용하게, 또 흔하게 사용되는 효과이니 기억해두시면 좋겠네요.

이제 남은 작업은 단 하나입니다. 각 도형을 적절히 움직이게끔 위치를 설정해주는 일만 남았습니다. 여기서 한 가지 더 추가하자면, 생동감을 넣어주기 위해 도형에 rotateZ 속성을 넣어주겠습니다. roateX는 X축을 기준으로, rotateY는 Y축을 기준으로 이미지를 상하 혹은 좌우 반전을 시키지만 rotateZ는 시계/반시계 방향으로 이미지를 돌릴 때 사용하는 속성입니다.

See the Pen oWrVwQ by Munkyu Yang (@moonformeli) on CodePen.

이로써 이번 예제에 대한 설명은 모두 끝났습니다.

항상 생각하지만 저의 부족한 설명이 글을 여기까지 읽어주신 분들에게 얼마나 도움을 드렸을지 모르겠습니다. 도움이 되셨길 바라며, 궁금하신 점 있으시면 언제든지 댓글 달아주시면 답변 드리겠습니다.

이번에는 CSS를 이용한 슬라이딩 효과를 넣어보도록 하겠습니다. 슬라이딩 효과는 다양한 곳에서 다채롭게 사용이 가능한 유용한 기능이므로 잘 참고하시면 좋을 것 같네요.

설명을 읽기 전에,

jQuery에 선택자에 대해 모르시면 잠시 들렀다 오세요.

- jQuery selector

CSS 트랜지션, 트랜스폼에 대해 모르시면 잠시 들렀다 오세요.

- CSS3 Transform

- CSS3 Transition

우선 기본적인 밑바탕 작업을 하도록 합니다.

See the Pen bWJZXL by Munkyu Yang (@moonformeli) on CodePen.

가장 상단의 #wrapper에 대한 기본적인 레이아웃을 만들어주었습니다. 작업은 400px · 400px에서 진행하려고 합니다. 그리고 #wrapper의 자식으로 #cover-img가 있는데, 이 것은 최초에 보여줄 화면을 나타내는 div입니다. position 속성을 주어서 부모인 #wrapper의 위치와 겹쳐지게끔 만들어 주시면 됩니다.

See the Pen gWyqmy by Munkyu Yang (@moonformeli) on CodePen.

#slide-img div는 뒤에 가려져 있다가 마우스가 hover되는 순간에 나타나도록 설정할 영역입니다. 우선은 위치와 크기를 똑같이 설정해줘야 하겠죠.

여기서부터 이해가 중요합니다. 그 다음에는, #slide-img 안에 8개의 div를 그려넣도록 하겠습니다. 그리고 각각의 div는 폭이 50px, 높이가 400px이 되도록 설정을하고, 각각의 영역에 맞게 이미지를 나누어서 갖는 형태가 되도록 해보겠습니다. 즉, 이러한 형태가 되도록 만들어보는 겁니다.

원래의 이미지가 있다면, 우리가 원하는 형태는 위의 그림과 같습니다. 8개로 나누어진 div는 각 영역에 맞게끔 이미지를 잘라서 가지고 있고, 순번에 따라 번갈아가면서 위, 아래로 배치되어 대기 상태로 있게끔 하고 싶습니다. 

See the Pen LyvvEG by Munkyu Yang (@moonformeli) on CodePen.

그런데 뭔가가 좀 이상하죠? 발견하셨나요? 맞습니다. 우리의 머릿속에서는 이미지가 8개의 div에 의해 영역별로 찢어지듯이 영역이 분리되는 것을 원했는데, 막상 실천해보고 결과를 보니 모두 같은 부분만 표시가 되고 있습니다. 이럴 때 어떻게 해야할까요?

만약 우리가 background-image의 시작 위치점을 마음대로 변경할 수 있다면 이야기가 달라질까요? 이렇게 말입니다.

이런식으로 배경의 시작위치를 지정하는 방법은, 다음과 같습니다.

background-position은 첫 번째 인수로 x좌표, 두 번째 인수로 y좌표를 넘겨받습니다. 이렇게하면, 고정된 위치에 있는 div에 어떤식으로 이미지를 보여줄지를 결정할 수 있습니다. 해당 내용을 바탕으로 코드를 업데이트 해보겠습니다.

See the Pen XRwWRP by Munkyu Yang (@moonformeli) on CodePen.

설정된 background-position의 x좌표가 음수(-) 값임에 주의하세요. 우리가 이해하는 프로세스의 진행은 마치 하나의 이미지를 8개의 div가 영역별로 나눠갖는 것처럼 생각되지만, 실제로는 8개의 div가 모두 배경 이미지를 각각 가지고 있습니다. 기억이 나지 않으신다면 .slide에 설정된 내용을 확인하세요. 그렇기때문에, .slide-2부터 .slide-8은 시작위치가 점점 옆으로 옮겨지고 있습니다. 그 말은 다시 말해서 각 div에 설정된 배경이미지 또한 시작점이 옆으로 계속 밀린다는거죠. 결국에는 이미지가 계속해서 옆으로 8개만큼 겹치는 형태입니다. 그러나 겹치지 않는 이유는, 우리가 div의 넓이와 높이를 직접 설정해주어 겹치지 않게 해주었기 때문이겠죠. 이해하시나요?

그래서 예로 들어 .slide-2를 보자면, div의 시작위치는 top:40px 만큼, left:50px만큼입니다. 여기서 background-position을 50px만큼 양의 값으로 설정해버리면 이미지가 오른쪽으로 이동할까요, 아니면 왼쪽으로 이동할까요? 바로 오른쪽으로 이동합니다. 그러면 이미지의 시작지점이 오른쪽으로 밀리게되면 그 밀리는 만큼의 공간에는 어떤 것으로 채워지게 될까요? 직접 실행해보시는 것을 추천드립니다.

우리는 여기서 이미지가 분할되는 현상을 구현하고 싶은 것이기 때문에 background-position:-50px로 음의 값을 설정해주어 배경이미지를 왼쪽으로 이동시킬 필요가 있습니다. 그렇게하면 이미지가 어디서부터 보여질 것인지(-50px 지점부터) 제대로 설정할 수 있는거죠. 

이제부터는 애니메이션을 설정해보겠습니다. 애니메이션은 jQuery를 사용하면 아주 간단하게 해결되는 문제이므로 한 번에 구현해보도록 하겠습니다.

See the Pen wdbvPJ by Munkyu Yang (@moonformeli) on CodePen.

먼저, 주석으로 감춰놓았던 #cover-img를 다시 불러와봅시다. 그러면 어떻게 되나요, 이미지가 두개가 겹쳐버리게 되죠? 이럴 때 사용하는 것이 z-index 기능입니다. z-index는 마치 x,y에 이은 3차 z축이 있다고 가정할 때,  z축의 어디에 이미지를 위치시킬 것인지를 결정짓는 것과 같습니다.

그림과 같이 default의 값은 0입니다. 건물의 층의 높이와도 비유될 수 있겠습니다. #cover-img는 #slide-img보다 먼저 보여야하니까(위에 놓여야하니까) z-index의 값이 높게 설정이 되어야합니다. z-index의 값을 어떻게, 얼마나 크게 줘야하는지는 개발자의 마음입니다. 그러나, 향후의 어플리케이션의 규모가 확대될 수 있음을 감안해 충분히 쓰지 않는 건물의 층들을 만들어놓으면(z-index) 세입자가 들어왔을 때(클래스 혹은 아이디를 갖는 Html 태그) 들어갈 층이 없어서(z-index) 다시 재 작업을 할 수고를 덜 수는 있습니다.

그리고 추가된 부분을 보자면, jQuery를 이용해 #cover-img에 마우스가 올라갔을 때 각각의 클래스를 부여합니다. 그리고 #cover-img와 .slide에서는 transition 속성을 부여했습니다. 여기서(부모단에서) 속성을 부여하지 않고 직접 변화를 일으키는 곳에서(자식단에서) transition을 사용하게되면 어떤일이 발생하냐면, 예를 들어 hover의 경우라고 가정한다면, 마우스가 올라갈 때는 애니메이션이 잘 작동할지 몰라도 마우스가 영역 밖으로 나가는 순간 애니메이션이 종료되어 처음 상태 그대로 바로 돌아갑니다. 즉, reverse-animation 효과가 발생하지 않게 되는것입니다. 이 것은 애니메이션을 부여하실 때 꼭 고려해야 할 부분이므로 기억해두시면 좋습니다.

마지막으로 이것은 별 것은 아니지만, jQuery 부분에서 ES6에 새롭게 추가된 arrow function 기능을 사용했습니다. arrow function: () => {} 의 기능을 사용하려면 아직까지는 babel이라는 라이브러리가 필요한데, babel은 ES6를 ES5로 변환해주는 라이브러리입니다.

도움이 되셨다면 공감 한 번씩 눌러주시면 감사하겠습니다.

질문 및 기타 격려의 댓글은 언제든지 환영입니다.^^