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

연혁 페이지 같은 타임라인 형태의 페이지에 적용할만한 상하 슬라이더 우측 연도 클릭시 상하로 슬라이드 됩니다. 브라우저가 일정크기 이하로 작아질 경우 위와 같이 좌우 슬라이드 형태로 변경되는 반응형입니다.

BBC 뉴스사이트에 있는 타임라인형태의 메뉴를 만들수 있는 자료입니다. ol 과 li 태그를 기본으로 before, after의 가상선택자를 이용한 디자인입니다. before를 이용하여 좌측의; 붉은색라인을 만들어주며 li:before { content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; } after를 이용한 백그라운드로 원형의 이미지를 호출하여 이미지와 같은 형태로 만들수 있습니다. li:after { content: ''; background-image: url("http://www.happycgi.com/program/upload/happy_config/info_l..

jQuery 를 이용한 타임라인을 생성하는 자료를 소개합니다. 소스코드를 다운로드 하시면 폴더내에 index.html 파일이 있고 바로 실행되는 화면을 볼 수 있습니다. 그래서 간단한 구동방식과 옵션에 대해서 설명을 드립니다. 1.Script, Css 를 호출 하세요. 2.레이아웃을 담당하는 구조는 변경하시면 안됩니다. 기본 구조를 참고하여 timeline__content 파트를 추가하거나 삭제하는 정도의 작업만 하셔야 합니다. (

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 moment.min.js 파일 링크를 걸어줍니다. 2. 원하는 스타일의 아이콘형 글꼴을 선택하여 링크를 걸어줍니다. 3. 타임라인을 표시할 레이어를 추가합니다. 4. 타임라인에 표시할 이벤트들을 정의합니다. 입력할 데이타 형식은 주석을 참고하세요. 5. 타임라인 플러그인을 호출합니다. (기본값) 5-1. 이벤트가 없는 날짜를 표시할 지 여부를 결정할 수 있습니다. (기본값 null) 5-2. 옵션으로 아이콘 클래스를 정의할 수 있습니다. 5-3. 날짜 출력 형식을 수정할 수 있습니다. 5-4. 특정 날짜를 지정하여 이동시킬 수 있습니다 - 작동 예제

jQuery Timeline Plugin 입니다. jQuery 를 이용한 Timeline 을 구성하는 플러그인 입니다. 여러개의 샘플 형식을 제공하는데요. 약력에 사용하면 좋을듯 합니다. ^^ 이건 연혁에 사용해도 괜찮을듯 합니다.