 |  |
이번에는 CSS를 이용한 슬라이딩 효과를 넣어보도록 하겠습니다. 슬라이딩 효과는 다양한 곳에서 다채롭게 사용이 가능한 유용한 기능이므로 잘 참고하시면 좋을 것 같네요.
설명을 읽기 전에,
jQuery에 선택자에 대해 모르시면 잠시 들렀다 오세요.
CSS 트랜지션, 트랜스폼에 대해 모르시면 잠시 들렀다 오세요.
우선 기본적인 밑바탕 작업을 하도록 합니다.
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로 변환해주는 라이브러리입니다.
도움이 되셨다면 공감 한 번씩 눌러주시면 감사하겠습니다.
질문 및 기타 격려의 댓글은 언제든지 환영입니다.^^
'Web Tech > CSS' 카테고리의 다른 글
| CSS효과 - 원(Circle)으로 나타났다 사라졌다 효과 구현하기 (0) | 2018.08.06 |
|---|---|
| CSS효과 - 이미지 마우스오버(hover) 효과 넣어주기 (3) | 2017.06.02 |
| CSS효과 - 다양한 도형으로 폭발하는 것 같은 효과 넣어주기 (0) | 2017.06.01 |
| CSS - 햄버거 버튼 만들기 (4) | 2017.05.21 |
| CSS를 활용한 다양한 효과를 어떻게 만드는지 설명하려고합니다 (0) | 2017.05.19 |