출력결과
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
/*
* {
border: 1px solid #aaa;
}
*/
body {
background-color :rgb(234, 254, 255);
}
div.container {
/*border: 1px solid #f00;
background-color : white;*/
}
div.row div {
border: 0px solid #f00;
}
.main_section {
background-color:rgb(248, 248, 248);
margin: 2px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">메뉴</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">알림/소통</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">뉴스/sns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">생활/민원</a>
</li>
</ul>
</div>
</nav>
<!-- 가운데 영역 -->
<div class="row">
<div class="col-sm-3">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h1>제주도에 오신걸 환영합니다.</h1>
<p>제주특별자치도는 대한민국의 제주도와 부속 섬들을 관찰하는 특별자치도이다. 대한민국에서 가장 큰 섬인 제주도 본섬을 비롯하여 마라도, 우도, 추자군도 등을 포함한 유인도 8개, 무인도 55개로 구성되어 있다.</p>
<div class="row">
<div class="col main_section">부트스트랩</div>
<div class="col main_section">실습</div>
</div>
</div>
<div class="col-sm-3">
<!-- right menu -->
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
</div>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
후기
간단하게 부트스트랩이 어떤것인지 이것저것 사용해보는 시간을 가졌다. 신기한것들이 많았다.😀
'웹 개발자 준비 과정🐳' 카테고리의 다른 글
| day06: 드래그 앤 드롭(drag and drop)😮💨 (0) | 2022.07.26 |
|---|---|
| day05: 개인 홈페이지 만들기_서울소개(html,css,js,bootstrap,firebase)🤩 (0) | 2022.07.26 |
| day03 : 나이키,시계,이미지로테이트 웹페이지 만들기 (html,css,js)😵 (1) | 2022.07.26 |
| day02: 문서 구조화,그리디 (html,css,js)🙂 (0) | 2022.07.26 |
| day01: 이력서 만들기 (HTML,CSS)😅 (0) | 2022.07.26 |
