본문 바로가기

레이어7

[Bootstrap] CSS만 사용해서 하단(footer) 고정 레이어 샘플 예제 (부트스트랩용 샘플) See the Pen bottom fix footer - bootstrap by Woojin Choi (@woojin-choi) on CodePen. 하단 고정 레이어 여러가지 방법이 있는데요. 부트스트랩으로 템플릿을 만들어야해서 부트스트랩 class를 사용해서 만들어 봐야겠습니다. 부트스트랩의 기능으로 하단을 고정시킨 건 아닙니다. CSS로만 화면 하단에 고정시켰습니다. 2018. 12. 13.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 2가지 이상의 객체를 동시에 사용할 때 사용합니다. 즉, 위 예제에서 버튼과 레이어를 클릭할 때는 사라지지 않아야 하고 그 2개를 제외한 다른 곳을 클릭하면 레이어가 사라집니다. 2018. 11. 14.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 메뉴바나 레이어 메뉴에 많이 사용되는 스크립트랍니다. 2018. 11. 12.
[jQuery] 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스입니다. 2016. 11. 30.
[jQuery] 마우스로 움직이는 팝업레이어 - 제이쿼리로 만들기 $(function() { $( "#draggable" ).draggable(); });draggable() 메소드만 호출하면 됩니다. 사이에 아래 스크립트 넣어주는 거 잊으면 안되겠죠. 2015. 7. 22.
CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어보기 CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어 보겠습니다. 소스 설명 반드시 사이에 위 meta 태그를 넣어 주셔야 합니다.@media (max-width: 500px) { .solid { display:block;} .dashed { display:block;} .dotted {display:block;} } 미디어쿼리가 사용되었구요. 브라우저 창이 최대 500px까지는 안의 상태를 유지하라는 뜻입니다. .solid { width:190px; height:190px; background-color:#cccccc; border:3px solid black; display:inline-block;} .dashed { width:190px; height:1.. 2015. 5. 15.
[jQuery] 제이쿼리로 중복 클릭 방지를 위한 레이어 팝업 띄우기 레이어를 띄운 후, 뒤에 있는 화면을 클릭하지 못하게 하는 스크립트입니다.소스를 보면 레이어를 띄우고 로 감싼 후, 을 입혀서 클릭할 수 없게 만들고 있습니다. 그리고, 어두운 색상으로 클릭할 수 없다는 느낌을 주었습니다.아래 첨부파일을 다운로드 받아서 테스트 해보세요~ blockLayer.zip 2015. 4. 14.