bootstrap
42일차 2023-05-04
choi Hoon
2023. 5. 4. 20:05
BootStrap
Typography04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/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.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Typography04.html</title>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Text/Typography</h1>
<p class="bg-warning">
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.<br/>
The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.<br/>
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
</p><!--p태그는 기본적으로 margin-bottom을 가지고 있다-->
</div>
<h2>h1 ~ h6</h2>
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
<h2>Display Headings</h2>
<!--headings 태그보다는 좀 더 얇고 좀 더 큰 사이즈의
제목을 표시하는 클래스
.display-1 ~ .display-4까지
모든 headings태그(h1~h6)에 줄수 있다
display-1 : font-size:6rem;font-weight:300;
display-2 : font-size:5.5rem;font-weight:300;
display-3 : font-size:4.5rem;font-weight:300;
display-4 : font-size:3.5rem;font-weight:300;
위 CSS속성이 동일하게 적용된다
-->
<h2>normal headings</h2>
<h1 class="display-1">Display 1</h1>
<h6 class="display-2">Display 2</h6>
<h6 class="display-3">Display 3</h6>
<h6 class="display-4">Display 4</h6>
<h2>small태그</h2>
<!--
<small> element is used to create a lighter, secondary text in any heading
-->
<h1>h1 heading secondary text</h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
<h2>abbr태그</h2>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in <span style="border-bottom: 1px black dotted;">1948.</span></p>
<h2>code태그</h2>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
<h2>kbd태그</h2>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<h2>More Typography Classes</h2>
<h4>font-weight및 font-style관련 속성</h4>
<!--font-weight-CSS속성값-->
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>
<!--font-italic :font-style:italic;과 같다
font-normal은 없다 그냥 아래처럼(일반 css줘야된다
font-style:normal;)
--->
<span class="font-italic"><p style="font-style:normal">Italic text.</p></span>
<h4>text정렬관련 속성 : text-정렬값</h4>
<p class="bg-dark text-white">text - 방향 미 지정</p>
<p class="text-left bg-danger">Left-aligned text.</p>
<p class="text-right bg-info">Right-aligned text.</p>
<p class="text-center bg-success">Center-aligned text.</p>
<p class="text-justify bg-warning">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>
<p class="text-nowrap bg-secondary">No wrap text. No wrap text. No wrap text. No wrap text.</p>
<p class="text-wrap bg-info">text-wrap. text-wrap. text-wrap. text-wrap. text-wrap. text-wrap.</p>
<p class="text-break bg-danger">text-break. text-break. text-break. text-break. text-break. text-break.</p>
<p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of justify and nowrap.</p>
<h4>text정렬관련 속성 : text-*-정렬값</h4>
<p class="bg-dark text-white">text - 방향 미 지정</p>
<p class="text-right bg-danger">모든 뷰포트에서 오른쪽 정렬</p>
<p class="text-sm-center bg-info">sm이상에서만 가운데 정렬</p>
<p class="text-md-right bg-success">md이상에서만 오른쪽 정렬</p>
<h4>긴 텍스트의 영역내 유지:text-break</h4>
<p>With .text-break:</p>
<!--
-text-wrap과 text-break의 차이
text-break는 텍스트에 공백이 있든 없든 영역이 텍스트보다 줄어들어도
무조건 영역안에 Wrapping된다
text-wrap은 텍스트에 공백이 있는 경우만 Wrapping된다
-->
<p class="text-break bg-info">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
<p class="text-wrap bg-danger">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
<p>Without .text-break:</p>
<p class="bg-warning">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
<h4>부모로부터 받은 텍스트 색상으로 RESET:text-reset</h4>
<p >Muted text with a <a href="#">reset link</a>.</p>
<p class="text-success">Muted text with a <a href="#" class="text-reset">reset link</a>.</p>
<h4>블릿제거및 아이템들(li)과 ul사이의 마진 제거:list-unstyled</h4>
<style>
.bg-info > li,.unstyled-apply > li{
background-color: yellow;
border:1px dotted red;
box-sizing: border-box;
}
.list-inline > li,.d-flex-apply > li{
background-color: yellow;
border:1px dotted red;
box-sizing: border-box;
width:50px;
height:50px;
}
</style>
<ul class="bg-info">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<ul class="list-unstyled unstyled-apply">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<h4>인라인방향 배치:ul에는 list-inline,각 li에는 list-inline-item</h4>
<ul class="list-inline"><!--여백이 왜 생기는가?
list-inline클래스가 'display: inline-block'을 li요소에 적용하기 때문.(margin-right:0.5rem)
inline-block은 요소들을 가로 배열하면서,요소 사이에 공백이 생기는 것이 특징.
-->
<li class="list-inline-item">Coffee</li>
<li class="list-inline-item">Tea</li>
<li class="list-inline-item">Milk</li>
</ul>
<h4>인라인방향 배치:ul에 d-flex,list-unstyled</h4>
<ul class="d-flex list-unstyled d-flex-apply">
<!--공백이 없는 이유?
d-flex클래스가 ul요소에 적용하기 때문
(display:flex는 요소들을 유연하게 배열함)
-->
<li >Coffee</li>
<li >Tea</li>
<li >Milk</li>
</ul>
</div>
</body>
</html>
결과)
Colors05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/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.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Colors05.html</title>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Colors</h1>
<p>
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light<br/>
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
</p>
</div>
<h2>Text Colors</h2>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light bg-dark">This text is light grey (on white background).</p>
<p class="text-white bg-dark">This text is white (on white background).</p>
<h2>Opacity Text Colors</h2>
<p>.text-black-50 또는 .text-white-50 클래스를 사용하여 흑백 텍스트에 대해 50% 불투명도를 추가합니다.</p>
<!--black과 white텍스트 색상만 적용됨, 50%(-50), 100%(-100) 투명도를 뜻함-->
<p class="text-danger-50">텍스트 색상(빨강)적용안됨 흰색, 검은색만 됨</p>
<p class="text-black-50">글씨색상 검은색, 투명도 50%</p>
<p class="text-white-50 bg-dark">글씨 색상 하얀색, 투명도50%, 바탕색은 검은색</p>
<h2>Contextual Backgrounds</h2>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
</body>
</html>
결과)
Tables06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/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.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Tables06.html</title>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Tables</h1>
<p>A basic Bootstrap 4 table has a light padding and horizontal dividers.<br/>
The .table class adds basic styling to a table:</p>
</div>
<div class="row">
<div class="col-md">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md">
<h2>Striped Rows</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div><!--row-->
<div class="row">
<div class="col-md">
<h2>Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md">
<h2>Hover Rows</h2>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div><!--row-->
<!--
주축방향(행방향)
992px(md)이상에서는 3개의 테이블 배치
768px이상에서는 2개의 테이블 배치
768px미만에서는 1개의 테이블 배치
1. 행에 row row-cols-1 row-cols-sm-2 row-cols-md-3추가
근데 문제가 생김: 테이블이 뷰포트 줄일시 겹친다
해결책: 테이블을 반응형 테이블로 만든다:table-responsive 추가
2. 반응형 테이블로 만들시 뷰포트가 줄어들면 수평방향 스크롤바가 생긴다
해결책: text-break 추가(아래로 넘김)
3. 575px~405px사이에서 오른쪽에 여백이 남은 거는 아래 css로 해결
-->
<style>
.table td{
width: 33.3%;
}
</style>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col">
<h2>Black/Dark Table</h2>
<div class="table-responsive">
<table class="table table-dark text-break">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col">
<h2>Dark Striped Table</h2>
<table class="table table-dark table-striped text-break">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<h2>Dark Striped Table</h2>
<table class="table table-dark table-striped text-break">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div><!--row-->
<div class="row">
<div class="col-md">
<h2>Borderless Table</h2>
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md">
<h2>Contextual Classes</h2>
<!--
<table>,<tr> 혹은 <td>에
table-문맥적 칼라를 적용할 수 있다
단, <tr>에 적용한 문맥적 칼라가 <td>에 적용한 칼라보다
우선적으로 적용된다. 이때는 새로운 속성(bg-*)을 넣어 적용시킨다
-->
<table class="table table-bordered table-success">
<thead class="table-dark">
<tr >
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>John</td>
<td class="table-danger">Doe</td><!--css적용안됨-->
<td class="bg-danger">john@example.com</td><!--bg-color는 적용됨-->
</tr>
<tr>
<td>Mary</td>
<td class="bg-dark text-white">Moe</td>
<td class="table-dark">mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td >july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div><!--row-->
<div class="row">
<div class="cols-md">
<h2>Table Head Colors</h2>
<table class="table">
<!-- <thead class="thead-dark"> -->
<!-- <thead class="bg-dark text-white"> -->
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="cols-md pl-3">
<h2>Small Table</h2>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div><!--row -->
<!--
※테이블의 컬럼이 많은 경우 가로로 컨텐츠가 많은 테이블은
반응형으로 만들면 가로축에 스크롤바가 생긴다
단, 영역배분시 숫자를 지정해야 한다(기본은 자동 배분)
예)
<div class="col-md">를 두 개 배치하면 자동으로 6개씩 컬럼이
배분된다
하지만 반응형 테이블 배치 시에는 <div class="col-md-6">으로
지정해야된다
-->
<div class="row">
<div class="col-md-6">
<h2>Responsive Tables</h2>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--
스크롤바가 생기는 경계점
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
-->
<div class="col-md-6">
<h2>Responsive Table-sm</h2>
<div class="table-responsive-sm">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!--container-->
</body>
</html>결과)
Images07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/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.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Images07.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
<script>
window.onresize=function(){
//console.log(window.innerWidth);
//문]해상도가 767픽셀이하에서는 세로방향으로 배치된다
// 세로방향일때는 class를 mx-auto d-block로 바꾸고
// 768이상일때는 다시 원래 클래스인 float-right,float-left로 바꿔줘라
var img1=document.querySelector('#img1');
var img2=document.querySelector('#img2');
var img3=document.querySelector('#img3');
if(window.innerWidth<=767){
img1.setAttribute("class","mx-auto d-block");
img3.setAttribute("class","mx-auto d-block");
img2.setAttribute("class","mx-auto d-block");
}
else {
img1.setAttribute("class","float-right");
img2.setAttribute("class","float-left");
img3.setAttribute("class","mx-auto d-block");
}
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron bg-warning">
<h1>Images</h1>
<p>Image Shapes:Rounded Corners,Circle,Thumbnail</p>
</div>
<h2>Image Shapes</h2>
<div class="row">
<div class="col-sm">
<!--
w-100 h-100 :부모인 div의 가로폭/세로폭 100%채우기
좌우측 거터(15px씩)는 남는다
-->
<img src="images/images.jpg" class="rounded w-100 h-100" alt="rounded"/>
</div>
<div class="col-sm mt-2 mb-2">
<!--
mt-2 mb-2 : 상하 여백주기(뷰포트가 스마트폰일때 상하 여백주기)
-->
<img src="images/images.jpg" class="rounded-circle w-100 h-100" alt="rounded-circle"/>
</div>
<div class="col-sm">
<img src="images/images.jpg" class="img-thumbnail w-100 h-100" alt="img-thumbnail"/>
</div>
</div><!--row-->
<h2>Aligning Images</h2>
<h4>Left,Right Images</h4>
<div class="row">
<div class="col">
<img src="images/images.jpg" class="float-right" alt="float-right" title="float-right"/>
<img src="images/images.jpg" class="float-left" alt="float-left" title="float-left"/>
</div>
</div>
<h4>Cetered Images</h4>
<div class="row">
<div class="col">
<!--d-block : disply:block;-->
<img src="images/images.jpg" class="mx-auto d-block" alt="mx-auto d-block" title="mx-auto d-block"/>
</div>
</div>
<h4>Center Images</h4>
<div class="row">
<div class="col">
<img src="images/images.jpg" class="float-right" id="img1" alt="float-right" title="float-right" />
<img src="images/images.jpg" class="float-left" id="img2" alt="float-left" title="float-left" />
<img src="images/images.jpg" class="float-mx-auto d-block" id="img3" alt="mx-auto d-block-left" title="mx-auto d-block-left" />
</div>
</div>
</div><!--container-->
</body>
</html>
결과)
아래는 해상도를 낮게 했을center에 위치 해상도 높게 하면 우측, 좌측 배치
