[HTML/ CSS] input, label 사용해서 이미지 슬라이드 만들기
개발노트/Code2019. 7. 29. 22:35[HTML/ CSS] input, label 사용해서 이미지 슬라이드 만들기

-최종 결과 -HTML 1. 전체 영역 및 버튼 구조 잡기 div로 이미지 슬라이드 전체 영역을 잡는다. input의 타입 중 radio를 선택하고 모든 input의 name값을 같게 하여 체크 시 한 개만 선택되게 한다. checked는 처음 체크될 태그를 설정할 수 있다. input의 id 값이랑 label의 for값이랑 같게 하여 label을 클릭해도 input도 활성화된다. 2. img영역 구조 잡기 js를 사용하지 않고 버튼 클릭 시 이미지가 바뀌게 하려면 img영역을 input 태그와 형제관계로 만들어야 한다. CSS에서 인접 선택자(형제 선택자)를 사용하기 위해서다. class값을 두 개로 설정하여 CSS에서 공통 스타일은 .select_img에 스타일을 넣는다. 3. 브라우저 확인 사진 4..

image