Total: Today: Yesterday:
연구소/부트스트랩 | 2016. 4. 6. 16:30 | Posted by 자수씨

원래는 크롬 익스텐션의 특정 기능을 알아보기 위해 node.js 를 찾아보다가 npm, bootstrap, angularjs, gulp... 끊임없이 쏟아져나오는 오픈소스들에 경악을 금치못하였으나... 이내 정신을 차리고 하나씩 샘플을 만들어보기로 했다.


이번에는 부트스트랩(bootstrap)을 도전한다.



부트스트랩은 사전적의미로 



부트스트랩이란 「그 자체의 동작에 의해서 어떤 소정의 상태로 이행하도록 설정되어 있는 방법, 예를 들면, 최초의 수개의 명령에 의해서 그것에 계속해서 모든 명령을 입력장치에서 계산기내에 패치(fetch) 할 수 있도록 하는 방법」이라 정의되고 있다. 즉, 프로그램을 입력하는 방법의 하나이며, 최초에 명령을 읽어 들이기 위한 간단한 조작을 하면 계속해서 명령을 패치(fetch) 하는 것을 순차로 하여 최종적으로는 완전한 프로그램이 기억장치내에 수용()되도록 하는 방법을 말한다.

[네이버 지식백과] 부트 스트랩 [Bootstrap] (정보통신용어사전, 2008. 1. 15., 일진사)



라고 하는데... 아 나이가 들어서 그런지 정리가 안된다. 그냥 HTML, CSS, JavaScript 의 base 역할을 해주는 프레임워크라고 생각하면 될듯...



부트스트랩은 친절하게 한글 페이지를 운영한다. 



시작하기를 참조하여 기본 템플릿을 띄워보았다.



### html

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->

<title>UWO 스터디</title>


<!-- 합쳐지고 최소화된 최신 CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 기본템플릿 -->

<link rel="stylesheet" href="css/starter-template.css">


<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->

<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>


<!-- 이 곳에 예제를 작성합니다. -->


<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</body>

</html>




아무것도 나오지 않는다...


최소한 네비게이션이라도 설정해야 감이 올 듯 하다.



### html

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->

<title>UWO 스터디</title>


<!-- 합쳐지고 최소화된 최신 CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 기본템플릿 -->

<link rel="stylesheet" href="css/starter-template.css">


<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->

<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

aria-expanded="false" aria-controls="navbar">

<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span

class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">UWO 스터디</a>

</div>

<div id="navbar" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>


<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"

aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li class="dropdown-header">Nav header</li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul></li>

</ul>

</div>

<!--/.nav-collapse -->

</div>

</nav>


<div class="container" role="main">

container!!

</div>

<!-- /.container -->


<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</body>

</html>






여기서부터 시작해서 하나씩 추가해보면 활용할 방법이 보이겠지?