1. 로그인창 만들기
이미 배웠던 버튼, 네비게이션, 레이아웃을 토대로 간단하게 로그인 만드는 실습을 할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>네비게이션</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu"
aria-expanded="false">
<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="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
로그인
</div>
<div class="panel-body">
<input type="text" class="form-control" placeholder="ID">
<br />
<input type="text" class="form-control" placeholder="비밀번호">
<br />
<button class="btn btn-lg btn-success btn-block">로그인</button>
<br />
</div>
</div>
</div>
</div>
</body>
</html>소스코드 일부해석 :
우선 jquery, bootstrap, 폰트어썸을 추가한다.
nav태그가 끝난 후에 div태그 중, class="col-md-4 col-md-offset-4" 중에 col-md-offset-4를 추가한 이유가 중앙 정렬을 하기 위해서이다. (하지만 왜 col-md-offset-4를 추가해서 중앙정렬됬는지 나한테는 아직까지 미스테리다...)
panel-heading에는 사용할 기능의 제목을 입력해준다.
panel-body에서는 input방식은 text로 하고 form-control 요소를 이용해서 패널칸에 가득 차게 해준다. placeholder를 이용해서 안에 무슨내용이 기입이 되는지 알려준다.
button태그안에서는 btn-lg는 버튼이 커진다는 뜻이고 btn-success는 색깔이 초록색으로 변하며 btn-block은 블록요소의 button으로 만들겠다는 뜻이다.
2. font awesome이란
만약 아이콘이 필요하다면 어떻게 처리할건지 도움을 주는 기능이다. 예를들어 git-hub아이콘, google아이콘, facebook아이콘 등이 필요한 경우이다. 아이콘을 복사하거나 이미지를 다운받아서 사용할 필요 없이, font awesome이라는걸 CSS로 상단에 선언을 해서 거기에 있는 아이콘을 가져다 쓰면 된다.
Font Awesome의 링크 들고오기.
www.bootstrapcdn.com/fontawesome/
Font Awesome
The recommended CDN for Font Awesome
www.bootstrapcdn.com
이곳에서 원하는 아이콘을 들고온다.
Font Awesome Icons
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
5버전도 있지만, 4버전을 쓰자.
원하는 아이콘을 찾아서 클릭하고, 태그를 긁어오면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>네비게이션</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--폰트어섬추가 -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--폰트어섬추가 -->
</head>
<body>
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
<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="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
로그인
</div>
<div class="panel-body">
<input type="text" class="form-control" placeholder="ID">
<br />
<input type="text" class="form-control" placeholder="비밀번호">
<br />
<button class="btn btn-lg btn-success btn-block">로그인</button>
<br />
<!-- 폰트 어썸 아이콘 -->
<a href="#" class="btn btn-lg btn-primary btn-block">
<i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 로그인
</a>
</div>
</div>
</div>
</div>
</body>
</html>다음과 같이 fontawesome링크 링크태그에 넣고 head태그에 추가하고 원하는 아이콘은 바디태그에 추가하면된다.
'부트스트랩 > 실습' 카테고리의 다른 글
| 실습 - 게시판 (네비게이션바, 패널, 게시판, 페이지네이션, 버튼 사용) (0) | 2021.01.19 |
|---|