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

'입만 나불거리고 행동하지 않는 야당을 규탄한다.'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (19) |

여러가지 팁 (1095) |

추천 및 재미 (163) |

자료실 (28) |

시사, 이슈, 칼럼, 평론, 비평 (795) |

끄적거림 (142) |

문예 창작 (719) |

바람 따라 (75) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (248)
리눅스 서버 (155)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (180)
php (2)
디자인 관련 (1)
javascript/jquery (77)
DATABASE (9)
postgresql (45)
mariadb, mysql (38)
생활/쇼핑 (39)
컴퓨터/핸드폰 (46)
종교/자선 (3)
요리관련 (22)
음식관련 (15)
의학관련 (9)
건강/운동 관련 (13)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (10)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (8)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

리눅스 설명

javascript 줄 맞추기

Hits :

html/css/xml

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

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

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

<!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
번 호	카테고리	제 목	이름	조회수
48	html/css/xml	자주 쓰는 엔티티코드... 사용 빈도수가 높은 엔티티 코드 정리	바다아이	3556
47	html/css/xml	ckeditor 소스보기 누르면 css 날아가는 현상,,, 문제.. ckeditor 소스보기 문제	바다아이	4727
46	html/css/xml	ckeditor font size 설정하기, ckeditor 기본 폰트 크기 설정, ckeditor 줄바꿈 <br>, width height 설정.	바다아이	5978
45	html/css/xml	robots.txt, 사이트 검색 로봇 설정...	바다아이	8458
44	html/css/xml	CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격, 자간	바다아이	8157
43	html/css/xml	ie 인터넷 익스플로러 폰트 적용 문제, 인터넷 익스플로러 나눔폰트 적용...	바다아이	7914
42	html/css/xml	html 에서 탭 tab 키 사용하기, 표현하기....	바다아이	14924
현재글	html/css/xml	css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치	바다아이	9986
40	html/css/xml	pt, px, em, %, font 폰트 글꼴의 단위에 따른 크기 사이즈 비교표, 폰트 크기, 글씨 크기	바다아이	9895
39	html/css/xml	폰트 글꼴(font face) 목록	바다아이	9983
38	html/css/xml	고정 레이어 예제....	바다아이	9954
37	html/css/xml	html 문서 MIME 타입 확인...	바다아이	14135
36	html/css/xml	ckeditor ajax 통신시 본문값이 빈값으로 들어가는 문제....	바다아이	10493
35	html/css/xml	[정규표현식] 정규표현식 정리, 정규식	바다아이	14278
34	html/css/xml	홈페이지, 사이트 주소 앞에 아이콘, 주소창 작은 아이콘, ico 파일	바다아이	9881
33	html/css/xml	브라우저 input 태그의 자동완성 기능 해제하기, 끄기 autocomplete	바다아이	10659
32	html/css/xml	[CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius, 라운드	바다아이	11625
31	html/css/xml	ckeditor 4 메뉴 툴바 도구 선택...	바다아이	12192
30	html/css/xml	HTTP/2 왜 지금 적용해야 하는가?	바다아이	19609
29	html/css/xml	HTTP/2란 무엇인가?	바다아이	10367
28	html/css/xml	사이트맵 xml 예제.... sitemap.xml	바다아이	10361
27	html/css/xml	ckeditor config.js 설정 기본값....	바다아이	11465
26	html/css/xml	이미지 없을 때 엑스박 대신 다른 이미지 보여주기	바다아이	11215
25	html/css/xml	레이어 팝업 소스	바다아이	10169
24	html/css/xml	테이블, 이미지 테두리관련 border 스타일	바다아이	10601
23	html/css/xml	테이블 깨짐, 깨지는 것 방지	바다아이	11034
22	html/css/xml	특수문자 코드표 (=특수문자 HTML 엔티티 코드), entity code	바다아이	11383
21	html/css/xml	원화(Won;￦) 대신 백슬래시(＼;Backslash; 백슬래쉬)로 나타내기, 역슬래시, 역슬래쉬	바다아이	16020
20	html/css/xml	특수문자 리스트	바다아이	10813
19	html/css/xml	블로그/웹에서 소스코드 하이라이트/구문강조 사용하기	바다아이	11420
1 2
\| \|

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