Home » 웹 표준 -7. 실무 활용 예제

웹 표준 -7. 실무 활용 예제

  • 실제 사이트를 구성할 때 자주 만들게 되는 로그인 화면과 회원가입 화면, 메인 화면으로 구성되어 있으며, 메인 화면에서는 자주 사용하는 라이브러리 몇 가지를 모아 두었다.
  • http://localhost/WebStandardTutorial/index.html -> week4메뉴 -> 실무 활용 예제
  • 위의 주소로 접속 후 week4 -> 실무 활용 예제로 들어가면 예제를 볼 수 있다.
  • id, password는 각각 test@ahope.co.kr / 1234로 되어 있으며, 회원가입은 validation의 체크만 할 수 있으며 실제 가입이 되지는 않는다.

7.1. BootStrap 소개

  • 트위터 부트스트랩은 웹 디자인을 쉽게 하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리이다.
  • html로 웹 페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어진다.
  • 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹 페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손 쉽게 웹 사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있다.

  • 많은 양의 속성 및 사용법들이 있으므로 문서에 기재하는 것보다는 아래 사이트에서 라이브러리의 다운로드 및 사용법을 알 수 있으므로 참고할 것.

    • http://getbootstrap.com/

7.2. DataTables 소개

  • jQuery 플러그인으로 직접 테이블을 디자인하지 않고도 깔끔하면서도 다양한 기능을 가진 테이블을 손 쉽게 만들어 준다.

  • BootStrap과 마찬가지로 아래 사이트에서 라이브러리의 다운로드 및 사용법을 알 수 있으므로 참고할 것.

    • http://www.datatables.net/index

7.3. Google Chart 소개

  • 구글에서 제공하는 간단하게 차트를 그릴 수 있는 Chart API
    • https://developers.google.com/chart/