IT 배움터

   자바 스크립트 기능을 이용하지 않고 오로지 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효과가 먹히지 않으니 이 부분을 유의하자.

   모달창이란 것을 새로 배우게 됐다. 평소 웹페이지에서 흔히 광고 팝업이라고 묶어 부르는 종류 중 하나인데, 모달은 팝업과는 다르다는 것도 처음 알게 되었다. 팝업은 새로운 페이지가 화면에 나타남으로써 창을 무시해도 웹 문서를 조작하는 데 문제가 없지만, 모달은 사용자 화면 전체에 새로운 레이어를 씌워버리면서 닫기 버튼을 누를 때까지 웹문서를 조작할 수 없다는게 가장 큰 차이점이었다. 그렇다면 화면 전체를 덮어버리면서 사용자가 반응했을때만 튀어나오게 할 수 있는 방법은 무엇일까...

   일명 책갈피 기능을 쓰면 가능했다. a태그는 웹문서간의 경로도 될 수 있지만 웹문서 내의 아이디 값을 통해 이동하는 것이 가능한데 이걸 책갈피 기능이라고 부르는 듯 했다. 일단 사용자가 누를 수 있는 a태그를 먼저 나열한 뒤, 모달창이 될 div가 가진 아이디 값을 경로로 지정해준다. 모달창으로 만들 div는 추가적인 CSS를 통해 화면 전체를 어둡게 만들어주는 효과와 더불어 사용자에게 전달하고자 하는 공간에 배경과 내용을 넣은 뒤 모달창을 벗어나기 위한 a태그를 추가적으로 달아주면 준비는 끝난다.

   먼저 전체 화면을 어둡게 덮은 화면을 설계하기 위해 너비와 높이를 뷰포인트에 맞춰주고 완전히 덮으면서도 뒤에 배치된 구조는 보일 수 있도록 투명도 값을 조절해준다. 그런 다음 모달의 내용이 될 text_box에 position을 absolute로 지정하고 위치가 화면의 정중앙에 올 수 있도록 transform값을 준다. 그런다음 이 모든 것이 사용자가 해당 아이디 주소로 넘어왔을 때 보일 수 있도록 none/block값을 지정하면 GIF의 예시처럼 모달창이 완성된다 :)

   책갈피 기능과 더불어 : target 속성을 처음 썼는데 웹문서 간의 절대경로 값만 입력해와서 책갈피 기능으로도 다양한 효과를 줄 수 있는게 신기하고 유익한 시간이었다.

해당 위치에 마우스 커서를 오버 했을 시 목록이 나타나게 만드는 HTML 코드를 작성해보았다.

아직 기능을 배우기 전이라 완벽하진 않아도 목록 자체가 나타나게끔 하면 된다고 하셨는데...

처음에 div 박스를 따로 만들어 리스트를 작성하고 해당 위치로 옮긴 다음 :hover를 이용하여 display:none과 block을 쓰려고 했으나 div 박스 자체에 none을 걸어버리면 hover될 위치도 사라져 해당 기능을 쓸 수 없었다! 그렇다면 선택자를 이용해 Pages 라는 단어에 hover 했을 시 형제 리스트가 나타나게끔 다시 코드를 작성해야 한다는 조언과 함께 새로 작성했다.

.pages:hover ~ #list_box

pages태그에 마우스가 올라왔을 때 형제 속성 중 list_box를 보이게 하라, 라고 입력하자 정상적으로 작동이 되었다...

(원래 쓰던거 그대로 복사 붙여넣기 해서 불필요한 박스가 많이 있지만 지금와서 보니 #list_nav에 display:none 값을 입력하고 #list_box:hover > #list_nav 를 했다면 아마 되지 않았을까 싶다)

https://hcl-yeon.tistory.com/8

어제는 헤더 부분만 해결했지만 오늘은 사이트 전체를 박싱하고 돔트리를 작성한 후 HTML작업을 진행했다.

마찬가지로 기능 부분은 모두 제외하고 배치와 스타일 부분만 했는데도 오래걸렸다...^-T