환영합니다. 바다아이 홈페이지 입니다.

HOME |

여기는? |

바다물때표 |

여러가지 팁 (888) |

추천 및 재미 (152) |

자료실 (20) |

끄적거림 (519) |

시나리오 (760) |

드라마 대본 (248) |

2020년 09월 21일

더이상 누굴 미워하는 것에 시간과 정력을 낭비하지 말자. - 바다아이

리눅스 데스크탑 (189)
리눅스 서버 (136)
윈도우 관련 (7)
freebsd 데스크탑 (30)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (44)
html5 (4)
golang (173)
php (2)
디자인 관련 (1)
javascript/jquery (74)
DATABASE (7)
postgresql (44)
mariadb, mysql (28)
생활/쇼핑 (12)
컴퓨터/핸드폰 (21)
종교/자선 (3)
요리관련 (20)
음식관련 (12)
의학관련 (2)
건강/운동 관련 (13)
주식관련 (1)
자동차 관련 (13)
기계 관련 (4)
과학, 수학관련 (0)
문학관련 (5)
좋은 글 (3)

현재 접속자

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

html/css/xml

html/css/xml - css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치

이 름 : 바다아이 | 조회수 : 2028

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp {
  color: #080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link {
  color: #066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #606;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9B703F
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
 font-style: italic;
}
</style>
<pre>
<code class="hljs">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px; 
}
/*스위치바탕 ie에서 테두리생김방지*/
.switch input {display:none;}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 transition:.4s;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {
 position: absolute;
 content: &quot;&quot;;
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background: white;
 transition: .4s;
}

/*체크된(on된)스위치바탕*/
input:checked + .slider {
 background: #2196F3;
}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {
 box-shadow: 0 0 3px #2196F3;
}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {
 transform: translateX(26px);
}

/*Rounded sliders*/
.slider.round {
 border-radius: 34px;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {
 border-radius: 50%;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Toggle Switch&lt;/h2&gt;

&lt;label class=&quot;switch&quot;&gt;
 &lt;input type=&quot;checkbox&quot;&gt;
 &lt;div class=&quot;slider&quot;&gt;&lt;/div&gt;
&lt;/label&gt;

&lt;label class=&quot;switch&quot;&gt;
 &lt;input type=&quot;checkbox&quot; checked&gt;
 &lt;div class=&quot;slider&quot;&gt;&lt;/div&gt;
&lt;/label&gt;&lt;br&gt;&lt;br&gt;

&lt;label class=&quot;switch&quot;&gt;
 &lt;input type=&quot;checkbox&quot;&gt;
 &lt;div class=&quot;slider round&quot;&gt;&lt;/div&gt;
&lt;/label&gt;

&lt;label class=&quot;switch&quot;&gt;
 &lt;input type=&quot;checkbox&quot; checked&gt;
 &lt;div class=&quot;slider round&quot;&gt;&lt;/div&gt;
&lt;/label&gt;

&lt;/body&gt;
&lt;/html&gt;

출처 : https://m.blog.naver.com/pjh445/220800130429</code></pre>

짧은 주소 : https://www.bada-ie.com/su/?671591780431

1.png - 18 KB 다운수 : 26 회

<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; 
}
/*스위치바탕 ie에서 테두리생김방지*/
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition:.4s;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  transition: .4s;
}

/*체크된(on된)스위치바탕*/
input:checked + .slider {
  background: #2196F3;
}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {
  box-shadow: 0 0 3px #2196F3;
}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {
  transform: translateX(26px);
}

/*Rounded sliders*/
.slider.round {
  border-radius: 34px;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>

</body>
</html>



출처 : https://m.blog.naver.com/pjh445/220800130429

1 page / 2 page
번 호	카테고리	제 목	이름	조회수
44	html/css/xml	CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격, 자간	바다아이	233
43	html/css/xml	ie 인터넷 익스플로러 폰트 적용 문제, 인터넷 익스플로러 나눔폰트 적용...	바다아이	208
42	html/css/xml	html 에서 탭 tab 키 사용하기, 표현하기....	바다아이	1786
현재글	html/css/xml	css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치	바다아이	2029
40	html/css/xml	pt, px, em, %, font 폰트 글꼴의 단위에 따른 크기 사이즈 비교표, 폰트 크기, 글씨 크기	바다아이	1988
39	html/css/xml	폰트 글꼴(font face) 목록	바다아이	2285
38	html/css/xml	고정 레이어 예제....	바다아이	2493
37	html/css/xml	html 문서 MIME 타입 확인...	바다아이	2614
36	html/css/xml	ckeditor ajax 통신시 본문값이 빈값으로 들어가는 문제....	바다아이	2468
35	html/css/xml	[정규표현식] 정규표현식 정리, 정규식	바다아이	2659
34	html/css/xml	홈페이지, 사이트 주소 앞에 아이콘, 주소창 작은 아이콘, ico 파일	바다아이	2425
33	html/css/xml	브라우저 input 태그의 자동완성 기능 해제하기, 끄기 autocomplete	바다아이	2582
32	html/css/xml	[CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius, 라운드	바다아이	3032
31	html/css/xml	ckeditor 4 메뉴 툴바 도구 선택...	바다아이	3599
30	html/css/xml	HTTP/2 왜 지금 적용해야 하는가?	바다아이	3443
29	html/css/xml	HTTP/2란 무엇인가?	바다아이	2879
28	html/css/xml	사이트맵 xml 예제.... sitemap.xml	바다아이	3026
27	html/css/xml	ckeditor config.js 설정 기본값....	바다아이	3336
26	html/css/xml	이미지 없을 때 엑스박 대신 다른 이미지 보여주기	바다아이	3177
25	html/css/xml	레이어 팝업 소스	바다아이	2970
24	html/css/xml	테이블, 이미지 테두리관련 border 스타일	바다아이	2925
23	html/css/xml	테이블 깨짐, 깨지는 것 방지	바다아이	2961
22	html/css/xml	특수문자 코드표 (=특수문자 HTML 엔티티 코드), entity code	바다아이	3659
21	html/css/xml	원화(Won;￦) 대신 백슬래시(＼;Backslash; 백슬래쉬)로 나타내기, 역슬래시, 역슬래쉬	바다아이	3739
20	html/css/xml	특수문자 리스트	바다아이	3122
19	html/css/xml	블로그/웹에서 소스코드 하이라이트/구문강조 사용하기	바다아이	3415
18	html/css/xml	css3 버튼 모음... demo 입니다. 참고만 하시고 적당히 변경 후 사용 ^^;	바다아이	2910
17	html/css/xml	마우스 오버시 mouse over 이미지 투명도 지정, Hover Fade Effect using CSS	바다아이	4712
16	html/css/xml	[html] 테이블 TD 또는 TR 마우스 롤오버시 색상 변경하기, mouse over	바다아이	3405
15	html/css/xml	마퀴, 마키(marquee) 태그 사용법	바다아이	3449
1 2
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : 구글 클라우드 플랫폼 실행시간 : 0.24862 초
to webmaster... gogo sea. gogo sea.