ºÎÆ®½ºÆ®·¦¿¡ ´ëÇؼ ±âÃʸ¸ ¾Ë¾Æº»´Ù.
ºÎÆ®½ºÆ®·¦À̶õ?
ºÎÆ®½ºÆ®·¦Àº ¹ÝÀÀÇü, ¸ð¹ÙÀÏ À¥ÇÁ·ÎÁ§Æ® °³¹ßÀ» À§ÇÑ HTM, CSS, JS ÇÁ·¹ÀÓ¿öÅ©ÀÌ´Ù.
ÇÁ·¹ÀÓ¿öÅ©¶õ Çѱ¹¾î·Î µµ¿ì¹Ì·Î ÄÚµùÀÇ ¾çÀ» ÁÙ¿©ÁØ´Ù.
ºÎÆ®½ºÆ®·¦ ±âº» ±¸Á¶
<!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>ºÎÆ®½ºÆ®·¦ ±âº» ±¸Á¶</title>
<!-- ºÎÆ®½ºÆ®·¦
-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<!-- 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>
<h1>Hello, world!</h1>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
ºÎÆ®½ºÆ®·¦Àº ´Ù¿î·Îµå ¹Þ¾Æ¼ »ç¿ëÇϰųª À¥¿¡ ¸µÅ©¸¦ Æ÷ÇÔÇؼ »ç¿ë ÇÒ¼ö ÀÖ´Ù.
ºÎÆ®½ºÆ®·¦ÀÇ CSS¸¦ Æ÷ÇÔÇÑ´Ù.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
Á¦ÀÌÄõ¸®¿Í ºÎÆ®½ºÆ®·¦ JS¸¦ Æ÷ÇÔÇÑ´Ù.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
ºÎÆ®½ºÆ®·¦À» »ç¿ëÇϱâ À§ÇÑ Áغñ°¡ µÇ¾ú´Ù.
navBar ¸¸µé±â ¿¹¸¦ »ìÆì º»´Ù.
navBar ¸¸µé±â ¿¹
1. ºÎÆ®½ºÆ®·¦ ȨÆäÀÌÁö¿¡¼ navBar¸¦ °Ë»öÇÑ´Ù.
https://getbootstrap.com/docs/4.5/components/navbar/
2. Á¦ÀÏ À§¿¡ ÀÖ´Â ¿¹Á¦¸¦ º¹»çÇÑ´Ù.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#" tabindex="-1"
aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
½ÇÇàÇÏ¸é ´ÙÀ½°ú °°´Ù.
3. ÇÊ¿ä¾ø´Â ¿ä¼Ò´Â »èÁ¦ÇÑ´Ù.
Search ºÎºÐ <form class="form-inline my-2 my-lg-0"> ¿ä¼Ò¸¦ »èÁ¦ÇÑ´Ù.
Dropdown ºÎºÐ <li class="nav-item dropdown"> ¿ä¼Òµµ »èÁ¦ÇÑ´Ù.
Disabled ºÎºÐ <li class="nav-item"> ¿ä¼Òµµ »èÁ¦ÇÑ´Ù.
»èÁ¦Çϸé html ÄÚµå´Â ¾Æ·¡¿Í °°´Ù.
<nav class="navbar navbar-expand-lg navbar-light
bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</div>
</nav>
4. navBar Ä®¶ó¸¦ º¯°æÇÑ´Ù.
https://getbootstrap.com/docs/4.5/components/navbar/¿¡¼ Color schemes ´Ü¶ô¿¡¼ ÇÊ¿äÇÑ Ä®¶ó¸¦ º¹»çÇÑ´Ù.
º¯È¯Àü
<nav class="navbar navbar-expand-lg navbar-light bg-light">
º¯È¯ÈÄ
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
½ÇÇà)
5. navBar ¸µÅ©ÀÇ hover½Ã ÅؽºÆ® Ä®¶ó¸¦ º¯°æÇÑ´Ù.
navBarÀÇ ¸µÅ© hover½Ã ÅؽºÆ® Ä®¶ó¸¦ ÁÖȲ»öÀ¸·Î º¯°æÇØ º¸ÀÚ.
<style>
.navbar-dark .navbar-nav .nav-link:hover {
color: orange;
}
</style>
</head>
<body>
½ÇÇà
´Ù¿î·Îµå:
bootstrap_base.html
bootstrap_test.html
ÂüÁ¶)
ºÎÆ®½ºÆ®·¦ ±âº» ±¸Á¶
https://getbootstrap.kr/docs/5.3/getting-started/introduction/
ºÎÆ®½ºÆ®·¦ ¿¹Á¦
https://getbootstrap.com/docs/4.3/examples/
https:
//hanamon.kr/ºÎÆ®½ºÆ®·¦-bootstrap-À̶õ/
CSS¿¡¼ ´ÙÁß ¼±ÅÃÀÚ ±ÔÄ¢
https://padahkim.tistory.com/34
|