프로그래밍 언어349 [HTML/CSS] 심플하고 단순하지만 깔끔한 구글 버튼 (Google Button) 진짜 심플,단순하지만 깔끔한 구글 버튼입니다.저는 요즘 이런게 좋더군요^^ 종류도 몇 가지 안되네요. 2018. 11. 16. [HTML/CSS] 깔끔하고 심플한 일명 쿨버튼(Cool Button)입니다. 색상별 크기별 다 있습니다. 2018. 11. 16. [CSS] 깔끔하고 심플한 플라스틱 버튼입니다. 설명 필요 없습니다.HTML / CSS로만 만들어졌으므로 소스 참고하시면 됩니다. 2018. 11. 16. [HTML] Textarea에 간단하게 가로 스크롤 추가하기 See the Pen Horizotal scrollbar textArea attribute by zzzznara (@zzznara) on CodePen. 구글링하면 javascript로 scrollbar를 만드는 예제가 많은데요. 그럴 필요없이 이렇게 속성 하나만 추가해주면 됩니다. 2018. 11. 15. [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. [제이쿼리 플러그인 소스] inputbox에서 커서가 원하는 곳에 위치하게 하는 jquery plugin See the Pen [jQuery plugin] inputbox에서 커서가 원하는 곳에 위치하게 하는 제이쿼리 플러그인 소스 by zzzznara (@zzznara) on CodePen. 자동으로 커서를 inputbox에 위치하게 할 때 inputbox의 내용 뒤에 커서가 위치하게 하는 제이쿼리 플러그인 입니다. $(“[name=cur]”).focus(); 이렇게 focus()를 주게 되면 커서가 앞에 위치합니다. $(“[name=cur]”).focus().setCursorPosition(); 이 플러그인을 넣고 focus() 뒤에 setCursorPosition( 1 )를 하게 되면 커서가 글자 뒤에 위치합니다. setCursorPosition() 안의 숫자는 포커스의 위치입니다. 2018. 10. 25. [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen. 3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요. 이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다. 이럴 때 사용하면 좋을 것 같네요~ 예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다. 좌측하단 높이 : 300px 우측하단 높이 : 100px 하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다. 물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다... 2018. 6. 10. [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) See the Pen [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) by zzzznara (@zzznara) on CodePen. 1. 달력에 숫자와 하이픈(-)만 입력가능합니다. 2. 존재하지 않는 날짜를 입력했는지 체크합니다. 3. from ~ to 달력인 경우, 서로 기간이 엇갈리지 않게 체크 및 disabled 처리합니다. (from 달력에 ‘2018-01-01’이 선택된 경우, to 달력은 ‘2018-01-01’ 이후만 선택 가능합니다.) 2018. 5. 31. [bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26. [자바스크립트] javascript로 iframe에 동적으로 소스를 추가하거나 변경하는 방법 이런식으로 iframe에는 파일을 하나 만들어서 src 속성으로 넣었는데요. 파일이 없어도 iframe에 소스를 추가하거나 변경할 수 있습니다. 소스에 주석이 돼 있으므로 설명은 생략합니다. 2018. 5. 24. [javascript] 자바스크립트로 json 변수에 담겨있는 key value 추출 방법 json 변수에 key, value값이 뭐가 들어있는지 알고 싶을 때 사용할 수 있는 예제입니다.123for(var key in json) { $("#jsonList").append(""+ key +":"+ json[key] +"");}Colored by Color Scriptercs 긴 설명은 필요없고 이 부분만 잘 확인하시면 됩니다. 2018. 5. 24. [jQuery] jqtransform의 selectbox의 option 추가해도 안 보이는 문제 해결방법 2018/05/23 - [프로그래밍 언어/jQuery] - [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript /** * * jqTransform * by mathieu vilaplana mvilaplana@dfc-e.com * Designer ghyslain armand garmand@dfc-e.com * * * Version 1.0 25.09.08 * Version 1.1 06.08.09 * Add event click on Checkbox and Radio * Auto calculate the size of a select element * Can now, disabled the .. 2018. 5. 23. [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript $(function(){ $('form').jqTransform({imgPath:'http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/img/'}); }); Body Input Text: Input Password: Checkbox: Radio : oui non Select : 1 2 Select Redimention : Big Option test line with more words Multi line row. Multi line row. Multi line row. Multi line row. Option 2 Option 3 Option 4 Option 5 Option.. 2018. 5. 23. Html Html5 Css Javascript(자바스크립트) jQuery 실행기 - 바로 확인 가능) Editor - HTML HTML5 CSS javaScript jQuery Output 새창으로 보기 2018. 5. 20. 이전 1 2 3 4 5 ··· 24 다음