부트스트랩

-단점 : 변형이 어렵다.

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

 Bootstrap 시작하기 - 페이지 top에 적용 해 주어야 한다.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

를 script아래에 붙여넣기

<meta name="viewport" content="width=device-width, initial-scale=1">

도 메타데이터 아래에 추가

하면 부트스트랩을 쓸 수 있다.

+) Containers  에 대한설명

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

.container

.container-fluid

1.

메뉴바 추가

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

2.

아이콘 추가 등이 가능하다.

https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

3.

<div class="container-fluid">

<h2><span class="glyphicon glyphicon-th-list"></span>게시판 목록</h2>

<table class="table table-hover">

...

div class="container"를 만들고

table class="" 으로 표 모양설정 가능

<thead></thead>

이것은 행 자체를 구분짓는 역할을 한다.

<tbody></tbody>로 닫아줌(단 if문으로 분기되면 새로 열어줘야 오류가 안남)