목차
블로그를 열심히 작성하다보니 글과 그림 배치나 서식 등에 대해서 신경쓴다면 더 많은 방문자 수를 볼 수 있지 않을까라는 생각을 했다. 그래서 html,css 공부를 시작했다. 그런데 나같은 공대 찌질이가 디자인을 했다가는 99년도 교수님 PPT가 될 것이기 때문에 구글링을 하다가 "부트스트랩" 이라는 좋은 웹페이지 개발 도구를 발견했다. 이를 웹페이지 개발에 많이 사용되고 있는 Atom 에디터에서 이용해보기로 했다.
① Bootstrap
☞ 다운로드
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
부트스트랩 홈페이지에 들어가서 다운로드 버튼을 누르면 CSS, JS 파일을 다운로드 할 수 있다. 부트스트랩에서 제공하는 것을 편하게 사용하기 위해서 필수적으로 받아야하는 파일이다.
다운로드한 ZIP파일을 풀면 css , js 두 폴더가 나온다. 이 파일은 Atom Editor를 다운로드하고 프로젝트 폴더 안에 넣어줄 것이다.
② Atom Editor
☞ 다운로드
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
제대로 다운로드가 완료되면 위와 같은 메인 화면이 나온다. 작성한 HTML 파일을 바로 확인할 수 있도록 마켓에서 패키지를 하나 설치해주어야한다.
환경설정에 가면 왼쪽 탭 최하단에 패키지를 설치할 수 있는 install 탭이 있다. html preview라고 검색하면 맨위에 harmsk라는 개발자가 만들어주신 패키지가 있다.
설치가 완료됐다!
③ 프로젝트 만들기
아까 받아놓은 위 두 폴더를 프로젝트에 넣어주어야한다.
바탕화면에서 폴더를 하나 만들어주고 그 안에 넣는다.
Atom Editor로 돌아가서 프로젝트 폴더를 열어주고 상단 메뉴바 중 패키지 탭 맨 아래의 Enable Preview를 눌러 활성화하면 HTML 파일을 작성할 때 즉각적으로 변경된 내용을 볼 수 있다.
☞ 부트스트랩에서 제공하는 스타터 템플릿
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
</body>
</html>
※ 결과
※ 예제 다운로드
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
