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

JavaScript 를 이용하여 테이블이 여러 요소의 입력박스를 동적으로 생성하는 스크립트 입니다. 라이센스는 MIT 입니다. 압축 파일에 test.html 파일을 만들어서 첨부해 두었습니다. 해제하여 사용하시면 되구요. 조금 더 구성을 다르게 하고 싶거나 옵션 및 콜백을 구성하고 싶다면 아래의 링크를 통해 옵션을 커스텀 하시기 바랍니다. [ 옵션 및 콜백 확인하기 ] 1.CSS 와 기본 JS 호출하기 2.빈 테이블 생성 및 로드 버튼 생성. 3.AppendGrid 호출하기 ( 생성 옵션을 설정한다 생각하시면 편해요 ) 4.기존 데이터를 로딩할 경우 ... 사용하시면 됩니다.

css grid를 이용하여 손쉽게 웹사이트 grid latout 을 잡을 수 있습니다. 샘플 소스에 있는 grid-template-columns: 100px 500px; grid-template-rows: 200px 100px 400px; 와 같이 grid-template-columns, grid-template-rows 프로퍼티를 이용하여 행과 열을 정의할 수 있습니다. 행과 열은 픽셀 단위로 고정 그리드도 만들수 있고, fr 단위 혹은 %단위로 가변 크기를 줘서 유연한 그리드도 만들 수 있습니다.

* Grid to Fullscreen 사진을 확대, 애니메이션 격자형태로 변형하여 보여줄 수 있는 기능을 가진 jquery plugin * 사용방법 첨부된 압축파일을 다운로드 하여 사용할 웹루트 디렉터리에 업로드하고 압축을 해제합니다 그후 아래와 같은 핵심코드들이 삽입되어야 합니다 적용할 html 문서에 샘플로 제공되는 css , js 파일을 선언 이미지 및 설명문구가 들어갈 html 구문을 아래와 같이 작성 하단에 기본 제공되는 js 파일 및 스크립트 선언 애니메이션 효과 관련 스크립트 옵션은 아래와 같습니다 timing - duration : 애니메이션 지속시간 조절할 수 있습니다(숫자형, 초단위) activation : 사진의 애니메이션 움직임 위치를 선정할 수 있습니다(`closestCorner`..

Css 그리드 레이아웃을 이용하여 만들어진 사이트를 모아서 볼수있는 사이트입니다. 자신이 만든 사이트도 제출할 수 있으며 grid 레이아웃을 만들기위해서 float, lnline, inline-block, table-cell등 다양한 코드를 이용하여 만들지만 구성에따라 틀어짐이 발생하기에 다른사람들은 어떻게 만들었는지 참고하기 좋은 곳입니다. 그리드 레이아웃은 아래의 링크를 참고하세요 [그리드 레이아웃]

Grid layout 형태의 소스로 반응형 형태로 제작이되어 있어 PC 및 모바일에서 사용할 수 있는 소스입니다. 상단의 데모버튼을 클릭하면 4종류의 레이아웃 형태를 확인할 수 있습니다. 데모의 형태에 따라서 창이 출력되는 애니메이션종류 색상별 검색 등 다양한 기능들을 확인하실 수 있습니다. http://www.htmldrive.net/items/show/1835/jQuery-plugin-for-better-grid-layouts 위 링크에서 데모확인 및 소스를 다운로드 받으실수 있으며 압축파일에 html소스 및 관련 css/js 파일이 있으니 참고하시길 바랍니다. 사이트 제작에 많은 도움이 되시길 바랍니다.

다양한 형태의 메뉴오버 효과의 디자인을 데모사이트에서 여러종류를 확인하실 수 있습니다. css3 및 첨부에서 제공하는 js를 이용하여 작동을하고 있으며 첨부 파일을 압축해제를 하시면 css/js/메뉴 종류에따른 html 파일을 확인하실 수 있습니다. css3를 이용하여 출력이되고 있는 디자인임으로 최신 브라우저를 이용하여 확인하실 수 있습니다.

그리드(격자) 형태의 슬라이드 배너입니다, 상단 주소에서 소스 및 데모를 확인하실 수 있습니다. css3를 이용하고 있기때문에 ie하위버전에서는 동작을 하지 않습니다. 반응형도 지원하기때문에 다양한곳에서 사용할 수 있을것 같습니다.