웹개발자의 기지개

부트스트랩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" 속성은 모달창을 닫을 수 있게 해준다.

이미지에 간단한 그림자를 넣어보자. 위 img 태그중에서 style 속성안의 코드부분이다. box-shadow: 5px 5px 10px grey; class="rounded" 속성은 부트스트랩4 에서 이미지 테두리를 자동으로 라운딩해주는 속성이다. 기타 상세한 세부 설명은 아래의 포스팅 글을 추천한다. https://aboooks.tistory.com/290

마우스로 화면을 스크롤할때 아래의 가려진 항목들이 나타날때 멋지게 애니메이션 되면서 화면에 노출시키는 아주 강추하는 프레임워크 소스를 소개하고자 한다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 사용법과 소스도 위 페이지에 들어가면 살펴 볼수 있는데 간략히 설명하면 다음과 같다. 1 2 cs 본문 코드내용에는 1 ... cs 위 소스에서 data-aos 라는 속성값에 원하는 애미메이션 값들을 종류별로 넣으면 된다. data-aos="fade-left" data-aos="flip-left" data-aos="fade-up..

(1) 그라데이션 배경색 예제 1 1 2 3 4 5 6 7 8 9 .banner100 { width:100%; height:300px; background: linear-gradient(to bottom, #405166 0%,#656f6f 100%); } Colored by Color Scripter cs (2) 그라데이션 배경색 예제 2 1 2 3 4 5 6 7 8 9 .banner102 { width:100%; height:300px; background-image: radial-gradient(50% 176%, #253854 80%, #061922 100%); } Colored by Color Scripter cs (3) 그라데이션 배경색 예제3 - 눈내리는 풍경 1 2 3 4 5 6 7 8 9 1..

무료 아이콘 쓸때 아주 유용한 폰트오썸 ( FontAwesome ) 을 이용해 보자. 최근에는 FontAwesome5 버전이 나왔다. https://fontawesome.com/ Font Awesome fontawesome.com 안에 들어가서 상단에 icon 메뉴로 들어간다. free 버전과 유료버전을 선택하여 각각 이용해 볼 수 있다. 나는 일단 관련 css 라이브러리를 다운받아서 이용해 보도록 하겠다. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 다운받으면 압축파일로 되어 있는데, 이를 풀도록 하자. 위에서 fontawesome-free-5.12.0-web 폴더를 내호스팅 root 에 올리고 폴더명..

부트스트랩을 이용하면 아주 간편하게 모달창을 띄울수 있다. 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..