다음 번에는 앞으로 프로젝트를 위해 간단하게 웹 페이지의 한 부분을 만들어보려고 한다.
그에 앞서 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_me_complete&stacked=h
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
이 코드를 가져와 형식만 살짝 바꿔 사용할 수 있도록 만들어보자
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>12_myweb인트로.html</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- layout.css import -->
<link rel="stylesheet" href="layout.css">
</head>
<body>
<!-- 메인 카테고리 시작 -->
<nav class="navbar navbar-default">
<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="#">HOME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">게시판</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">포토갤러리</a></li>
<li><a href="#">메일보내기</a></li>
</ul>
</div>
</div>
</nav><!-- 메인 카테고리 끝-->
<!-- Content 시작 -->
<!-- First Container 시작 -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">환영합니다</h3>
<img src="../images/grogu.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
</div><!-- First Container 끝 -->
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<div class="row">
여기에 본문 내용 작성합니다
</div><!-- row 끝 -->
</div><!-- Second 끝 -->
<!-- Content 끝 -->
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
Copyright © 2022 MyWeb
</footer>
</body>
</html>
'웹개발 교육 > Bootstrap' 카테고리의 다른 글
| [46일] bootstrap (11) - responsive (0) | 2022.09.30 |
|---|---|
| [46일] bootstrap (10) - grid (0) | 2022.09.30 |
| [45일] bootstrap (9) - icon (0) | 2022.09.29 |
| [45일] bootstrap (8) - modal (0) | 2022.09.29 |
| [45일] bootstrap (7) - container (0) | 2022.09.29 |
