<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap 4 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {height: 200px; background: #aaa; }
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>홈짱닷컴 Homzzang.com</h1>
<p>초보탈출은 홈짱닷컴에서~!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">홈</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#hzmenu"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="hzmenu">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">코딩언어</a> </li>
<li class="nav-item"><a class="nav-link" href="#">그누보드</a></li>
<li class="nav-item"><a class="nav-link" href="#">서버관리</a></li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>프로필</h2>
<h5>사진</h5>
<div class="fakeimg">사진 자리</div>
<p>홈페이지 제작관리</p>
<h3>사이드 메뉴</h3>
<p>열심히 공부 ^!~</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active" href="#">HTML</a></li>
<li class="nav-item"><a class="nav-link" href="#">CSS</a></li>
<li class="nav-item"><a class="nav-link" href="#">JS</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">정회원</a></li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>강의 소개</h2>
<h5>코딩언어</h5>
<div class="fakeimg">사진자리</div>
<p>HTML CSS JS JQUERY</p>
<p>PHP SQL BS</p>
<br>
<h5>그누보드</h5>
<div class="fakeimg">Fake Image</div>
<p>그누보드 영카트 원본</p>
<p>그누보드 빌더 테마 스킨</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Since 2012</p>
</div>
</body>
</html>
결과보기
