Everything has an expiration date
[Bootstrap] 20240104 [프로그램소스] 본문
BootstrapApp
BootEx02.html
0123456
BootEx02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx02.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
/* 테이블 기본 서식 */
#table
{
width: 500px;
border: 1px solid black;
border-collapse: collapse;
}
#table td
{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>1. 기본 테이블 <small>기본</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<table>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>2. 기본 테이블 <small>스타일 적용</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<table id="table">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>3. 부트스트랩 기본 테이블 <small>클래스 적용</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<!-- 스타일을 별도로 지정하지 않고, 클래스 "table"만 선언했는데도 -->
<!-- 자동적으로 부트스트랩의 테이블 스타일이 먹힌다~!!! -->
<table class="table">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>4. 부트스트랩 기본 테이블 <small>클래스 적용 및 크기 설정</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<table class="table" style="width: 500px;">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>5. 부트스트랩 보더 테이블 <small>클래스 활용</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<!-- "table" 클래스에, "table-bordered" 클래스 추가 -->
<table class="table table-bordered">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>6. 부트스트랩 스트라이프 테이블 <small>클래스 활용</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<!-- "table" 클래스에, "table-striped" 클래스 추가 -->
<!-- 별도의 노력 없이도, 스타일이 적용된 것을 확인할 수 있다. -->
<!-- 부트스트랩은, 엘리먼트에 적용 가능한 클래스의 종류에 대해 학습하도록 하자. -->
<table class="table table-striped">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<!-- table-condensed 는 클래스가 현재 사라진 상태이다...
row 가 살짝 줄어드는 스타일이 적용되던 클래스였다고 한다. -->
<h1>7. 부트스트랩 호버 테이블 <small>클래스 활용</small></h1>
<!-- table>(tr>td{cell}*4)*10 -->
<table class="table table-hover">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
<h1>8. 부트스트랩 테이블 종합 <small>클래스 활용</small></h1>
<!-- 번갈아가면서 알록달록... → table-striped -->
<!-- 테이블의 행에 마우스가 올라갈 경우, 색상이 어두워짐 → table-hover -->
<!--
부트스트랩은 jQuery 와 충돌할 때가 존재한다.
조치 : 작성된 link, script, script 의 태그 순서를 변경해 보도록 하자
-->
<!-- table>(tr>td{cell}*4)*10 -->
<table class="table table-striped table-hover">
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<br><br>
</body>
</html>
BootEx03.html
BootEx03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx03.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#main {width: 700px; margin: 0px auto;}
#table:
{
width: 720px;
}
#table1 th {text-align: center;}
#table1 th:nth-child(1) {width: 50px;}
#table1 th:nth-child(2) {width: 440px;}
#table1 th:nth-child(3) {width: 80px;}
#table1 th:nth-child(4) {width: 100px;}
#table1 th:nth-child(5) {width: 50px;}
#table1 td {text-align: center;}
#table1 td:nth-child(2) {text-align: left;}
#table1 td:nth-child(5) {text-align: right;}
#btnSet {margin-top: -10px;}
#tblAdd {width: 600px;}
#tblAdd th {width: 150px; text-align: right; padding: 15px;}
</style>
</head>
<body>
<h1>회원 가입</h1>
<form style="width: 600px; margin: 20px;">
<!-- class="form-control"을 지정하자, 텍스트 박스 클릭하면
테두리가 푸르게 빛나고
입력창이 활성화 된다~!! 예쁘다 -->
<input type="text" class="form-control">
<br>
<textarea rows="" cols="" class="form-control"></textarea>
<br>
<select class="form-control">
<option value="">Test1</option>
<option value="">Test2</option>
<option value="">Test3</option>
<option value="">Test4</option>
</select>
<!-- class="form-control" 넣자마자 체크박스 길쭉해지고 이상해져... -->
<!-- 체크박스가 아니게 되어버려... 체크박스 동작을 안 해! -->
<!-- 체크박스는 『class="form-control"』 권장하지 않습니다! -->
<!-- check~!!! -->
<input type="checkbox" class="form-control">
<br>
<!-- a 태그도 『class="form-control"』 권장하지 않습니다! -->
<!-- 링크처럼 보이지가 않게 된다~!!! -->
<!-- check~!!! -->
<a href="#" class="form-control">네이버</a>
<a href="#" class="form-control">다음</a>
<br /><br /><br /><br />
<input type="button" value="confirm">
<input type="button" value="confirm" class="btn">
<input type="button" value="confirm" class="btn btn-default">
<br /><br />
<!-- 클래스만 변경했는데, 버튼의 색상이 변경된 것을 확인할 수 있다. -->
<input type="button" value="confirm" class="btn btn-success">
<input type="button" value="confirm" class="btn btn-primary">
<input type="button" value="confirm" class="btn btn-secondary">
<input type="button" value="confirm" class="btn btn-info">
<br>
<input type="button" value="confirm" class="btn btn-outline-link">
<input type="button" value="confirm" class="btn btn-warning">
<input type="button" value="confirm" class="btn btn-danger">
<input type="button" value="confirm" class="btn btn-light">
<input type="button" value="confirm" class="btn btn-dark">
<br /><br /><hr><br /><br />
<input type="button" value="confirm" class="btn btn-outline-success">
<input type="button" value="confirm" class="btn btn-outline-primary">
<input type="button" value="confirm" class="btn btn-outline-secondary">
<input type="button" value="confirm" class="btn btn-outline-info">
<br>
<input type="button" value="confirm" class="btn btn-outline-link">
<input type="button" value="confirm" class="btn btn-outline-warning">
<input type="button" value="confirm" class="btn btn-outline-danger">
<input type="button" value="confirm" class="btn btn-outline-light">
<input type="button" value="confirm" class="btn btn-outline-dark">
<br /><br /><hr><br /><br />
<!-- check~!!! -->
<!-- [btn-block] : 양옆을 꽉 채우게 하는 버튼으로 구성하던 클래스였다. -->
<!-- 기존에 지원되던 내용이었는데...(btn-block) 이젠 더이상 지원하지 않는다. -->
<!-- 부트스트랩을 쓸 때는 버전을 확인하면서 사용하도록 하자 -->
<input type="button" value="confirm" class="btn btn-primary btn-block">
<br /><br /><hr><br /><br />
<input type="button" value="confirm" class="btn btn-primary">
<!-- [active] : 클릭을 꾹 했을 때(동작할 때)의 형태로 보여진다.-->
<input type="button" value="confirm" class="btn btn-primary active">
<br /><br /><hr><br /><br />
<input type="button" value="confirm" class="btn btn-warning">
<!-- [active] : 클릭을 꾹 했을 때(동작할 때)의 형태로 보여진다.-->
<input type="button" value="confirm" class="btn btn-warning active">
<br /><br /><hr><br /><br />
<input type="button" value="confirm" class="btn btn-outline-success btn-lg">
<input type="button" value="confirm" class="btn btn-outline-primary btn-sm">
<br /><br /><hr><br /><br />
<a href="#">네이버</a>
<a href="#" class="btn btn-primary" role="button">네이버</a>
<!-- role="button" 속성을 부여해서 버튼 역할을 한다는 것을 명시해 주어야 한다. -->
<!-- 장애우들이 이용하는 웹 브라우저의 경우, 이 역할이 잘못 오인되면
제대로 이용할 수가 없기 때문에
꼭 이 엘리먼트가 어떤 역할을 하는 것인지를 명시해 주어야 한다.
-->
</form>
<br /><br /><hr><br /><br />
<div id="main">
<h1>게시판</h1>
<table class="table table-striped" id="table1">
<tr>
<th>번호</th>
<th>제목</th>
<th>이름</th>
<th>날짜</th>
<th>읽음</th>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트 입니다.</td>
<td>노은하</td>
<td>2024-01-04</td>
<td>12</td>
</tr>
<tr>
<td>4</td>
<td>게시판 테스트일걸요.</td>
<td>이주형</td>
<td>2024-01-03</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>게시판 테스트이기를.</td>
<td>박나영</td>
<td>2024-01-03</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>게시판 테스트인거죠.</td>
<td>김다슬</td>
<td>2024-01-02</td>
<td>39</td>
</tr>
<tr>
<td>1</td>
<td>게시판 테스트인가요.</td>
<td>김민지</td>
<td>2024-01-01</td>
<td>42</td>
</tr>
</table>
<div id="btnSet">
<input type="button" value="글쓰기" class="btn btn-primary">
<input type="button" value="새로고침" class="btn btn-secondary">
</div>
</div>
<br /><br /><hr /><br /><br />
<div id="main">
<h1>게시판 글쓰기</h1>
<form>
<table class="table table-bordered" id="tblAdd">
<tr>
<th>이름</th>
<td>
<input type="text" class="form-control" placeholder="이름을 입력하세요">
</td>
</tr>
<tr>
<th>제목</th>
<td>
<input type="text" class="form-control" placeholder="제목을 입력하세요">
</td>
</tr>
<tr>
<th>내용</th>
<td>
<textarea rows="" cols="" class="form-control"
placeholder="내용을 입력하세요"></textarea>
</td>
</tr>
<tr>
<th>암호</th>
<td>
<input type="password" class="form-control" placeholder="암호를 입력하세요">
</td>
</tr>
<tr>
<th>파일</th>
<td>
<input type="file" class="form-control" placeholder="파일을 선택하세요">
</td>
</tr>
</table>
<div id="btnSet">
<input type="button" value="확인" class="btn btn-primary">
<input type="button" value="취소" class="btn btn-secondary">
</div>
</form>
</div>
</body>
</html>
BookEx04.html
BookEx04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx04.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#login
{
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
padding: 15px;
margin: 30px;
}
#login h3
{
margin: 0px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<h1>기본 폼 구성하기</h1>
<hr>
</div>
<div id="login">
<h3>로그인 <small>회원 인증하기</small></h3>
<form>
<!-- 『.form-group』 : 폼을 구성하는 관련 항목만 묶기 -->
<div class="form-group">
<label for="txtId">아이디</label>
<input type="text" id="txtId" class="form-control"
placeholder="아이디를 입력하세요" required="required">
</div>
<div class="form-group">
<label for="txtPw">암호</label>
<input type="password" id="txtPw" class="form-control"
placeholder="패스워드를 입력하세요" required="required">
</div>
<input type="submit" value="입력하기" class="btn btn-primary">
</form>
</div>
</body>
</html>
BookEx05.html
BookEx05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx05.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#login
{
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
padding: 15px;
margin: 30px;
}
#login h3
{
margin: 0px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<h1>기본 폼 구성하기</h1>
<hr>
</div>
<div id="login">
<h3>로그인 <small>회원 인증하기</small></h3>
<!-- ※ BootEx04.html 의 내용을 그대로 복사하여 붙여넣은 후 -->
<!-- form 태그에 form-inline 클래스 속성만 추가~!!! -->
<!-- check~!!! -->
<form class="form-inline">
<!-- 『.form-group』 : 폼을 구성하는 관련 항목만 묶기 -->
<div class="form-group">
<label for="txtId">아이디</label>
<input type="text" id="txtId" class="form-control"
placeholder="아이디를 입력하세요" required="required">
</div>
<!-- required 속성을 부여하면, 바로 submit 되지 않고
입력을 했을 때만 submit 된다~!!! -->
<div class="form-group">
<label for="txtPw">암호</label>
<input type="password" id="txtPw" class="form-control"
placeholder="패스워드를 입력하세요" required="required">
</div>
<input type="submit" value="입력하기" class="btn btn-primary">
</form>
</div>
</body>
</html>
BookEx06.html
01
BookEx06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx06.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#content
{
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
padding: 15px;
margin: 30px;
}
#content h3
{
margin: 0px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<h1>기본 폼 구성하기</h1>
<hr>
</div>
<div id="content">
<h3>재고 관리 <small>입출고 관리하기</small></h3>
<form>
<div>
<label>입력하기</label>
<!-- 『.input-group』 : 접두어, 접미어, 컨트롤을 함께 묶어주는 역할 수행 -->
<!-- 논리적으로 묶어주는 역할만 수행한다. -->
<div class="input-group">
<div class="input-group-addon">원두</div>
<input type="text" id="txtCount" placeholder="수량을 입력하세요"
class="form-control" required="required">
<div class="input-group-addon">kg</div>
</div>
<!-- 『.input-group』 클래스 내부의 엘리먼트에
『.input-group-addon』 을 붙여서 맨 앞이나 뒤에 묶어주도록 한다. -->
<!-- [원두] [input type="text"] -->
<!-- ===== -->
<!-- → <div class="input-group-addon">원두</div> -->
<div class="input-group">
<div class="input-group-addon">우유</div>
<input type="text" id="txtCheck" placeholder="수량을 입력하세요"
class="form-control" required="required">
<div class="input-group-addon">ml</div>
</div>
</div>
<input type="submit" value="입력하기" class="btn btn-success">
</form>
</div>
</body>
</html>
BookEx07.html
01234
BookEx07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx07.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div {border: 1px solid gray;}
</style>
</head>
<body>
<!--
※ 그리드 시스템 → 영역 분할 → 기본 12 분할
-----------------------------------------------------------------------------
사용할 클래스 | 『.col-xs』 | 『.col-sm』 | 『.col-md』 | 『.col-lg』
-----------------------------------------------------------------------------
브라우저 크기 | 아주 작은 기기 | 작은 기기 | 중간 기기 | 큰 기기
-----------------------------------------------------------------------------
-->
<div class="row">
<!-- grid 를 선언 방식으로 구성 -->
<!-- col : 열(컬럼) -->
<!-- xs : 아주 작은 기기에서도 12개 기기 중 한 칸을 차지.-->
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
<div class="col-xs-1">test</div>
</div>
<br><br><br><br><br><br>
<!-- 하나의 컬럼이 총 12칸의 크기를 갖기 때문에 -->
<!-- 하나의 div 당 한 줄(row)을 차지하고 있는 것을 관찰할 수 있다. -->
<div class="row">
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
</div>
<br><br><br><br><br><br>
<div class="row">
<!-- 각각 한 블록 사용 -->
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<!-- 한 블록에 절반 div + 다른 절반 div -->
<div class="col-xs-6">test</div>
<div class="col-xs-6">test</div>
<!-- 각각 한 블록 사용 -->
<div class="col-xs-12">test</div>
<div class="col-xs-12">test</div>
<!-- 한 블록에 div 3개 (6:4:2 비율) -->
<div class="col-xs-6">test</div>
<div class="col-xs-4">test</div>
<div class="col-xs-2">test</div>
<!-- 한 블록에 1/3 div * 3 -->
<div class="col-xs-4">test</div>
<div class="col-xs-4">test</div>
<div class="col-xs-4">test</div>
</div>
<br><br><br><br><br><br>
<!-- [첫 번째 div] -->
<!-- View port(열람하고 있는 디바이스) : xs (엑스트라 스몰) → 한 줄 차지 -->
<!-- View port(열람하고 있는 디바이스) : sm (스몰) → 절반 차지 -->
<!-- View port(열람하고 있는 디바이스) : md (미들) → 2/3의 비율 차지. -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<br><br><br><br><br><br>
<!-- [첫 번째 div] -->
<!-- View port(열람하고 있는 디바이스) : xs (엑스트라 스몰) → 절반 차지 -->
<!-- View port(열람하고 있는 디바이스) : md (미들) → 1/3의 비율 차지. -->
<!-- 나눠지는 건 3등분 되고, 한 칸만 비워진다. -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<br><br><br><br><br><br>
<div class="row" style="height: 100px; background-color: green;">
<div class="col-xs-4 col-sm-12 col-md-6"
style="height: 98px; background-color: yellow;"></div>
<div class="col-xs-4 col-sm-12 col-md-4"
style="height: 98px; background-color: white;"></div>
<div class="col-xs-4 col-sm-12 col-md-2"
style="height: 98px; background-color: blue;"></div>
<!-- xs, sm, md 모두 12로 나누어 떨어지므로 div의 영역이 12의 배수로 처리된다.
즉, 남는 공간이 생기지 않으므로 green 은 나타나지 않는다~!!!
xs || sm || md가 12로 나누어 떨어지지 않는다면(모자르다면) : 그린이 보이고
xs || sm || md가 12로 나누어 떨어지지 않는다면(12를 초과한다면) : 영역이 넘쳐버린다. 넘친 자리에 green이 보인다.
12의 값이 되도록 col의 크기만 잘 설정하면 레이아웃이 망가질 일이 없다.
-->
</div>
</body>
</html>
BookEx08.html
BookEx08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx08.html</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 추가 check~!!! -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div>
<h1>Glyphicons → Bootstrap Icons</h1>
<hr>
</div>
<div>
아이콘 : <span class="glyphicon glyphicon-heart"></span><br>
아이콘 : <span class="glyphicon glyphicon-home"></span><br>
</div>
<br><br>
<!-- Ⅹ -->
<!-- 아이콘은 텍스트로 인식하기 때문에, 가로길이나 높이를 변경한다고 해서 커지지 않는다. -->
<div>
아이콘 : <span class="glyphicon glyphicon-heart" style="width: 200px;"></span><br>
아이콘 : <span class="glyphicon glyphicon-home" style="height: 200px;"></span><br>
</div>
<br><br>
<!-- ○ -->
<!-- 폰트 사이즈(font-size)와 글자색(color) 속성을 통해 아이콘의 크기와 색상을 변경하자. -->
<div>
<!-- check~!!! -->
<!-- 글자 형태로 취급~!!! -->
아이콘 : <span class="glyphicon glyphicon-heart"
style="font-size: 30pt; color: red;"></span><br>
아이콘 : <span class="glyphicon glyphicon-home"
style="font-size: 30pt; color: blue;;"></span><br>
</div>
<br><br>
<!-- Attribute Content Type → Simple Type → 적용되지 않음 -->
<div>
<input type="button" class="glyphicon glyphicon-qrcode">
</div>
<br><br>
<!-- 여는 태그, 닫는 태그가 없이 단독 태그 : Simple Type -->
<!-- Simple Type -->
<input type="button">
<!-- Complex Type -->
<button type="button"></button>
<br><br>
<!-- Attribute Content Type → Complex Type → 적용됨 -->
<div>
<!-- SimpleType 에 적용하던 대로 지정하지 말고, 버튼 태그 내부에 span 을 구성하여 class 부여한다. -->
<!-- <button type="button" class="glyphicon glyphicon-qrcode"></button> -->
<button type="button" class="btn btn-outline-info">
<span class="glyphicon glyphicon-qrcode"></span>
QR 코드 스캔
</button>
</div>
<br><br>
<hr>
<div>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br><br>
<!-- 버튼을 그룹으로 묶었다~!!! -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br><br>
<div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
</div>
<br><br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
</div>
<br><br>
</body>
</html>
'[Bootstrap] > Program source (Bootstrap)' 카테고리의 다른 글
| [Bootstrap] 20240104 [프로그램소스] (1) | 2024.01.04 |
|---|
'[Bootstrap]/Program source (Bootstrap)' Related Articles
more
