BootStrap
13. 디자인 실전
index.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.0">
<title>인덱스를 만들어 보자</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<!-- 본문 -->
<section>
<!-- 슬라이드(캐러셀) 구현 시작-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/slide1.jpg" alt="slide1">
</div>
<div class="item">
<img src="./img/slide2.jpg" alt="slide2">
</div>
<div class="item">
<img src="./img/slide3.jpg" alt="slide3">
</div>
<div class="item">
<img src="./img/slide4.jpg" alt="slide4">
</div>
</div>
<!-- 좌, 우 화살표 (없애고 싶으면 지우셔도 됩니다.) -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<!-- 상품 배치 -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>상품 그리드 레이아웃 <small>(쿠팡 참조)</small></h2>
</div>
</div>
<!-- 새로운 그리드 잡기 -->
<div class="row">
<ul class="col-xs-12 prod-list">
<!-- 첫 줄은 사이즈를 6칸씩 잡겠습니다. (2개씩 배치) -->
<li class="col-sm-6">
<a href="#" class="prod-link">
<img src="./img/box1.jpg" alt="box1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-6">
<a href="#" class="prod-link">
<img src="./img/box2.jpg" alt="box2">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<!-- 하나의 그리드를 완성했다면 다음부터는 차지하는 공간만 다르게 설정. -->
<li class="col-sm-6 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box3.jpg" alt="box3">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-6 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box4.jpg" alt="box4">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-6 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box5.jpg" alt="box5">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-6 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box6.jpg" alt="box6">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<!-- 이번에는 md에서 6칸 sm사이즈에서 12칸-->
<li class="col-sm-12 col-md-6">
<a href="#" class="prod-link">
<img src="./img/box7.jpg" alt="box7">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box8.jpg" alt="box8">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#" class="prod-link">
<img src="./img/box9.jpg" alt="box9">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기<i class="glyphicon glyphicon-menu-right"></i></span>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>form_login.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.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
<style>
.login-form {
margin: 100px auto 0;
float: none;
}
.login-form form {
border-radius: 8px;
padding: 70px 120px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-xs-10 login-form">
<div class="titlebox">
로그인
</div>
<form action="#">
<div class="form-group">
<label for="id">아이디</label>
<input type="text" id="id" class="form-control" placeholder="아이디">
</div>
<div class="form-group">
<label for="pw">비밀번호</label>
<input type="password" id="pw" class="form-control" placeholder="비밀번호">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info btn-block">로그인</button>
<button type="button" class="btn btn-primary btn-block">회원가입</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>form_join.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.0">
<title>폼을 만들어 보자</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<!-- 폼 섹션 -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-9 col-sm-12 join-form">
<div class="titlebox">
회원가입
</div>
<form action="#" method="post">
<div class="form-group">
<label for="id">아이디</label>
<div class="input-group">
<input type="text" id="id" class="form-control" placeholder="아이디(영문 포함 4~12자 이상)">
<div class="input-group-addon">
<button class="btn btn-primary">아이디중복체크</button>
</div>
</div>
<span id="msgid">* 필수 사항입니다.</span> <!-- 아이디 중복 여부 메세지 공간 -->
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input type="password" id="password" class="form-control" maxlength="16" placeholder="비밀번호 (영 대/소문자, 숫자조합 8~16자)">
<span id="msgPw"></span> <!-- 비밀번호 유효성 메세지 공간 -->
</div>
<div class="form-group">
<label for="pw-confirm">비밀번호</label>
<input type="password" id="pw-confirm" class="form-control" maxlength="16" placeholder="비밀번호를 확인해 주세요.">
<span id="msgPw-c"></span> <!-- 비밀번호 확인 여부 메세지 공간 -->
</div>
<div class="form-group">
<label for="hp">전화번호</label>
<div class="input-group">
<input type="tel" id="hp" class="form-control" placeholder="전화번호를 입력하세요.">
<div class="input-group-addon">
<button class="btn btn-primary">본인인증</button>
</div>
</div>
</div>
<div class="form-group">
<label for="addr-num">주소</label>
<div class="input-group">
<input type="text" id="addr-num" class="form-control" placeholder="우편번호" readonly>
<div class="input-group-addon">
<button class="btn btn-primary">우편번호검색</button>
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="기본주소" readonly>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="상세주소">
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-success btn-block">회원가입</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-info btn-block">로그인</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>board_list.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.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 col-xs-12 board-table">
<div class="titlebox">
자유게시판
</div>
<hr>
<form action="#">
<div class="search-wrap clearfix">
<button type="submit" class="btn btn-info search-btn">검색</button>
<input type="text" class="form-control search-input">
<select class="form-control search-select">
<option>제목</option>
<option>내용</option>
<option>작성자</option>
<option>제목+내용</option>
</select>
</div>
<table class="table table-bordered table-hover">
<thead>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>등록일</th>
<th>수정일</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>4</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>6</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>7</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>8</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>9</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
<tr>
<td>10</td>
<td><a href="#">첫글</a></td>
<td>홍길동</td>
<td>~~~~~~~~~</td>
<td>~~~~~~~~~</td>
</tr>
</tbody>
</table>
<div class="text-center clearfix">
<hr>
<ul class="pagination">
<li><a href="#">이전</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">다음</a></li>
</ul>
<button class="btn btn-info">글쓰기</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>board_write.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.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12 write-wrap">
<div class="titlebox">
</div>
<form action="#">
<table class="table">
<tbody class="t-control">
<tr>
<td class="t-title"></td>
<td></td>
</tr>
<tr>
<td class="t-title"></td>
<td></td>
</tr>
<tr>
<td class="t-title"></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>