웹개발자의 기지개

부트스트랩4 소스상에서 위와 같은 여러개의 이미지 목록에서 이쁘게 이미지 모달창을 깔끔하게 띄우는 방법을 알아본다. 우선 소스를 정리하면 다음과 같다. 1 2 3 4 5 6 7 cs 본문 (body) 에는 해당 이미지 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Colored by Color Scripter cs 위 소스상에 핵심은 data-toggle="lightbox" 이다. 1번 이미지 처럼 data-title="모달 제목" data-footer="모달 푸터내용" 하면 제목과 하단부에 텍스트도 첨부할 수 있다. 여러개의 이미지를 모달창으로 이전다음형태의 갤러리 이미지 처럼 보고 싶을때는 data-gallery="example-gallery" 원하는 이미지마다 첨부하면 간단히..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 이미지 모달띄우기 사진제목 × Close Colored by Color Scripter cs data-backdrop="static" 속성은 모달창 주의의 검은 배경을 클릭하여도 창이 닫히지 않는다. data-keyboard="false" 옵션은 esc 키를 눌러도 창을 닫지 않게 해준다. modal-dialog-centered 속성은 모달창 내용이 화면 중앙으로 나오도록, data-dismiss="modal" 속성은 모달창을 닫을 수 있게 해준다.

부트스트랩을 이용하면 아주 간편하게 모달창을 띄울수 있다. 1 2 3 4 5 모달창 띄우기 창닫기 Colored by Color Scripter cs 위의 예제를 보면 data-toggle 옵션으로 apply id값을 가지는 모달창을 띄운다. data-backdrop="static" 으로 div 태그내 옵션을 주면 모달창 주의의 검은 배경을 클릭하여도 창이 닫히지 않는다. data-keyboard="false" 옵션은 esc 키를 눌러도 창을 닫지 않게 해준다. 끝으로, 태그내 data-dismiss="modal" 옵션을 주면 이 버튼 클릭으로 모달창을 닫을 수 있다. 추가적으로 javascipt 상으로 모달창을 간단히 띄울때 1 2 3 4 5 6 7 8 $("#apply").modal(); // 모달창..

반응형 웹관련 아주 좋은 프레임웍인 Bootstrap4 버전으로 간단히 입력폼을 만들어 보았다. fontawesome 에서 무료 아이콘도 살짝 넣었다. https://fontawesome.com/ Font Awesome fontawesome.com 또한 우편번호 검색창을 위해 다음 우편번호 소소를 같이 연동하였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 입력항목 예제1 function sample6_execDaumPostcode() { new daum.Postcode({ onco..