member_board 생성
화면구상 : 외부 (소스를 나중에 가져옴)
* 이클립스에서 만든 html파일 vscode에서 작업 하는법
좌측 상단탭에 file -> open folder
이클립스 workspace-web에 내가 작업할 폴더 선택 후 index파일 수정
*bootstrap
navbar
carousel
input Group Buttons
1. Containers
- 고정형 너비값을 가져감 (너비에 맞는 크기에 맞춤)
- 반응형에 대한 고정형 컨테이너
- container-fluid는 그냥 고정
- 너비에 따른 크기는 https://www.w3schools.com/bootstrap5/bootstrap_containers.php 참고
1-1) padding
- 컨테이너에 패딩을 주고싶을때
1-2) Responsive Containers
container-sm
container-md
container-lg
container-xl
container-xxl
2, Grids (중요함)
-
2-1) Grids class
.col-(초소형 기기 - 화면 너비가 576px 미만)
.col-sm-(소형 장치 - 화면 너비가 576px 이상)
.col-md-(중형 장치 - 화면 너비가 768px 이상)
.col-lg-(대형 장치 - 화면 너비가 992px 이상)
.col-xl-(초대형 기기 - 화면 너비가 1200px 이상)
.col-xxl-(xxlarge 기기 - 화면 너비가 1400px 이상)
※ bootstrap 적용예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href=' https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<!--
container, container-fluid
p 1~5단게가 있음 (padding)
ex) p-1 : 4방향에 1단계 padding을 준다
p+t, r, b, l
ex) pt-5 : top 5단계 padding
p+x, y
ex) py-3 : top, bottom 3단계 padding
m(margin)도 똑같이 있음
-->
<header class="container-fluid bg-warning">
<div class="container">
<div class="pt-3">
<a href="#">
<img src="https://contents.kyobobook.co.kr/resources/fo/images/common/ink/img_logo_kyobo@2x.png"alt="logo">
</a>
</div>
<nav class="navbar navbar-expand-sm">
<!-- Links -->
<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>
</nav>
</div>
</header>
<main class="container bg-success p-3 pb-5 text-white">
<!-- row를 꼭 만들어야함 -다음 숫자는 최대 12 -->
<div class="row">
<section class="col-lg-9 bg-danger">
<h3>본문 시작 구간</h3>
<article>공간1</article>
<article>공간2</article>
<article>공간3</article>
<article>공간4</article>
</section>
<aside class="col bg-primary">배너</aside>
</div>
</main>
<footer class="container-fluid bg-warning p-5 text-center">
<address>copyright @ TJ academy</address>
</footer>
</body>
</html>'Servlet, JSP' 카테고리의 다른 글
| 23-03-07(2) bootstrap (0) | 2023.03.07 |
|---|