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

Line, Area, Bar, Donut 차트를 제공하는 morris.js 입니다. http://morrisjs.github.io/morris.js/ 페이지에 접근시 간단한 샘플을 볼 수 있으며, 샘플 아래쪽에 시작하는 방법을 확인 할 수 있습니다. 상단 메뉴를 통해 자세한 설명 페이지로 이동이 가능 합니다.

Css의 요소중 Grid만 이용하여 만들어진 탭메뉴입니다. 파일을 다운받아 압축파일을 열어보시면 index.html 파일과 style.css 파일로 구성이 되어 있습니다. css root 변수로 이루어져 있으며 그리드로 만들어진 탭메뉴입니다. 자바스크립트를 이용하지않고 css로만 이루어진 탭메뉴이며 가볍게 쓰실수 있을것 같습니다.

인풋에 포커스가 되면 위와 같이 변경됩니다. ss 수정만으로 간단하게 디자인 변경이 가능합니다. 해당 사이트에서 소스확인 및 소스 다운로드가 가능합니다. 또는 해당 게시글 첨부파일로 다운로드 받으셔도 됩니다.

라디오 버튼 선택시 선택되는 점이 부드럽게 슬라이딩 되어 선택됩니다. css로만 사용하여 만들어낸 효과이며, 카드 ui 형태로 심플하게 디자인 되어 있어 해당 기능을 쉽게 배워보실 수 있습니다. [ radio button 기본구조 ] [ 선택 표시 동그라미 핵심 소스] - html -css

css를 이용한 줄배경 소스를 확인할 수 있습니다. 해당 사이트에서 패턴별 css를 확인할 수 있습니다. 소스를 수정하여 라인의 굵기, 색상, 방향 등을 쉽게 변경할 수 있습니다. 배경이미지를 만드는 번거러움 대신에 간단한 css로 배경을 삽입할 수 있습니다.

웹페이지에 표시되는 요소에 마우스를 올리면 애니메이션 테두리를 표시해주는 jquery 플러그인입니다. 마우스로 글자위에 마우스를 올려보면 글자의 테두리가 화면에 표시되면서 몇가지 애니메이션으로 표시가 됩니다. 수평과 수직으로 테두리가 생기는 예제와, 그에 맞는 각각의 샘플 소스코드입니다. 이미지에 테두리를 표시하는 예제입니다. 그 외에도 몇가지 더 예제가 있습니다. 애니메이션이라서, 정지된 그림이나, 글로는 표현이 한계가 있네요. 데모페이지를 보면서 마우스를 한번씩 올려보는게 어떤 효과인지 확인이 훨 빠를것 같네요.

vue.js를 이용하여 만들어진 입체적인 카드 입력폼을 확인해보세요. 카드번호, 사용자, 년도 등 정보를 입력하면 상단에 있는 입체 카드에도 입력된 정보가 반영됩니다. [ 카드 번호 입력 ] [카드 사용자 입력] [카드 유효기간 입력] [카드 CVV 번호 입력] 카드 뒤에 있는 CVV 번호를 입력시 카드 뒷면까지 보여주는 등 각 정보를 입력시 직관적으로 정보가 입력되는 부분을 표시해주어 카드 정보 입력을 도와줄 수 있습니다. ^^

SVG를 이용한 아이콘 버튼 효과 밋밋한 버튼 대신 사용하면 좋을 SVG를 이용한 귀여운 아이콘 버튼입니다.

마우스 오버시 이미지를 변경하는 Javascript 이미지 영역에 마우스 오버시 이미지가 변경되는 Javascript 소스 첨부된 Javascript 소스내 이미지경로를 지정할 수 있으며, 변경시 합성되는 이미지 경도 지정할 수 있습니다.

다운로드 받은 파일의 압축을 해제한 후, 웹서버에 업로드한뒤에 웹브라우저로 해당 페이지에 접속해보면 아래 그림과 같은 화면이 열리는게 확인이 됩니다. examples/simple.html 이란 링크를 클릭해보면 지도를 이용해서 위치정보를 알아낸 뒤에 위치정보를 활용하는 몇가지 예시를 확인해볼수 있습니다. 입력박스를 클릭해보면 지도가 표시되고, 마우스를 이용해서 지도를 움직인 후에, 원하는 위치를 클릭을 해보면 클릭된 위치의 위치정보(위도,경도) 를 입력박스에 입력을 해주거나, 웹페이지에 표시하는 몇가지 예제들을 확인해볼수 있습니다. 예제와, 해당 예제를 이용하기 위해서 작성된 소스코드의 확인이 가능합니다. 웹사이트에서 접속자들로부터 필요한 위치(위도,경도)에 대한 정보를 입력받거나, 정보를 제공하기 위해..