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

HOME |

여기는? |

바다물때표 |

알림 (4) |

여러가지 팁 (921) |

추천 및 재미 (172) |

자료실 (20) |

끄적거림 (569) |

시나리오 (760) |

드라마 대본 (248) |

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

현재 접속자

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

html/css/xml

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

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

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 다운수 : 32 회

<!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
번 호	카테고리	제 목	이름	조회수
45	html/css/xml	robots.txt, 사이트 검색 로봇 설정...	바다아이	160
44	html/css/xml	CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격, 자간	바다아이	909
43	html/css/xml	ie 인터넷 익스플로러 폰트 적용 문제, 인터넷 익스플로러 나눔폰트 적용...	바다아이	945
42	html/css/xml	html 에서 탭 tab 키 사용하기, 표현하기....	바다아이	2421
현재글	html/css/xml	css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치	바다아이	2729
40	html/css/xml	pt, px, em, %, font 폰트 글꼴의 단위에 따른 크기 사이즈 비교표, 폰트 크기, 글씨 크기	바다아이	2742
39	html/css/xml	폰트 글꼴(font face) 목록	바다아이	3003
38	html/css/xml	고정 레이어 예제....	바다아이	3213
37	html/css/xml	html 문서 MIME 타입 확인...	바다아이	3437
36	html/css/xml	ckeditor ajax 통신시 본문값이 빈값으로 들어가는 문제....	바다아이	3247
35	html/css/xml	[정규표현식] 정규표현식 정리, 정규식	바다아이	3481
34	html/css/xml	홈페이지, 사이트 주소 앞에 아이콘, 주소창 작은 아이콘, ico 파일	바다아이	3148
33	html/css/xml	브라우저 input 태그의 자동완성 기능 해제하기, 끄기 autocomplete	바다아이	3335
32	html/css/xml	[CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius, 라운드	바다아이	3810
31	html/css/xml	ckeditor 4 메뉴 툴바 도구 선택...	바다아이	4670
30	html/css/xml	HTTP/2 왜 지금 적용해야 하는가?	바다아이	4479
29	html/css/xml	HTTP/2란 무엇인가?	바다아이	3590
28	html/css/xml	사이트맵 xml 예제.... sitemap.xml	바다아이	3713
27	html/css/xml	ckeditor config.js 설정 기본값....	바다아이	4039
26	html/css/xml	이미지 없을 때 엑스박 대신 다른 이미지 보여주기	바다아이	3878
25	html/css/xml	레이어 팝업 소스	바다아이	3640
24	html/css/xml	테이블, 이미지 테두리관련 border 스타일	바다아이	3578
23	html/css/xml	테이블 깨짐, 깨지는 것 방지	바다아이	3687
22	html/css/xml	특수문자 코드표 (=특수문자 HTML 엔티티 코드), entity code	바다아이	4415
21	html/css/xml	원화(Won;￦) 대신 백슬래시(＼;Backslash; 백슬래쉬)로 나타내기, 역슬래시, 역슬래쉬	바다아이	4616
20	html/css/xml	특수문자 리스트	바다아이	3811
19	html/css/xml	블로그/웹에서 소스코드 하이라이트/구문강조 사용하기	바다아이	4176
18	html/css/xml	css3 버튼 모음... demo 입니다. 참고만 하시고 적당히 변경 후 사용 ^^;	바다아이	3562
17	html/css/xml	마우스 오버시 mouse over 이미지 투명도 지정, Hover Fade Effect using CSS	바다아이	5559
16	html/css/xml	[html] 테이블 TD 또는 TR 마우스 롤오버시 색상 변경하기, mouse over	바다아이	4132
1 2
\| \|

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