티스토리 뷰
bootstrap은 무엇일까?
웹사이트를 만들 때 항상 사용하는 것이 bootstrap입니다. 그 이유는 제가 디자인을 잘 못하기 때문이고, 사용하기 편리하다는 점입니다. 때로는 디자인이 모두 비슷해서 지루한 감이 없지 않아 있지만, 사용자화를 한다면 완전히 다른 디자인으로 탈바꿈할 수도 있습니다. bootstrap은 미리 정의된 css 모음이라고 할 수 있을까요? 그냥 편리하게 태그에 클래스명만 넣어주면 깔끔한 디자인의 웹사이트가 완성되니까요. 또한, 모바일을 우선으로 하는 반응형 웹 디자인을 만들 수 있게 해줍니다.
bootstrap을 사용하기 위해서는 먼저 관련 파일들이 필요합니다. boostrap.css, bootstrap.js 입니다. 또한 jquery 파일도 필요합니다. 해당 웹사이트에 방문하면 관련된 사용법이 나와 있습니다.
웹사이트: http://getbootstrap.com/
현재 최신 버전은 4.x 대 입니다. Get started 버튼을 누르거나 화면 아래에 보면 설치 관련된 파일들을 링크할 수 있는 주소들이 나옵니다. 참고로 CDN은 컨텐츠 전송 네트워크라는 뜻으로 전 세계에 서버가 분산되어 있어서 어디에선가 요청이 들어와도 빠르게 전송을 해줄 수 있는 플랫폼입니다.
스크린샷에는 주소가 잘려나와서 적어보겠습니다. 아래의 링크들은 bootstrap을 사용하는데 필수 링크입니다.
설치 필수 링크
CSS Only
bootstrap 의 css를 담고 있는 파일입니다. 이 파일이 있어야 class 들을 정의해서 모양을 낼 수 있습니다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
JS, Popper.js, and jQuery
bootstrap의 자바스크립트 파일과 jquery 파일입니다. bootstrap에서 동적인 모양과 움직임을 표현할 때 필요합니다.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
설치 링크 위치
그럼 이 파일들을 어디에 위치시켜야 작동할까요?
대부분의 웹사이트는 헤더와 푸터를 가지고 있습니다. 페이지마다 내용은 달라도 헤더와 푸터는 비슷하기 때문입니다. 물론, 아닌 사이트도 있을 수 있습니다.
CSS 링크는 헤더 부분의 <head> 태그 안에 넣으면 됩니다. 나머지 자바스크립트 파일들은 <body> 태그 하단에 넣으라고 나와 있습니다. 그러므로 </body> 태그 전에 삽입합니다.
이렇게 구성을 하게 되면 기본적인 bootstrap 사용환경이 만들어졌습니다. 웹사이트에 있는 문서들을 읽어 보면서 예시들을 따라하면 간단하게 모양을 낼 수 있습니다.
각 클래스들의 구조와 사용법을 익히면 디자인을 잘 모르더라도 볼 만한 사이트가 완성됩니다.