CSS Input 속성 - slide만들기

이번 글은 저번글에 이어서 slide를 만드는 것을 해보겠습니다.

이번에는 CSS로 꾸며주어야 할 것이 많기 때문에 CSS파일을 따로 분리해서 작성을 하겠습니다.

html을 우선 아래 코드처럼 따라서 입력을 해주세요.

link의 href는 각자 파일 경로에 따라서 작성을 해주세요.

이제 CSS의 style을 꾸며 보도록 하겠습니다

전체적인 태그들의 좌표를 padding : 0 margin : 0을 통해 (0,0)처럼 딱 붙이겠습니다.

 

그 다음으로는 넘어갈 슬라이드의 list들의 background를 하나씩 지정을 해주세요.

그럼 웹페이지에 이렇게 줄이 그어질 것입니다. 이것들을 이제 하나로 겹치게 만들어서 input radio를 체크를 했을 때

하나씩 slide 되게 만들 것입니다. 이 nth-child가 무엇인지 잘 모르시는 분은

제가 전에 써놨던 글들 중에서 관련된 글을 작성한 것이 있으니 찾아봐주세요!

그리고 이제 input radio를 체크하는 부분을 만들어야 해요! 

display:inline-block;

inline-block은 요소는 간단하게 이해하자면

float:left를 적용시킨 것과 비슷하다라고 이해하면 편할 것 같다.

vertical-align : middle;

수직 정렬을 하겠다라는 의미인데 검색을 해보니 어떤 경우에는 적용이 되고

어떤 경우에는 적용이 안되는 것이 있나보다. 따로 정리를 한번 올려야겠다.

border-radius:50%;

원래는 border가 사각형 모양인데 radius를 50% 첨가해서 둥글게 만든다

cursor:pointer;

해당 태그의 위치할 때 마우스 커서의 모양을 바꾸는 것입니다.

 

그 다음 코드로는 위의 만든 점들을 가운데 정렬을 하는 코드입니다.

그리고 직접적으로 접근을 하는 input부분을 숨겨주고 이미지를 대체하는 li들을

flot:left를 통해 정렬을 해주고 높이와 넓이를 설정을 해줍니다.

<코드 결과>

그 다음에는 한번에 여러개를 처리를 해봅시다.

list들에 점들이 아직 살아있는 것 같은데 그것들을 없애주고 div = slide를 이제 넓고 길게 만들어서

우리 눈에는 하나의 색깔만 보이게 하고, 나머지 색깔들은 숨기는 그런 기능에 관한 코드입니다.

#slide ul 의 width 400%는 우리가 지금 4개의 list들을 만들었기 때문에 400퍼인것이니까 나중에 다른 이미지나

더 많은 것을 추가할 때는 퍼센트를 조절을 해줘야 한다.

이제 label을 클릭을 하면 옆에 이미지로 넘어가는 부분을 만들겠습니다.

margin-left의 값을 조절하는 의미

list들이 길게~ 이어져 있는 것이기 때문에 label을 클릭하면 해당 색깔을 보여주어야 해서

margin-left의 값을 퍼센트만큼 옮겨주는 것이다

checked~ul

말로 설명하기 힘든데 간단히 설명을 해보자면

ul안에 현재 4개의 list들이 있는데 

ul안에 첫번째 두번째 세번째 네번째 리스트 들이라는 의미라고 생각하면 조금 편할 것 같기도..하다..

빼고 실습을 한번 해보면 무슨말인지 이해가 조금 될 것이다.

 

이렇게 위의 과정을 따라오면 슬라이드 기능을 구현을 할 수 있다.

나중에 미흡한 부분이 발견이 된다면 수정을 해야겠다.