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

안녕하세요 HappyCGI 입니다. 이번에 소개해 드릴 자료는 js-graph 입니다. License : Apache License V2.0 압축을 해제 하시면 아래의 폴더 구조를 가지고 있습니다. sf-homepage 에 보시면 gettingstarted.html 파일이 있으며 가장 기본샘플 파일 입니다. js-graph 는 레이어를 드래그&드랍하여 위치를 이동시킬 수 있습니다. 레이어 끼리 연결을 시켜서 관계를 보여줄 때 사용하면 좋을듯 합니다. 원본 사이트에는 div 포지션을 보여주는 기능은 없지만 수정해 div의 포지션을 보여줄 수 있도록 조금 수정해 두었습니다. 해당 폴더의 test2.html 을 보시면 아래의 설명 이미지를 보여주기 위해 사용한 샘플 HTML 파일도 넣어 두었습니다. javas..

라이센스 : MIT 라이센스 툴팁, 레이어, 공지, 이미지레이어 등의 간단하면서 홈페이지 구성함에 있어 꼭필요한 jquery를 모아둔 플러그인입니다. 데모사이트에서 아래와같은 예제와 함께 소스도 제공해주기때문에 쉽게 접근이 가능합니다. 아래와같이 한눈에 데모소스를 확인할수있어 쉽게 접근이 가능합니다. 또한 위의 첨부파일을 확인해보면 알수있듯이 위의 데모사이트에서 제공해주는 것외에 여러 예제를 직접 만들어둔 소스가 있으므로 해당 소스파일을 직접 참고하셔도 좋을것같습니다^^

최근 대형 포탈사이트등 조금 크다하는 사이트들은 사이트의 로딩속도를 올리기위해서 레이어로 홈페이지를 만들곤 합니다. 2단배열 혹은 3단배열 홈페이지를 레이어로 레이아웃을 만들기를 알아보도록 하겠습니다. 요약 상단 좌측 부분 중앙부분 우측 부분 하단부분 레이어는 좌표값과 정렬따위는 없습니다. 모두 부모레이어에 속성되며, 좌에서 우로 정령을 해주는값이 상단의 파란색 칠한 값 float:left; 며, 그 아래에 오는 하단부분은 그 아래로 내리는 clear:both; 을 사용하면 내려갑니다. 레이어의 중앙정렬은 text-align:center; ps. 레이어를 만들때 특정위치에 2개의 레이어 혹은 그이상의 레이어를 합쳐서 보여줄때 사용자의 환경에 따라 레이어의 위치가 바껴버리면, 곤란하죠. 이럴때는 레이어의 ..