페이지를 만들기 위해 만들어진 양식, 라이브러리가 많은데
그 중 하나가 부트스트랩이다.
https://getbootstrap.com
사용방법은 이 사이트에서 코드 자체를 직접 다운로드 하는 방법이 있고
CDN 방식인 코드를 통해서 불러오는 방법이 있다.
그 중 CDN 방식을 소개한다.
디자이너가 아니고 개발자가 직접 HTML 코드로 만들면 솔직히 말해서 많이 구리다...
그래서 Bootstrap을 이용하여 미리 만들어진 디자인을 이용해서 html문서를 작성하면 된다.
CDN 방식은 head에 link 태그와 script 태그를 이용해서 불러온다.
페이지 메인화면에서 상단 메뉴바에서 Examples를 눌러보면
스크롤을 내려 Custom components를 보면 미리 만들어져 있는 예제 페이지들을 볼 수 있다.
다시 상단 메뉴의 HOME을 눌러 메인으로 돌아오고 페이지 스크롤을 내려 아래를 보면 다음과 같이 코드들이 있다.
여기서 CDN이라고 적힌 부분의 CSS only와 JS 부분을 복사하여 head에 추가하면 된다.
이와같이 추가하고 꼭 css를 먼저 쓰고 js를 써야한다. 불러오는 순서와 연관되어 있다.
이제 상단 메뉴바의 Documentation을 눌러보자.
위와 같은 페이지가 뜨는데
여기서 원하는 기능들을 불러올 수 있다.
예를들어 왼쪽 리스트의 Jumbotron을 가져오고 싶다면 눌러보자.
위와 같이 예시가 하나 나오고 아래에는 그에 대한 코드가 나온다.
이 코드를 복사하여 body에 붙여넣기 하면 예시와 똑같이 나온다.
기본 제공되는 HTML 코드와 Bootstrap을 이용한 예시를 한번 비교해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Bootstrap js-->
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--css가 무조건 위에 있어야 함, 먼저 로딩되고 js 코드가 필요하기 때문이다.-->
</head>
<body>
<h1>HTML이 제공하는 기본 헤더1 태그</h1>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body>
</html>
위와 같이 문서를 작성하였고 간단하게 h1태그를 사용하였다.
결과는 아래와 같다.
h1 태그를 보면 매우 구리다.
이와같이 Bootstrap에 잘 디자인 된 코드들이 많으므로 유용하게 갖다 쓰자.
https://startbootstrap.com/
위 사이트는 완성된 페이지 코드들을 공유하고 있다.
html_css.zip
