웹솔루션개발 26년 노하우! 해피CGI의 모든것

Floating UI는 Tooltip, Popover, Dropdown Menu, Context Menu, Select Box 등 화면 위에 떠 있는 다양한 UI 요소의 위치를 자동으로 계산하고 배치해주는 최신 JavaScript 라이브러리입니다. 기존 Popper.js의 후속 개념으로 개발되었으며 최근 React, Vue, Vanilla JavaScript 환경에서 많이 사용되고 있습니다. 스크롤 영역 안쪽이나 모바일 화면, 브라우저 가장자리 등 복잡한 환경에서도요소가 화면 밖으로 잘리지 않도록 자동으로 위치를 보정해주며 Tooltip, Dropdown, Popover 같은 인터페이스를 매우 안정적으로 구현할 수 있습니다. 특히 화면 충돌 감지(Collision Detection), 자동 방향 변경(F..

마우스 오버 시 아이콘이 나타나는 디자인의 드롭다운 메뉴입니다.다양한 사이트에 적용하기에 유용합니다.  HTML 구조                                  Facebook                                                       CSS 소스@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); *,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;} :root {  --bg-color: #222429;  --primary-bg-color: #333740;  --primary-color: #..

스크립트 없이 CSS 만으로 드롭다운 효과를 줄 수 있는 소스입니다. 위와 같이 소스를 생성했을 경우 요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자가 만들어 집니다. https://www.w3schools.com/css/css_dropdowns.asp 해당 사이트를 참고하시면 드롭다운 메뉴, 오른쪽 정렬된 드롭다운 콘텐츠, 드롭다운 이미지를 자세히 확인할 수 있습니다.

* jquery Dropdown 가볍게 이용가능한 jquery Dropdown 플러그인 입니다 지원 브라우저는 익스플로러8이상 , 크롬, 사파리, 파이어폭스 브라우저를 지원하며 jquery 버전은 1.4 이상 지원합니다 * License MIT License * 설치방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드합니다 적용하고자 하는 html 문서를 열어 head 부분에 js , css 를 호출합니다 위와 같은 선택박스가 출력되게끔 아래와 같이 html 과 script 를 삽입합니다 그리고 아래와 같이 함수 호출을 통해 원하는 내장기능을 호출할 수 있습니다 위와 같은 구문을 웹브라우저로 실행하면 아래와 같이 선택된 영역을 따로 표기도 가능합니다 첨부된 압축파일안에 index.html 파일..