IT 배움터

   슬라이드를 넘길 때마다 화살표 버튼이 화면 밖에서 안으로 나타나는 효과와 글자가 조금씩 움직이는 효과를 추가해보았다. 기존에 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%를 차지하는게 아니다보니 그 부분에서 줄이고 마진값을 주다보니 조금 틀어진 것 같다...