티스토리 뷰

SW 개발/웹

Bootstrap 3 기본 뼈대 페이지 만들기

지단로보트 2014. 8. 16. 04:06

JavaScript 공부, Bootstrap과 함께 시작해보자

JavaScript를 공부하는데 있어 가장 중요한 것은 자주 많이 코드를 작성해봐야 한다는 것이다. 하지만 Hello, World! 문구 하나를 찍더라도 화면에 출력하는 방법은 천차만별인 법이다. 나는 JavaScript를 처음 공부하는 사람에게 Bootstrap을 기반으로 코드를 작성할 것을 추천한다. 마치 Java 입문시 콘솔보다는 Swing을 이용하여 Hello, World!를 화면에 출력하는 것과 같은 이치이다.

기본 뼈대 페이지 작성하기

Bootstrap 3 기반의 기본 뼈대 페이지는 아래와 같다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>
  <link href="https://paypal.github.io/bootstrap-accessibility-plugin/plugins/css/bootstrap-accessibility.css" rel="stylesheet"/>
  <style>
    * {
      font-family: 'Malgun Gothic' !important;
    }
  </style>
</head>
<body>
  <!-- HTML -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
  <script src="https://paypal.github.io/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.min.js"></script>
  <script>
    // JavaScript
  </script>
</body>
</html>
  • 문서의 구조는 전형적인 HTML5 구조이다. 문자셋은 UTF-8이기 때문에 파일 저장시 UTF-8로 저장해야 한글이 깨지지 않는다.
  • jQuery, Bootstrap, Bootstrap Accessibility Plugin이 순서대로 기본 셋업에 사용되었다. 웹사이트 구축보다는 JavaScript 공부에 초점을 맞추어 서버에서 바로 모든 라이브러리를 로드하기 때문에 별도로 다운로드할 필요가 없다. JavaScript 라이브러리 로드는 문서의 마지막에 로드하는 Lazy Loading 기법을 사용하였다.
  • 기본 글꼴로 굴림보다 가독성이 좋은 맑은 고딕을 사용하였다.


저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함