43일차 2023-05-08
2023. 5. 8. 20:00ㆍbootstrap
BootStrap
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>
var classFirst,classSecond;
var imgFirst,imgSecond;
window.addEventListener('DOMContentLoaded',function(){
imgFirst=document.querySelector('div > div:nth-child(6) > div > img:nth-child(1)');
imgSecond=document.querySelector('div > div:nth-child(6) > div > img:nth-child(2)');
classFirst=imgFirst.getAttribute('class');
classSecond=imgSecond.getAttribute('class');
console.log('원래 class값:',classFirst,classSecond);
});
window.onresize=function(){
//console.log(window.innerWidth);
//문]해상도가 767픽셀이하에서는 세로방향으로 배치된다
// 세로방향일때는 class를 mx-auto d-block로 바꾸고
// 768이상일때는 다시 원래 클래스인 float-right,float-left로 바꿔줘라
//var imgFirst=document.querySelector('div > div:nth-child(6) > div > img:nth-child(2)');
//console.log(imgFirst.className,typeof imgFirst.className);//다른 방법
//#0내가 한 방법:id로 태그를 찾아서 속성을 변경
/*
var img1=document.querySelector('#img1');
var img2=document.querySelector('#img2');
if(window.innerWidth<=767){
img1.setAttribute("class","mx-auto d-block");
img2.setAttribute("class","mx-auto d-block");
}
else {
img1.setAttribute("class","float-right");
img2.setAttribute("class","float-left");
}*/
//////////////////////////////
//console.log(imgFirst.class);//undefined
//console.log(imgFirst.className,typeof imgFirst.className);//"float-right kosmo" string
//console.log(imgFirst.classList,typeof imgFirst.classList);//▶DOMTokenList(2) object
/*
//방법1:setAttribute()/getAttribute()함수
if(window.innerWidth <=767){//가운데 정렬
imgFirst.setAttribute('class','mx-auto d-block');
imgSecond.setAttribute('class','mx-auto d-block');
}
else{//다시 원래 클래스로 변경
imgFirst.setAttribute('class',classFirst);
imgSecond.setAttribute('class',classSecond);
}*/
/*
//방법2:classList속성
if(window.innerWidth <=767){//가운데 정렬
imgFirst.classList.replace(classFirst,'mx-auto');
imgFirst.classList.add('d-block');
imgSecond.classList.replace(classSecond,'mx-auto');
imgSecond.classList.add('d-block');
}
else{//다시 원래 클래스로 변경
imgFirst.classList.remove('mx-auto');
imgFirst.classList.remove('d-block');
imgFirst.classList.add('float-right');
imgSecond.classList.remove('mx-auto');
imgSecond.classList.remove('d-block');
imgSecond.classList.add('float-left');
}*/
//방법3:CSS사용
};
</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" id=img1 alt="float-right" title="float-right"/>
<img src="images/images.jpg" class="float-left" id=img2 alt="float-left" title="float-left"/> -->
<!--방법3:CSS 반응형 사용-->
<img src="images/images.jpg" class="float-md-right mx-auto d-block" alt="float-right" title="float-right"/>
<img src="images/images.jpg" class="float-md-left mx-auto d-block" 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>
<h2>Responsive Images</h2>
<h4>Not Responsive Image</h4>
<!--
The .img-fluid class applies max-width: 100%;
and height: auto; to the image
img-fluid클래스를 적용하지 않고 w-100 적용시
반응형 이미지 효과를 내지만 height: auto;는 적용 안된다
-->
<div class="row">
<div class="col">
<img src="images/1.jpg" class="w-100" alt="Not Responsive Images" />
</div>
</div>
<h4>Responsive Image</h4>
<div class="row">
<div class="col">
<img src="images/1.jpg" class="img-fluid" alt="Responsive Images" />
</div>
</div>
<h4>Responsive Image for Image Shapes</h4>
<div class="row">
<div class="col">
<img src="images/1.jpg" class="rounded w-100" alt="Responsive Images" />
</div>
</div>
</div><!--container-->
</body>
</html>
결과)
Alerts09.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>Alerts09.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Alerts</h1>
<p>Bootstrap 4 provides an easy way to create predefined alert messages:</p>
</div>
<h2>Alerts</h2>
<div class="row"><!--행으로 배치 (색깔변경을 보여줌)-->
<div class="col"><!--그리드 시스템을 사용하기 위해 배치,jumbotron으로 묶여있어서 한줄씩 나오게 됨-->
<div class="alert alert-success">
<kbd class="bg-success"><strong>Success!</strong></kbd> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
</div>
</div><!--row-->
<h2>Alert Links</h2>
<div class="row">
<div class="col">
<div class="alert alert-warning">
<kbd class="bg-warning"><strong>Success!</strong></kbd> You should <a href="#" class="alert-link">read this message</a>.
</div>
</div>
</div>
<h2>Closing Alerts</h2>
<div class="row">
<div class="col">
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<kbd class="bg-warning"><strong>Success!</strong></kbd> You should <a href="#" class="alert-link">read this message</a>.
</div>
</div>
</div>
<h2>Animated Alerts</h2>
<div class="row">
<div class="col">
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<kbd class="bg-warning"><strong>Success!</strong></kbd> You should <a href="#" class="alert-link">read this message</a>.
</div>
</div>
</div>
</div><!--container-->
</body>
</html>결과)
Buttons10.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>Buttons10.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Buttons</h1>
<p>Bootstrap 4 provides different styles of buttons:</p>
</div>
<h2>Button Styles</h2>
<div class="row"><!--행으로 배치-->
<div class="col"><!--그리드 시스템을 사용하기 위함-->
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<a href="#">Link</a><br/><!--모양이 별로임-->
</div>
</div>
<div class="row mt-2">
<div class="col">
<!--The button classes can be used on <a>, <button>, or <input> elements:
버튼 클래스는 <a>, <button> 또는 <input> 요소에서 사용할 수 있습니다.
-->
<a href="#" class="btn btn-info">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</div>
<div>
<h2>Button Outline</h2>
<div class="row">
<div class="col">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
</div>
<h2>Button Sizes</h2>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
</div>
</div>
<h2>Block Level Buttons</h2>
<div>
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
<h2>Active/Disabled Buttons</h2>
<div>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<!--A태그는 disabled 태그 속성 미지원.반드시 .disabled 클래스로 적용
A태그에 CSS의 pointer-events: none;설정시 클릭이벤트가 비활성화된다
즉 Bootstrap4의 disabled클래스는 pointer-events: none;와 같다
-->
<a href="https://www.nate.com" class="btn btn-primary disabled">Disabled Link</a><!--disabled없으면 링크타짐-->
<!--class에 disabled 대신 style속성으로 클릭이벤트 비활성화하는 법-->
<a href="https://www.nate.com" class="btn btn-primary" style="pointer-events: none;">Disabled Link</a>
</div>
<h2>Spinner Buttons</h2>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span><!--돌아가는 모양-->
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-grow-sm"></span><!--깜박이는 모양-->
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span><!--돌아가는 모양-->
로딩중
</button>
<button class="btn btn-primary" disabled><!--마우스 커서변경 및 클릭안됨-->
<span class="spinner-border spinner-border-sm"></span>
다운로드중
</button>
<button class="btn btn-primary" disabled><!--마우스 커서변경 및 클릭안됨-->
<span class="spinner-grow spinner-grow-sm"></span>
업로드중
</button>
</div>
</body>
</html>
결과)
ButtonsGroups11.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>ButtonGroups11.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Button Groups</h1>
<p>Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:</p>
</div>
<h2>Button Groups</h2>
<div class="btn-group"><!--그룹핑-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h2>Button Size In Groups</h2>
<!--btn-group클래스와 함께 btn-group-lg 혹은 btn-group-sm클래스로
모든 버튼의 크기 조정
혹은 각 버튼의 하나에만 btn-lg ,btn-sm줘도 된다
div와 button에 버튼 크기관련 클래스 동시부여시
div에 지정한 크기 클래스가 우선 적용된다
-->
<div class="btn-group btn-group-lg"><!--버튼 사이즈:sm,lg-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h2>Vertical Button Groups</h2>
<div class="btn-group-vertical"><!--수평 배치-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h2>Nesting Button Groups & Dropdown Menus</h2>
<div class="btn-group"><!--버튼 그룹핑-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group"><!--그룹핑 안에 그룹핑-->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button><!--dropdown-toggle클래스는 버튼 클릭시 드롭다운 메뉴 열림(트리거 역할),-->
<div class="dropdown-menu"><!--드롭다운 메뉴 클래스는 아래div를 가짐-->
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
<h2>Split Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<!--Split Button Dropdown은 일반적인 드롭다운 메뉴였다면 버튼의 왼쪽에 위치한 주 메뉴 아이템을
클릭하면 토글메뉴가 나타나지만, split을 하여서 주 메뉴 기능과 우측에 토글메뉴로 나눠서 클릭
할 수 있음(기본 토글보다 더 많은 기능이 가능함)
-->
<!--
의미없다.생략해도 무방
<span class="caret"></span>
-->
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
<h2>Vertical Button Group w/ Dropdown</h2>
<div class="btn-group-vertical"><!--그룹핑하고, 수직으로 배치됨-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group"><!--그룹핑에 그룹핑함-->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><!--누르면 토글메뉴 나옴-->
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
<h2>Button Groups Side by Side</h2>
<p>Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:</p>
<!--스마트폰 해상도로 줄일시 디자인 수정
1.<div class="row">추가
2.<div>에 col클래스 추가
스마트폰 크기로 줄여도 세로 배치시 컨텐츠(메뉴명)의 크기와 상관없이
두 메뉴그룹의 가로폭이 같다
-->
<div class="row"><!--2행으로 구성-->
<div class="btn-group col mb-2"><!--그룹핑함, 마진 바텀 2줌-->
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group col mb-2"><!--그룹핑함, 마진 바텀 2줌-->
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
</div>
</div>
</body>
</html>
결과)
Badges12.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>Badges12.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Badges</h1><!--사각모양-->
<p>Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):</p>
</div>
<h2>Badges/Contextual Badges</h2>
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-info">New</span></h2>
<h3>Example heading <span class="badge badge-warning">New</span></h3>
<h4>Example heading <span class="badge badge-danger">New</span></h4>
<h5>Example heading <span class="badge badge-dark">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
<h2>Pill Badges</h2><!--알약모양-->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
<h2>Badge inside an Element</h2>
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light badge-pill">4</span><!--안에 모양을 내고 수치-->
</button>
</div><!--container-->
</body>
</html>
결과)
ProgressBars13.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>ProgressBars13.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
.progress{
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Progress Bars</h1>
<p>
A progress bar can be used to show a user how far along he/she is in a process.<br/>
To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element.<br/>
Use the CSS width property to set the width of the progress bar
</p>
</div><!--jumbotron-->
<h2>Basic Progress Bar</h2>
<h4>Bootstrap4 Style의 진행바</h4>
<div class="progress"><!--진행바 속성-->
<div class="progress-bar" style="width:90%"></div><!--진행바 속성, 너비90%-->
</div>
<h4>HTML5의 진행바</h4>
<progress value="90" max="100" style="width:100%;height:1.8rem;"></progress><!--진행바 값은90,최대값은100, 너비100%,두께는1.8rem-->
<h2>Progress Bar Height</h2>
<!--
Note that you must set the same height for the progress container and the progress bar
-->
<div class="progress" style="height:10px"><!--진행바 속성, 높이 10px-->
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>
<div class="progress my-2" style="height:20px"><!--마진 y으로 2씩 주기, 높이 20px-->
<div class="progress-bar" style="width:50%;height:20px"></div>
</div>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width:60%;height:30px"></div>
</div>
<h2>Progress Bar Labels</h2>
<div class="progress">
<div class="progress-bar" style="width:90%">90%</div><!--div태그 사이에 텍스트 넣으면 바 속에 텍스트-->
</div>
<h2>Colored Progress Bars</h2>
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%">10%</div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%">20%</div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%">30%</div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%">40%</div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%">50%</div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white text-dark" style="width:60%">60%</div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%">70%</div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light text-dark" style="width:80%">80%</div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%">90%</div>
</div>
<h2>Striped Progress Bars</h2>
<!-- Blue -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:10%">10%</div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:20%">20%</div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" style="width:30%">30%</div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:40%">40%</div>
</div>
<h2>Animated Progress Bar</h2>
<!-- Blue -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%">10%</div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:20%">20%</div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:30%">30%</div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:40%">40%</div>
</div>
<h2>Multiple Progress Bars</h2>
<!-- Blue -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%;">엣지(10%)</div>
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated " style="width:20%;">사파리(20%)</div>
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated " style="width:30%;">파이어폭스(30%)</div>
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated " style="width:40%;">크롬(40%)</div>
</div>
</div><!--container-->
</body>
</html>결과)
Spinners14.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>Spinners14.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Spinners</h1>
<p>To create a spinner/loader, use the .spinner-border class:</p>
</div><!--jumbotron-->
<h2>Spinners</h2>
<div class="d-flex align-items-center"><!--수평 중앙(위, 아래) 정렬-->
<div class="spinner-border mr-2"></div><!--모양생김, 마진-오른쪽:2-->
<div>다운로드 중...</div>
</div>
<h2>Colored Spinners</h2><!--모양의 색깔 9가지-->
<!--Use any text color utilites to add a color to the spinner:-->
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
<h2>Growing Spinners</h2><!--펑 터지는 모양, 9가지색깔-->
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
<h2>Spinner Size</h2><!--모양 주고,크기주는데 sm, md가 있음, 마진-오른쪽:2-->
<div class="d-flex align-items-center"><!--수평 중앙(위, 아래) 정렬-->
<div class="spinner-border spinner-border-sm mr-2"></div>
<!--align~이 없으면 동그라미 모양은 왼쪽 상단을 시작으로 위치함-->
<div>다운로드 중...</div>
</div>
<div class="d-flex align-items-center"><!--수평 중앙(위, 아래) 정렬-->
<div class="spinner-grow spinner-grow-md mr-2"></div>
<div>다운로드 중...</div>
</div>
</div><!--container-->
</body>
</html>결과)
Pagination15.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>Pagination15.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Pagination</h1>
<p>
To create a basic pagination, add the .pagination class to an <ul> element.<br/>
Then add the .page-item to each <li> element and a .page-link class to each link inside <li></p>
</div><!--jumbotron-->
<h2>Basic Pagination</h2><!--페이징 처리에 관한 모양-->
<ul class="pagination"><!--<< < > >> 모양 나타내기(« ‹ › »)-->
<li class="page-item"><a class="page-link" href="#">«</a></li>
<li class="page-item"><a class="page-link" href="#">‹</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<h2>Active State</h2>
<ul class="pagination"><!--클래스에 active속성 추가하면 활성화-->
<li class="page-item"><a class="page-link" href="#">«</a></li>
<li class="page-item"><a class="page-link" href="#">‹</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<h2>Disabled State</h2>
<ul class="pagination"><!--클래스에 disabled속성 추가하면 비활성화-->
<li class="page-item disabled"><a class="page-link" href="#">«</a></li>
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<h2>Pagination Sizing</h2>
<ul class="pagination pagination-lg"><!--틀 자체에 크기 주기-->
<li class="page-item disabled"><a class="page-link" href="#">«</a></li>
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<ul class="pagination pagination-sm"><!--틀 자체에 크기 주기-->
<li class="page-item disabled"><a class="page-link" href="#">«</a></li>
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<h2>Pagination Alignment</h2>
<!--default는 왼쪽 정렬-->
<!--가운데 정렬-->
<ul class="pagination justify-content-center"><!--틀 자체 중앙정렬-->
<li class="page-item disabled"><a class="page-link" href="#">«</a></li>
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<!--오른쪽 정렬-->
<ul class="pagination justify-content-end"><!-- 틀 자체 우측정렬-->
<li class="page-item disabled"><a class="page-link" href="#">«</a></li>
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">›</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
<h2>Breadcrumbs</h2><!--탐색 경로를 나타냄-->
<!--Another form for pagination, is breadcrumbs:-->
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">남성복</a></li><!--링크 가기-->
<li class="breadcrumb-item"><a href="#">슈트</a></li><!--링크 가기-->
<li class="breadcrumb-item active">상의</li><!--현재 위치 페이지-->
</ul>
</div><!--container-->
</body>
</html>
결과)
ListGroups16.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>ListGroups16.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>List Groups</h1>
<p>To create a basic list group, use an <ul> element with class .list-group,<br/> and <li> elements with class .list-group-item</p>
</div><!--jumbotron-->
<!--
Text/Typography
list-unstyled : 블릿제거 및 리스트 아이템들과의 여백 제거
list-inline : 리스트 아이템들을 인라인 방향으로 정렬
리스트 아이템(li)에는 list-inline-item 추가
-->
<h2>Basic List Groups/Active State/Disabled Item</h2>
<ul class="list-group"><!--그룹핑-->
<li class="list-group-item">First item</li>
<li class="list-group-item active">Second item</li><!--활성화-->
<li class="list-group-item disabled">Third item</li><!--비활성화-->
</ul>
<h2>List Group With Linked Items for Using UL/LI</h2>
<!--
텍스트 영역 클릭해야 이동하고
A태그의 스타일이 그대로 적용된다
영역에 마우스오버시 손모양이 아닌 화살표 모양이 된다(텍스트 링크만 손모양)
-->
<ul class="list-group"><!--그룹핑--><!--list-group-item-action는 마우스hover와 같다-->
<li class="list-group-item list-group-item-action"><a href="https://www.nate.com">First item</a></li>
<li class="list-group-item list-group-item-action"><a href="#">Second item</a></li>
<li class="list-group-item list-group-item-action"><a href="#">Third item</a></li>
</ul>
<!--CSS를 사용해서 아래 DIV/A태그로 리스트 그룹 만든 CSS 효과 동일하게 구현하기-->
<style>
ul.list-group:nth-child(8) > li:hover{
cursor:pointer;
}
ul.list-group:nth-child(8) > li> a{
color:#495057;/*Second item체크 */
}
ul.list-group:nth-child(8) > li> a:hover{
text-decoration: none;
}
</style>
<h2>List Group With Linked Items for Using UL/LI-SAME Using DIV/A</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-action"><a href="https://www.nate.com">First item</a></li>
<li class="list-group-item list-group-item-action"><a href="#">Second item체크</a></li>
<li class="list-group-item list-group-item-action"><a href="https://www.naver.com">Third item</a></li>
</ul>
<!--자스를 사용해서 아래 DIV/A태그로 리스트 그룹 만든 이벤트 효과 동일하게 구현하기-->
<script>
//텍스트부분이 아닌 li영역 클릭시에도 이동처리하기
var li=document.querySelectorAll('ul.list-group:nth-child(8) > li');
li.forEach(function(item){
item.onclick=function(){
console.log(this.firstElementChild.href);
location.href=this.firstElementChild.href;
};
});
</script>
<h2>List Group With Linked Items for Using DIV/A</h2>
<div class="list-group">
<a href="https://www.nate.com" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
<h2>Flush / Remove Borders</h2>
<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>
<h2>Horizontal List Groups</h2>
<ul class="list-group list-group-horizontal">
<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>
<h2>Contextual Classes</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
<h2>Link items with Contextual Classes</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
<h2>List Group with Badges</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
</div><!--container-->
</body>
</html>
결과)
Cards17.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>Cards17.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Cards</h1>
<p>A card in Bootstrap 4 is a bordered box with some padding around its content. <br/>
It includes options for headers, footers, content, colors, etc</p>
</div><!--jumbotron-->
<h2>Basic Card/Contextual Cards</h2>
<div class="row">
<div class="col-sm">
<div class="card bg-danger">
<div class="card-body">기본 카드 A</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-primary">
<div class="card-body">기본 카드 B</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-warning">
<div class="card-body">기본 카드 C</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-success">
<div class="card-body">기본 카드 D</div>
</div>
</div>
</div>
<h2>Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
<h2>Titles, text, and links</h2>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<h2>Card Images</h2>
<div class="row">
<div class="col-sm">
<div class="card">
<img class="card-img-top" src="images/img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">가길동</h4>
<p class="card-text">노력은 배신하지 않는다.</p>
<!--
stretched-link:it will make the whole card clickable and
hoverable (the card will act as a link):
-->
<a href="#" class="btn btn-primary stretched-link">프로필 보기</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="col-sm ">
<div class="card">
<div class="card-body">
<h4 class="card-title">나길순</h4>
<p class="card-text">시간은 금이다.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
</div>
</div>
<div class="col-sm">
<!--Card Image Overlays-->
<!--
card-img-overlay:이미지가 카드의 백그라운드로 렌더링된다
card-body클래스대신에 card-img-overlay
-->
<div class="card" >
<div class="card-img-overlay" >
<h4 class="card-title">다길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
</div>
</div>
<h2>Card Columns(여러개의 카드 배치시)</h2>
<!--row와 col-*-*클래스 대신에 card-columns클래스로
카드를 그리드 형태로 배치(※이때는 카드가 더 추가되도 자동으로 정렬된다)
576px미만에서는 세로배치 즉 col-sm이다
--->
<div class="card-columns"><!--row클래스 대신 -->
<div class="card">
<img class="card-img-top" src="images/img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">가길동</h4>
<p class="card-text">노력은 배신하지 않는다.</p>
<a href="#" class="btn btn-primary stretched-link">프로필 보기</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">나길순</h4>
<p class="card-text">시간은 금이다.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">다길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">라길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">마길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
</div>
<h2>Card Deck</h2>
<!--
card-deck: 동일한 높이와 폭의 카드 컬럼들을 만든다
풍경사진의 세로폭이 아바타 사진보다 작아서
풍경사진의 카드 세로폭이 나머지 카드와
일치하지 않는다.
이때 card-columns대신에 card-deck을 추가한다
-->
<div class="card-deck"><!--row클래스 대신 -->
<div class="card">
<img class="card-img-top" src="images/img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">가길동</h4>
<p class="card-text">노력은 배신하지 않는다.</p>
<a href="#" class="btn btn-primary stretched-link">프로필 보기</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">나길순</h4>
<p class="card-text">시간은 금이다.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">다길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">라길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">마길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
</div>
<h2>Card Group</h2>
<!--
The .card-group class is similar to .card-deck.
The only difference is that the .card-group class removes
left and right margins between each card.
-->
<div class="card-group"><!--row클래스 대신 -->
<div class="card">
<img class="card-img-top" src="images/img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">가길동</h4>
<p class="card-text">노력은 배신하지 않는다.</p>
<a href="#" class="btn btn-primary stretched-link">프로필 보기</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">나길순</h4>
<p class="card-text">시간은 금이다.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">다길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/images.jpg" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">라길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
<div class="card" >
<div class="card-body" >
<h4 class="card-title">마길동</h4>
<p class="card-text">진정한 벗을 곁에 두어라.</p>
<a href="#" class="btn btn-primary">프로필 보기</a>
</div>
<img class="card-img-bottom" src="images/img_avatar2.png" alt="Card image">
</div>
</div>
</div><!--container-->
</body>
</html>결과)
'bootstrap' 카테고리의 다른 글
| 46일차 2023-05-11 (0) | 2023.05.11 |
|---|---|
| 45일차 2023-05-10 (0) | 2023.05.10 |
| 44일차 2023-05-09 (0) | 2023.05.09 |
| 42일차 2023-05-04 (0) | 2023.05.04 |
| 41일차 2023-05-03 (0) | 2023.05.03 |