슬라이드를 넘길 때마다 화살표 버튼이 화면 밖에서 안으로 나타나는 효과와 글자가 조금씩 움직이는 효과를 추가해보았다. 기존에 radio를 응용하여 슬라이드를 만드는 것이 익숙해졌다면 추가적인 움직임을 주는 것은 크게 어렵지 않았지만 아직 미숙한 탓인지 조금 헤맸던 부분이 있어 남기고자 한다.
일단 이번에는 버튼이 고정된 위치가 아닌, 각 <li> 항목 아래에 화면과 같이 움직이는 label을 삽입해서 진행했다. 처음에 한 생각은 버튼이 좌우로 벌어져 뷰포인트를 벗어 나 있다가 checked 항목을 주면 안쪽으로 모이는 것을 하고자 했는데 버튼을 묶음으로 해둔 박스에게 position 값을 주다보니 원하는 방향대로 움직이기가 힘들어 생각대로 나와주지 않았다.
그래서 다시 처음으로 돌아와 각 버튼에 relative값을 주어 원하는 방향으로 움직이기로 했다.
처음부터 버튼을 나눴다면 더 빨리 해냈을텐데... 왼쪽과 오른쪽을 나눈 상태에서 opacity값을 준 이유는 아무리 ul화면 밖을 나갔다 한들 다른 페이지에서 넘어오는 버튼까지는 감춰줄 수 없기 때문에 불투명도 값을 주었다. 그러면 다른 페이지로 버튼이 넘어와도 해당 페이지에 checked가 되지 않는 이상 보이지 않게 된다.
단일 슬라이드라 따로 버튼에 none 값을 주거나 했던 건 없던 대신, opacity 항목을 추가하여 해당 페이지의 radio에 체크가 될 때마다 반투명한 버튼이 선명하게 보이도록 값을 지정했다. 어제와 같은 방식에서 더 쉬워졌기 때문에 따로 덧붙일 설명은 없다. 다만 position값을 줄 때 부모와 자식의 관계를 신경쓰며 부여하자.
페이지 그대로 구현하는데 성공은 했지만 구조적으로 뜯어보면 난해해서 추후에 다시 수정하기 위해 기록을 해두려고 한다. CSS로 탭기능을 쓸 때, 한 페이지마다 나타나는 박스를 만들어 none/block 값을 줄 수도 있지만 그러면 중복되는 값이 많아지고 전체적으로 난잡해져 추후 유지보수가 들어갈 경우 수정이 힘들 수 있기 때문에 다음부터는 our_box라는 클래스에 각 탭 별로 고유한 클래스 값을 따로 부여하여 그 값만 켜고 끌 수 있도록 하면 간단하다고 배웠다.
생각해보니 그게 맞는데 역시 머리가 모자라면 몸이 고생(...)을 하니까 다음부턴 꼭 참고하도록 하자...
(각 테이블에 display값이 이미 있는데 추가로 탭효과를 주니 중복이 되어버려 block값을 먹이지 못해 flex값으로 준 이유도 그래서였다, 다음부터는 클래스 값으로 none/block값을 주도록 하자!)
제자리에 고정된 버튼을 만들기 위해서는 같은 자리에 각 탭마다 이동값을 줄 수 있게 모든 버튼에 none값을 준 뒤, check가 넘어갈 때마다 나타나는 버튼을 다르게 만들어 마치 고정된 듯한 효과를 주면 된다. 다만 X값을 -100%만큼 이동시키는게 원래라면 맞는데 li값이 화면에 보여지는 부분의 100%를 차지하는게 아니다보니 그 부분에서 줄이고 마진값을 주다보니 조금 틀어진 것 같다...
자바 스크립트 기능을 이용하지 않고 오로지 CSS 속성으로 슬라이드 형식의 웹페이지를 제작해보았다.
input태그의 radio속성을 이용하는건데, radio속성은 우리가 흔히 볼 수 있는 단일 선택 기능으로, 이 기능을 어떻게 슬라이드 방식으로 바꿀 수 있는가 했더니 label이라는 추가 태그를 통해 다양한 시도를 해볼 수 있었다. 여기서 label 태그는 해당 항목을 클릭할 시 radio 항목의 체크를 대신 해주는 기능을 가지고 있다.
먼저 input 태그를 작성한다. 그 중에서 단일 선택이 될 수 있도록 같은 name을 사용하여 같은 그룹임을 알려주고 radio속성의 기능만 사용하기 때문에 웹페이지에서는 모습을 감출 수 있도록 display : none 값을 먹인다. 단, 여기서 항상 첫번째 이미지는 배너로 보이게 설정해야 하기에 checked 속성을 잊으면 안된다.
그 다음 ul부분, 세 개의 배너 이미지를 가로로 길게 나열하기 위해 white-space 속성을 주어야 하는데 이 때 자식 요소가 블럭 요소면 nowrap을 하더라도 기능이 동작하지 않으니 꼭 자식 요소에 인라인(하지만 인라인은 속성값을 지정하는 데 한계가 있으므로 하지는 말자...), 혹은 인라인 블럭을 설정해두어야 한다. 여기서 <li> 태그들이 부모영역을 벗어날 정도로 X축을 기준으로 길게 나열되는데 미세한 틈이 생길 것이다. <ul>태그 자체에 포함되어 있는 font-size를 0으로 맞추면 <li>태그 사이에 생긴 작은 틈을 없앨 수 있으니 참고하자. 단, nowrap으로 인해 텍스트 박스의 글자들도 줄바꿈이 일어나지 않게 될 것이다. 그럴땐 다시 <li>태그에 wrap속성을 부여하면 그 안의 자식 요소는 다시 원래 입력한 대로 표기가 되니 유의할 것.
이제 <ul>태그에 overflow : hidden값을 주어 한 화면에 하나의 <li>태그만 보이도록 수정한다. 그 전에 <li>태그가 부모 요소의 전체 영역을 담당할 수 있도록 모든 값에 너비를 100% 지정해두면 벗어나는 이미지 하나 없이 첫 배너 장식 완성이다. 이제 가로로 길게 늘어진 하나의 <li> 태그들을 radio checked가 바뀔 때마다 한 장씩 넘어갈 수 있도록 버튼을 만들어보자. 슬라이드와 버튼이 함께 넘어가는 것과, 한 자리에 고정되어 넘어가는 것이 있는데 여기서 나는 고정된 버튼을 만들어 보겠다. 작성된 HTML과 같이 label for 항목에 해당 라벨을 클릭할 시 체크될 라디오 항목의 아이디를 넣어 총 세 묶음의 버튼을 만든다. 세 개의 버튼이 화면 양 옆에 고정될 수 있도록 모든 버튼에 position : absolute를 지정해 원하는 위치에 고정을 시킨 다음, 모든 버튼의 display를 none값을 주어 화면에서 사라지게 한다. 그런 다음 기능으로 배너 이미지 첫번째 화면이 checked인 상태면 첫 번째 버튼의 묶음, 두 번째 화면이면 두 번째 버튼의 묶음이, 세 번째 화면이면 세 번째 버튼의 묶음이 보일 수 있도록 block값을 지정하면 그 자리에 고정된 버튼을 만들 수 있다.
이제 마지막으로 체크가 될 때마다 <li>태그에 있는 화면이 움직이기만 하면 첫 슬라이드 화면 완성이다. 위와 같이 체크가 될 항목을 지정한 뒤 <li>태그가 보여질 화면을 이동시킨다. X축을 기준으로 움직이기 때문에 translateX값을 각 -100%씩 주면 <li>태그가 차지한 100%의 값만큼 옮겨가 마치 한 장, 한 장이 넘어가는 효과를 주게 된다. 여기서 부드럽게 넘어갈 수 있도록 <li>태그에 transition값을 주면 끝이다.
이제 배너 하단에 작은 바를 살펴보자. 하나 하나 누를 때마다 화면이 해당 페이지로 넘어가는 식이라 넘길 때마다 다음 페이지의 주소를 바꿔줘야 하는 경우와 다르게 탭처럼 누르면 되니 훨씬 만들기 쉽다. <label>은 인라인 요소라 크기 지정을 할 수 없으므로 display를 사용해 블럭요소값을 가지게 한 후 알맞게 디자인만 하면 끝.
이번에는 카테고리를 만들어 각 탭마다 보여지는 항목을 다르게 표현하는 기능을 만들어 보았다. 마찬가지로 input 태그의 radio 속성을 이용하여 하면 되는데, 나는 슬라이드 페이지에서 언더바 형식을 그대로 채용해 각 탭마다 보여지는 테이블을 따로 만들어 동시에 none값을 준 뒤 하나하나 나타나도록 만들어 보았다.
하지만 한가지 에로사항이 생겼는데, 원래 display : none / block으로 보이게 한 것 까지는 좋으나 그렇게 했을 경우 본래 가지고 있던 display속성값과 충돌이 생겨 CSS가 풀려버리는 현상이 생겼다. 해당 현상은 일단 내가 코딩을 잘못 설계한 게 맞기 때문에 추후에 이 부분을 다시 수정해볼 생각이다. 일단은 바뀌는 것을 방지하기 위해 display를 flex로 지정했더니 위 GIF이미지 처럼 정상적으로 작동하기는 했다...
참고로 탭을 누를 때마다 색이 바뀌는 설정을 했는데 부드럽게 바뀌는 효과를 주기 위한 transition을 기능값에다 주게 되면 누를때만 해당 효과가 들어가고 다른 탭으로 넘어갈 때는 transition효과가 먹히지 않으니 이 부분을 유의하자.
