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

웹페이지에 표시하려고 하는 내용을 편집하기 위해서, 편집용 화면과, 실제 표시되는 화면이 분리되어 있는게 아니라, 웹페이지에 표시되는 내용을 보면서 바로 편집하는 인터페이스로 구현된 WYSIWYG 입니다. 에디터의 데모를 확인하는 방법은 압축파일을 해제한 뒤에, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면에 표시되는 텍스트를 선택해보면 선택된 부분의 텍스트에 서식을 조절할 수 있는 기능이 있습니다. 텍스트를 추가할 부분을 클릭해서 단어들을 타이핑하면 화면에 바로 반영이 되게 됩니다. 몇몇가지 기본으로 제작되어 있는 테마를 지정할 수 있으며, 테마를 변경해보면 편집하기 위한 인터페이스들의 모양이 약간씩 달라집니다. 설치법은 https://yabwe.github.io/m..

국가교통정보센터에서 제공하는 공사, 사고정보 OpenAPI 입니다. 교통사고, 공사, 기상, 재난, 기타돌발 상황을 알려주고 도로유형 또한 고속도로, 국도, 지방도로, 시군도로 분리 하여 표기 됩니다. 위치정보는 위도, 경도 좌표로 제공이 되므로 지도와 연계하여 이용을 할 수 있습니다. https://www.its.go.kr/opendata/opendataList?service=event 위 페이지를 통해 요청주소와 요청변수, 출력결과 필드 확인이 가능 합니다. https://openapi.its.go.kr:9443/eventInfo?apiKey=test&type=all&eventType=all&minX=126.800000&maxX=127.890000&minY=34.900000%20&maxY=35.100..

해양환경공단에서 제공하는 해양환경측정망 근해 관측서비스 OpenAPI 입니다. 한국 근해의 각종 관측정보를 제공 합니다. (각 관측위치별 날씨, 수온, 염분등의 정보 제공) https://www.data.go.kr/data/15059975/openapi.do 위 페이지로 접속을 하여 요청주소와 변수, 출력결과를 확인이 가능하고 활용신청 버튼을 통해 실제 이용을 할 수 있습니다.

다운로드 받은 파일의 압축을 해제한 뒤에, index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 테이블의 각 컬럼의 제목을 클릭하면, 컬럼에 표시되는 데이터들을 정렬이 되어서 화면에 표시가 됩니다. 사용법은 아래와 같습니다. 표형태로 데이터를 화면에 표시하는 화면에서, 데이더틀을 정렬해서 보여주기 위해서 데이터베이스에 실행하는 SQL문의 ORDER BY 구문을 이용하지 않더라도 가능해지게 되는 상황이 생길수도 있겠네요.

CSS로만 이루어진 셀렉트 박스입니다. 자료는 해당 데모사이트에서 하단의 export 버튼을 눌러 다운 받으실 수 있습니다. 사용자 데모도 https://codepen.io/aron-tw/pen/MeMKON 에서 확인하실 수 있습니다^^

사이트에서 배경을 제거 하고 싶은 이미지를 올리기만하면 빠른시간안에 배경을 제거 및 수동으로 조정할 수 있는 사이트입니다. 이미지 배경날리기가 이제 한층 쉬워지겠네요.

아래와 같이 에니메이션 효과가 있습니다. css로 구현이 되어 있어 디자인 변경이 용이 합니다. 년도 텍스트 및 수평바 그래프 에니메이션 효과도 css로 쉽게 수정이 가능합니다.

아래와 같이 에니메이션 효과가 있습니다. css와 svg로 구현되어 있어 쉽게 크기 및 디자인 수정이 가능합니다. 에니메이션 효과도 css를 이용하여 변경이 가능합니다. 해당사이트 또는 첨부파일을 다운로드 받아 소스를 확인할 수 있습니다.

SuperMarquee는 기존의 선택 윤곽 스크롤 효과와 유사한 매우 미학적인 애니메이션 콘텐츠 스크롤러를 제공하는 JavaScript 플러그인입니다. 이미지가 포함되지 않은 순수한 CSS 및 JS로 만들어졌으며 반응이 빠르고 성능이 뛰어납니다. Vanilla JavaScript, jQuery 및 웹 구성 요소와 함께 작동합니다. 아래는 SuperMarquee 특징 입니다. - 매우 부드러운 전환 효과. - Star Wars Intro Text 효과를 만드는 데 도움이 되는 3D 변형. - 수평 및 수직 스크롤. - 사용자 정의 애니메이션 속도. - 호버에서 자동 재생 및 일시 중지. - RTL 지원. 라이센스 : GPLv3 사용법 안내 입니다. 1. 라이브러리 호출 2. 콘텐츠 작성 3. play

Swiper는 하드웨어 가속 전환 및 놀라운 기본 동작을 갖춘 가장 현대적인 무료 모바일 터치 슬라이더입니다. 모바일 웹사이트, 모바일 웹 앱, 모바일 네이티브/하이브리드 앱에서 사용하기 위한 만들었습니다. 모든 플랫폼과 호환되지 않으며 최고의 경험과 단순성을 제공하기 위해 최신 앱/플랫폼에만 초점을 맞춘 최신 터치 슬라이더입니다. 라이센스는 MIT 라이센스 입니다. 기본적인 사용방법 1. 라이브러리 호출 2. 슬라이드 콘테이너 추가 3. 슬라이드 초기화 및 실행 위의 3가지 과정으로 가장 심플한 슬라이더를 호출 할 수 있습니다. 그 외에도 demos 폴더를 보면 많은 데모 자료가 있으니 하나씩 실행해 보는 것도 재미가 되네요. 단, 데모 자료는 모두 NPM 방식을 기준으로 작성되어 있습니다. NPM 방..