Only CSS Slide – 오직 CSS만 사용하여 슬라이드 만들기

css3

슬라이드는 CSS만 있어도 만들 수 있습니다. 보통 슬라이드를 만든다고 생각하면 javascript를 사용해야한다고 생각합니다. 그러나 javascript를 모르더라도, css만으로 slide를 만들 수 있습니다.

결과물부터 확인해보겠습니다. 이런 형태의 Position enable slide를 만들 수 있습니다. (결과물 다운로드)


[들어가기 전에]
javascript slide animation 관련 포스트도 있습니다.
1. javascript slide animation 만들기
2. javascript slide animation plugin 만들기

뼈대(HTML) 제작

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="slide">
  <input type="radio" name="pos" id="pos1" checked>
  <input type="radio" name="pos" id="pos2">
  <input type="radio" name="pos" id="pos3">
  <input type="radio" name="pos" id="pos4">
  <ul>
    <li>slide1</li>
    <li>slide2</li>
    <li>slide3</li>
    <li>slide4</li>
  </ul>
  <p class="pos">
    <label for="pos1">1</label>
    <label for="pos2">2</label>
    <label for="pos3">3</label>
    <label for="pos4">4</label>
  </p>
</div>
</body>
</html>

1) input type="radio"

input type="radio"는 단일 선택 태그입니다.
여러개의 선택지중 한 가지만 선택할 수 있도록 해줍니다.
단, name 속성이 서로 같아야합니다.

<input type="radio" name="pos" id="pos1" checked>
<input type="radio" name="pos" id="pos2">
<input type="radio" name="pos" id="pos3">
<input type="radio" name="pos" id="pos4">

name 속성이 없거나, 일치하지 않을 경우 다음과 같이 서로 묶이지 않고 다중으로 선택하게 됩니다.

<input type="radio" id="pos1" checked>
<input type="radio" id="pos2">
<input type="radio" id="pos3">
<input type="radio" id="pos4">

2) label

<label><input type="radio" name="pos" id="pos1" checked> 선택1</label>
<label><input type="radio" name="pos" id="pos2"> 선택2</label>
<label><input type="radio" name="pos" id="pos3"> 선택3</label>
<label><input type="radio" name="pos" id="pos4"> 선택4</label>
<p><label for="pos1">for을 이용한 선택1</label></p>
<p><label for="pos2">for을 이용한 선택2</label></p>
<p><label for="pos3">for을 이용한 선택3</label></p>
<p><label for="pos4">for을 이용한 선택4</label></p>

여기서 선택1, 선택2, 선택3, 선택4를 각각 클릭해보면 저절로 input type="radio" 태그가 check 되는 것을 확인할 수 있습니다.
이렇게 label은 input을 선택할 수 있게 해줍니다.
2가지의 방법이 있습니다.

  1. input을 label로 감싸는 방법
    <label><input></label>
  2. label로 input을 지정하는 방법
    <label for="test">선택</label>
    <input id="test">
    lable의 for속성이 가르키는 값과 input의 id값이 일치하면, 해당 input을 선택한다.

* 결론

여기서 1 2 3 4 를 선택하면 위의 radio 들이 선택되는 것을 확인할 수 있을 것입니다.
즉, 1 2 3 4는 포지션을 나타내는 것이고, 해당 포지션의 위치에 맞는 슬라이드 장면을 노출시키는 것이 우리의 목적입니다.
이 때 css 선택자로 element:checkedelement1 ~ element2 을 사용할 것입니다.




2. CSS로 styling 하기

	*{margin:0;padding:0;}
	ul,li{list-style:none;}
	#slide{height:300px;position:relative;overflow:hidden;}
	#slide ul{width:400%;height:100%;transition:1s;}
	#slide ul:after{content:"";display:block;clear:both;}
	#slide li{float:left;width:25%;height:100%;}
	#slide li:nth-child(1){background:#faa;}
	#slide li:nth-child(2){background:#ffa;}
	#slide li:nth-child(3){background:#faF;}
	#slide li:nth-child(4){background:#aaf;}
	#slide input{display:none;}
	#slide label{display:inline-block;vertical-align:middle;width:10px;height:10px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;}
	#slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
	#pos1:checked~ul{margin-left:0%;}
	#pos2:checked~ul{margin-left:-100%;}
	#pos3:checked~ul{margin-left:-200%;}
	#pos4:checked~ul{margin-left:-300%;}
	#pos1:checked~.pos>label:nth-child(1){background:#666;}
	#pos2:checked~.pos>label:nth-child(2){background:#666;}
	#pos3:checked~.pos>label:nth-child(3){background:#666;}
	#pos4:checked~.pos>label:nth-child(4){background:#666;}

속성 및 기능 설명

  • transition:1s
    1초(1s)동안 부드럽게 변화시킨다.
    <style> div{width:30px;height:30px;transition:1s;border:1px solid #000;} div:hover{width:50px;height:50px;background:#000;color:#fff;} </style> <div>test</div>




최종 소스

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
	*{margin:0;padding:0;}
	ul,li{list-style:none;}
	#slide{height:300px;position:relative;overflow:hidden;}
	#slide ul{width:400%;height:100%;transition:1s;}
	#slide ul:after{content:"";display:block;clear:both;}
	#slide li{float:left;width:25%;height:100%;}
	#slide li:nth-child(1){background:#faa;}
	#slide li:nth-child(2){background:#ffa;}
	#slide li:nth-child(3){background:#faF;}
	#slide li:nth-child(4){background:#aaf;}
	#slide input{display:none;}
	#slide label{display:inline-block;vertical-align:middle;width:10px;height:10px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;}
	#slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
	#pos1:checked~ul{margin-left:0%;}
	#pos2:checked~ul{margin-left:-100%;}
	#pos3:checked~ul{margin-left:-200%;}
	#pos4:checked~ul{margin-left:-300%;}
	#pos1:checked~.pos>label:nth-child(1){background:#666;}
	#pos2:checked~.pos>label:nth-child(2){background:#666;}
	#pos3:checked~.pos>label:nth-child(3){background:#666;}
	#pos4:checked~.pos>label:nth-child(4){background:#666;}
</style>
<div id="slide">
	<input type="radio" name="pos" id="pos1" checked>
	<input type="radio" name="pos" id="pos2">
	<input type="radio" name="pos" id="pos3">
	<input type="radio" name="pos" id="pos4">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<p class="pos">
		<label for="pos1"></label>
		<label for="pos2"></label>
		<label for="pos3"></label>
		<label for="pos4"></label>
	</p>
</div>
</body>
</html>





참고자료

  1. 더욱 다양한 CSS Slide 만들기 : http://junil-hwang.com/blog/css-slide-animation/
  2. javascript slide animation : http://junil-hwang.com/blog/javascript-slide-animation/
  3. javascript slide animation plugin : http://junil-hwang.com/blog/javascript-slide-plugin/