<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 샘플코드5</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>네비게이션바</h1>
<br><br>
<div>
<h1>Responsive web Page</h1>
<p>부트스트랩을 이용한 반응형 웹페이지 제작</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="default navbar-default">
<ul class="navbar-nav">
<li><a class="nav-link">공지사항</a></li>
<li><a class="nav-link">갤러리</a></li>
<li><a class="nav-link">방명록</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collpaseNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collpaseNavbar">
<!-- navbar-collapse는 일정이상으로 작아졌을때만 사라진다 -->
<!-- navbar는 ul li로 만들어진 메뉴바에만 사용할수있다. -->
<ul class="navbar-nav">
<li class="nav-link"><a>공지사항</a></li>
<li class="nav-link"><a>갤러리</a></li>
<li class="nav-link"><a>방명록</a></li>
</ul>
</div>
</nav>
</body>
</html>- 헤드에 들어간 링크들은 부트스트랩을 이용할때 반드시 필요하니 꼭 로드해둬야 한다
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> - class명으로 네비게이션 바의 형태를 만든다
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="default navbar-default"> <ul class="navbar-nav"> <li><a class="nav-link">공지사항</a></li> <li><a class="nav-link">갤러리</a></li> <li><a class="nav-link">방명록</a></li> </ul> </div> </nav>- 백그라운드나 네비게이션바의 색상을 정할수 있지만 실제 이 클래스 명으로 적용된 스타일값으로
float :leftposition:relative가 적용되었다.
- 백그라운드나 네비게이션바의 색상을 정할수 있지만 실제 이 클래스 명으로 적용된 스타일값으로
- class명을 활용하여 span코드로 아이콘을 작성하고 누르면 메뉴가 나올수 있게 한다
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collpaseNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collpaseNavbar"> <!-- navbar-collapse는 일정이상으로 작아졌을때만 사라진다 --> <!-- navbar는 ul li로 만들어진 메뉴바에만 사용할수있다. --> <ul class="navbar-nav"> <li class="nav-link"><a>공지사항</a></li> <li class="nav-link"><a>갤러리</a></li> <li class="nav-link"><a>방명록</a></li> </ul> </div> </nav>- data-toggle명으로 버튼을 누르면 닫히는 코드를 입력한다 (collapse)
- 펼쳐보일 메뉴바를 div안에 넣고 id를 설정한뒤 메뉴바를 펼칠 button에 data-target에 아이디를 넣어주면 펼치고 닫는 기능이 완성된다.
hello world