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

다중으로 열기가 가능한 메뉴 메뉴별로 각각 열기가 가능합니다. 다중으로 열기가 가능합니다. 단일로 열기가 가능한 메뉴 한개의 메뉴만 열기가 가능합니다. 다른 메뉴를 열면 기존의 메뉴가 닫힙니다. 전부 닫기 위해서는 하단 버튼을 클릭해서 전부 닫을수 있습니다. 첨부파일 다운로드 및 해당 사이트에서 소스 확인이 가능합니다.

마우스 오버시 CSS로 구현된 툴팁 출력됩니다. 마우스 오버시 툴팁 에니메이션 효과 및 디자인이 css 만으로 구현되어 있습니다. 첨부파일을 다운로드 받아서 해당 소스 확인이 가능합니다.

css 만으로 구현되어 이미지 작업 없이 색상, 크기 등을 쉽게 변경이 가능합니다. 첨부 파일을 다운로드 받아 소스 확인이 가능합니다.

실제 셀렉트 박스가 아닌 라디오박스를 이용하여 css 만으로 셀렉트 형태로 구현한 셀렉트 박스 디자인 입니다. 옵션이 라디오 박스로 디자인 되어 있습니다. 마우스 방향에 따라 아이콘이 출력되는 방향이 달라서 두개씩 구현되어 있습니다. 선택된 값이 셀렉트 박스처럼 보일수 있도록 디자인 되어 있습니다.

트랜지션 효과와 함께 반응형으로 제작된 테이블입니다. 데모페이지내에서 export버튼을 눌러 파일을 다운받으실 수 있습니다^^

박스의 라인 및 박스 뒷면의 배경색상이 에니메이션 효과 및 광원효과가 있습니다. 박스의 그라데이션 라인이 회전하는 css 및 박스 뒷에 라인에 따라 생기는 광원 효과 css 입니다. 해당사이트 또는 첨부 파일을 다운로드 받아서 소스를 확인 할 수 있습니다.

마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.

가벼운 위지윅 에디터 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한 뒤 example.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 아래 그림 처럼 몇몇가지 테마를 제공해줍니다. ms office 와 유사한 모양으로 만들어놨네요. 마유스를 이용해서 에디터의 크기를 조절할 수 있습니다. 가벼운 만큼 에디터가 가져야 할 필수적인 기능들로만 구현이 되어 있는것 같네요. 소스코드가 HTML태그로는 표시는 안되네요 에디터는 필요하지만, 복잡한 툴들 까지는 필요 없는 상황 에서는 괜찮아보이긴 하네요.

사이트를 패미컴 스타일로 만들수 있는 CSS 입니다. https://github.com/nostalgic-css/NES.css 위의 링크에서 관련을 파일을 받아 적용 하거나 CDN 으로도 사용 가능합니다. https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" /> https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />

색상이 있는 부분이 플립되면서 배경색상 및 텍스트가 변경됩니다. CSS를 수정하여 배경색 및 폰트크기 등을 쉽게 수정할 수 있습니다.