웹_프론트_백엔드/JAVA프레임윅기반_풀스택

2020.05.14

shine94 2020. 5. 14. 08:55

1. 레이어드 팝업

** ModalBoxes1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/150_ModalBoxes1.css" rel="stylesheet" type="text/css">
<title>Modal Boxes</title>
</head>
<body>
<!-- modal 로 작동하는 레이어드 팝업 (layered popup> -->
<button id="myBtn">Modal 팝업</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>팝업창의 내용입니다. 어쩌구 저쩌구</p>
  </div>

</div>

<script>

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

// 버튼 클릭하면 팝업 보이게 하기
btn.onclick = function() {
  modal.style.display = "block";
}

// 팝업의 x 버튼 누르면 닫히게 하기
span.onclick = function() {
  modal.style.display = "none";
}

// 팝업 창 바깥을 클릭해도 팝업이 닫히게 하기 (modal)
// <--> (반대, 팝업 창 바깥을 클릭해도 팝업이 닫히지 못하게 하기 : modeless)
window.onclick = function(event) {
  // event.target : event 발생한 element 객체
  if(event.target == modal) {
    modal.style.display = "none";
  }
}

</script>


</body>
</html>

 

** ModalBoxes1.css

@charset "UTF-8";

.modal {
    width: 100%;    /* 윈도우 전체 차지 */
    height: 100%;   /* 윈도우 전체 차지*/
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    z-index: 1; /* 최상단에 보이게 하기 */
    overflow: auto; /* 필요한 경우 스크롤바 생기기 */

    display: none;  /* 기본적으로 팝업 안보이기 */
}
.modal-content {
    width: 80%;
    background-color: #FEFEFE;

    margin: 15% auto; /* top에서 15%, 좌우 auto: 좌우 균일(중앙정렬) */
    
    padding: 20px;
    border: 1px solid #888;
}
.close {
    font-size: 28px;
    font-weight: bold;
    color: #AAA;
    float: right;
}
.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

 


2. 애니메이션 Zomm 효과 준 레이어드 팝업

** 111_LoginForm.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/111_LoginForm.css" rel="stylesheet" type="text/css">
<title>Login Form</title>

</head>
<body>
<h2>Modal Login Form</h2>

<!-- Button to open the modal login form -->
<button id="loginBtn" style="width:auto">Login</button>

<!-- The Modal -->
<div id="id01" class="modal">

	<!-- Form : 이 위치에 form 을 넣습니다 -->	
	<form class="modal-content animate" action="https://www.w3schools.com/action_page.php" method="post">
	  <div class="imgcontainer">
		<!-- 닫기버튼  -->
		<span class="close">&times;</span>
		  <!-- 이미지  -->
		  <img src="../img/img_avatar2.png" class="avater" alt="Avatar">
	  </div>
	
	  <div class="container">
		<!-- 로그인 form -->
		<label for="uname"><b>Username</b></label>
		<input type="text" placeholder="Enter Username" name="uname" required>

		<label for="psw"><b>Password</b></label>
		<input type="text" placeholder="Enter Password" name="psw" required>

		<button type="submit">Login</button>

		<label>
			<input type="checkbox" name="remember" checked>Remember me
		</label>
	  </div>
	
	  <div class="container" style="background-color:#f1f1f1">
		<!-- 취소 버튼 -->
		<button type="button" class="cancelbtn">Cancel</button>
		<!-- 비밀번호 잊으셨나요? -->
		<span class="psw">Forget <a href="#">password?</a></span>
	    
	  </div>
	</form>

</div>


<script>

var loginBtn = document.getElementById("loginBtn");
var modal = document.getElementById("id01");
var close = document.getElementsByClassName("close")[0];

loginBtn.onclick = function() {
	modal.style.display = "block";
}

close.onclick = function() {
	modal.style.display = "none";
}

window.onclick = function(event) {
	if(event.target == modal){
		modal.style.display = "none";
	}
}

</script>

</body>
</html>

 

** 111_LoginForm.css

@charset "UTF-8";

/* Modal */
.modal {
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: auto;
    padding-top: 60px;

    display: none;  /* 처음에는 팝업 안보이게 하기 */
}
.modal-content {    /* modal 팝업 안에 form */
    background-color: #FEFEFE;
    width: 80%;
    margin: 5px auto;
    border: 1px solid #888;
}
.imgcontainer {
    text-align: center; /* 이미지 중앙 정렬 */
    margin: 24px 0 12px 0;  /* 바깥 여백 */
    position: relative;
}
.close {    /* 닫기 버튼 (x) */
    font-size: 35px;
    font-weight: bold;
    color: black;
    /* position 설정하여 우상단으로 배치 */
    position: absolute;
    right: 25px;
    top: 0;
}
.close:hover, .close:focus {
    color: red;
    cursor: pointer;
}
img.avater {
    width: 40%; /* 원래 이미지 크기의 40% */
    border-radius: 50%;    /* 이미지 둥글게 */
}

/* ----------------------------------------------- */
/* form */
.container {
    padding: 16px;
}
input[type=text], input[type=password] {
    width: 100%;    /* 좌우폭 100% */
    padding: 12px 20px; /* 안쪽 여백 */
    margin: 8px 0;
    border: 1px solid #ccc;
    display: inline-block;
    box-sizing: border-box; /* border 등 size가 width 안으로 들어옴 */
}
button {    /* 버튼 기본 스타일 */
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    border: none;
    margin: 8px 0;
    cursor: pointer;
}
button:hover{
    opacity: 0.8;
}
.cancelbtn {
    width: auto;    /* 내부 담는 content 만큼의 폭 */
    padding: 10px 18px; /* 기본 버튼 스타일보다 작게 */
    background-color: #F44336;
}
span.psw {
    float: right; 
    padding-top: 16px;
}

/* 380 px 이하 화면에서 RWD */
@media screen and (max-width: 380px){
    .cancelbtn {
        width: 100%;
    }
    span.psw {
        float: none;
        display: block;
    }
}

/* 애니메이션 Zomm 효과 */
.animate {
    animation: animatezoom 0.6s;
}
@keyframes animatezoom {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

 


3. 이미지 레이어드 팝업

** 005_ModalImage.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Modal Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/005_ModalImage.css" rel="stylesheet" type="text/css">
</head>
<body>

<h2>Modal Image</h2>
<p>hidden 이미지가 기본적으로 존재</p>
<p>JavaScript로 modal 안에 이미지 보여지게 함. 
modal 안의 텍스트도 alt 를 사용해서 나타나게 함</p>

<img id="myImg" src="../img/img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>

var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById('caption');

img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;  // this : 함수가 소유한 객체..!!, this는 myImg
  captionText.innerHTML = this.alt;
}

var close = document.getElementsByClassName("close")[0];
close.onclick = function(){
  modal.style.display = "none";
}


</script>
</body>
</html>

 

** 005_ModalImage.css

@charset "UTF-8";

#myImg {
    cursor: pointer;
    border-radius: 5px;
    transform: 0.3s;    /* 모든 css property 에 대해 transition 발생 */
}
#myImg:hover {opacity: 0.7;}

/* Modal */
.modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: auto;
    padding-top: 100px; /* 이미지가 top에서 100px 떨어져 보이기 */

    display: none;
}

/* modal 안의 image */
.modal-content {
    width: 80%;
    max-width: 700px;
    display: block; /* block 으로 해야 margin 가능 */
    margin: auto;   /* margin을 auto로 했기 때문에 중앙정렬이 됨..!! */
}
#caption {
    color: #ccc;
    text-align: center;
    width: 80%;
    max-width: 700px;
    padding: 10px 0;

    display: block; /* height, width, margin 은 block에서만 조정 가능 */

    height: 150px;
    margin: auto;
}
.close {
    color: #F1F1F1;
    font-size: 40px;
    font-weight: bold;

    /* 우상단 코너에 배치 */
    position: absolute;
    top: 15px;
    right: 35px;

    transition: 0.3s;
}
.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 모바일 화면에서는 100% 차지하게 보이기 */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/**/
.modal-content, #caption {
    /* animation 으로 해도 되고 transition으로 처리해도 된다..!! */
    animation-name: zoom;
    animation-duration: 0.6s;
}
@keyframes zoom {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

 


4. bs001_intro.html 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 아래의 순서는 절대로 변경되면 안됨...!! -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <title>Document</title>
</head>

<!-- 
BootStrap 은 HTML, CSS, JavaScript 를 활용한 
반응형 웹 (Responsive Web) 프레임워크 .

최신버젼은 BootStrap4

- 모던한 스타일을 손쉽게 빨리 제작 가능케 함
- typography, 폼, 버튼, 테이블, 네빙게이션, 모달, 이미지 carousle 등.. 많은 템플릿 제공.
- Mobile-First 로 설계됨
- 현재 시중의 대부분의 브라우저 지원 (크롬, 사파리, IE10+, Edge, 사파리, 오페라)

** IE9 이하 버젼의 브라우저는 지원 안함,  IE8-9 는 BS3 버젼 사용해야 함
** BS4 에 와서는 Glyphicons 지원이 빠짐.  → Font Awesome 사용하자.


BS4 세팅?
	방법1: BS4 CDN 사용   (Content Delivery Network)
	방법2: getbootstrap.com 에서 다운로드

** CDN을 사용하면 브라우저가 cache 하므로. 페이지 로딩 속도가 빨라진다.
** jQuery? Popper? : BS4 의 JavaScript 부분은 jQuery, Popper 라이브러리를 사용한다.
					(만약 BS4의 스타일만 사용하는거라면, 굳이 필요하진 않다) 


공식: http://getbootstrap.com/
BS4 각종예제: http://getbootstrap.com/docs/4.1/examples/   (함 보자)
BS4를 활용한 테마들 : https://themes.getbootstrap.com/   (유료이나, liveview 등으로 볼수 있다) 
-->

<body>

    <div class="container"> 
        <div class="row">
          <div class="col-sm-4">
            <h3>Column 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
          </div>
          <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
          </div>
          <div class="col-sm-4">
            <h3>Column 3</h3>        
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
          </div>
        </div>
      </div>
      
</body>
</html>

 

 

5. bs002_grid.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- MaxCDN 사용 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <title>Document</title>
</head>

<!-- 
BS4 도 12 grid 시스템 사용

다음과 같이 5종류의 class 제공
screen width  별로 다음과 같다

.col- (extra small devices - 576px 미만)
.col-sm- (small devices - 576px 이상)
.col-md- (medium devices - 768px 이상)
.col-lg- (large devices - 992px 이상)
.col-xl- (xlarge devices - 1200px 이상)


BS4 grid 의 기본 구조

방법1]
우선은 <div class="row"> 를 만들고 
그 안에 넣고자 하는 컬럼 들을 넣는다  .col-*-*  클래스들을 넣는다.
	첫번째 * 는 screen width : sm, md, lg, xl 
	두번째 * 는 컬럼개수  : 1 ~ 12

	<div class="row">
	  <div class="col-*-*"></div>
	  <div class="col-*-*"></div>
	</div>
	<div class="row">
	  <div class="col-*-*"></div>
	  <div class="col-*-*"></div>
	  <div class="col-*-*"></div>
	</div>

방법2]
걍 아래와 같이 하면 BS4 에서 알아서 균등 배분 함
아래와 같은 경우 1/3 = 33.3% 씩 차지
	<div class="row">
	  <div class="col"></div>
	  <div class="col"></div>
	  <div class="col"></div>
	</div>

-->

<body>

    <div class="container-fluid">
        <h1>균등폭</h1>
        <p>균등한 폭의 컬럼들로 구성 class="col" 의 개수만큼 분배</p>
        <p>화면을 늘렸다 줄여도 균등폭 유지</p>
        <div class="row">
          <div class="col" style="background-color:lavender;">.col</div>
          <div class="col" style="background-color:orange;">.col</div>
          <div class="col" style="background-color:lavender;">.col</div>
        </div>
    </div>

    <hr>
    
    <div class="container-fluid">
        <h1>반응형</h1>
        <p>화면을 늘렸다 줄여보자</p>
        <p>.col-sm-* (576px 이상) 이다</p>
        <p>576px 보다 작아지면, 100%가 된다</p>
        <div class="row">
          <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
          <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
          <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        </div>
    </div>
    <hr>

</body>
</html>

 


6. bs003_typography.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BS4 typhgraphy</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<!-- 
BS4 의 글,문단 기본 스타일
font-size : 16px.
line-height : 1.5
font-family → "Helvetica Neue", Helvetica, Arial, sans-serif.

<p> : 
	margin-top: 0  
	margin-bottom: 1rem (16px 디폴트).
-->
<body>
<div class="container">
  <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>
</div>

<hr>
<div class="container">
  <h1>Display Headings</h1>
  <p>Display headings 은 기존 heading 보다 더 강조된 heading (font-size 도 더 크고, font-weight는 더 얇다):</p>
  <p>display-1 ~ display-4 까지 4단계 제공</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
</div>

<hr>
<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>&lt;small&gt; 을 사용해서  부제목 과 같은 효과 (좀 더 얇은):</p>       
  <h1>h1 heading <small>secondary text</small></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>
</div>


</body>
</html>

 


7. bs004_color.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BS4-Colors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<!-- 
BS4 는 
의미에 따른 색상(Contextual Color)으로 표현할수 있는 class 들을 제공한다
.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)
.text-light
-->
<body>
<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p 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">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>
<hr>
<div>
  <h2>Contextual Link Colors</h2>
  <p>마우스를 올려보세요</p>
  <a href="#" class="text-muted">Muted link.</a>
  <a href="#" class="text-primary">Primary link.</a>
  <a href="#" class="text-success">Success link.</a>
  <a href="#" class="text-info">Info link.</a>
  <a href="#" class="text-warning">Warning link.</a>
  <a href="#" class="text-danger">Danger link.</a>
  <a href="#" class="text-secondary">Secondary link.</a>
  <a href="#" class="text-dark">Dark grey link.</a>
  <a href="#" class="text-body">Body/black link.</a>
  <a href="#" class="text-light">Light grey link.</a>
</div>
<hr>
<div class="container">
  <h2>텍스트 색상에 투명도(opacity)</h2>
  <p>.text-black-50 나 .text-white-50 로 50% 투명한 텍스트</p>
  <p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>
<hr>
<hr>
<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>배경색에도 '의미에 따른 색상' 클래스 제공</p>
  <p>.text-* 클래스를 같이 사용하면 텍스트 색상 선택 가능</p>
  <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>

 


8. bs005_table.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BS4 - table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<div>
  <h2>BS4 기본 Table</h2>
  <p><b>.table</b> 클래스 : 약간의 padding + 수평구분선선 제공:</p>            
<!-- 
BS4 에선 기본적으로 <table> 에 스타일 부여
.table 사용 : 약간의 padding + 수평구분선선 제공:
 -->
  <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>

<hr>

<div class="container">
  <h2>Striped Rows</h2>
  <p><b>.table-striped</b> 클래스는 격줄단위로 음영 스타일</p>            
  <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>

<br>

<div class="container">
  <h2>Bordered Table</h2>
  <p><b>.table-bordered</b> 클래스를 사용하면 테두리 생김:</p>            
  <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>

<hr>

<div class="container">
  <h2>Hover Rows</h2>
  <p><b>.table-hover</b> 클래스 사용하면 테이블 row에 마우스 올려놀을때 효과(회색):</p>            
  <table class="table table-hover">
    <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>

<br>

<div class="container">
  <h2>Black/Dark Table</h2>
  <p><b>.table-dark</b> 클래스 사용하면 검정배경테이블 (글자색은 흰색으로)</p>            
  <table class="table table-dark">
    <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>

<hr>

<div class="container">
  <h2>Dark Striped Table</h2>
  <p><b>.table-dark and .table-striped</b></p>            
  <table class="table table-dark 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>

<br>

<div class="container">
  <h2>Hoverable Dark Table</h2>
  <p><b>.table-hover</b> 클래스 사용하면 테이블 row에 마우스 올려놀을때 효과(회색): </p>            
  <table class="table table-dark table-hover">
    <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>

<hr>

<div class="container">
  <h2>테두리 없는 Table</h2>
  <p><b>.table-borderless</b></p>            
  <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>

<hr>

<div class="container">
  <h2>Contextual Classes</h2>
  <p> table 색상도 Contextual 색상 적용 가능, rows / cell </p>
  <p><b>.table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark</b></p>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<hr>

<div class="container">
  <h2>Table Head Colors</h2>
  <p><b>.thead-dark .thead-light</b></p>
  <table class="table">
    <thead class="thead-dark">
      <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>
  <br>
  <table class="table">
    <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>

<hr>

<div class="container">
  <h2>Small Table</h2>
  <p><b>.table-sm</b> 클래스는 padding을 반으로 줄여, 테이블을 작게 만든다</p>
  <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>

<hr>

<div class="container">
  <h2>반응형 Responsive Table</h2>
  <p><b>.table-responsive</b> 반응형 테이블 992px 보다 작아지면 좌우 스크롤 생김</p>                                                                                      
  <!-- 
 .table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
  
   -->
  <div class="table-responsive">
    <table class="table">
      <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>
        </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>



</body>
</html>

 


9. bs009_button.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BS4 button</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>BS4 Button 스타일</h2>
  <p><b>.btn</b> 과 <b>.btn-*</b> 클래스 사용</p>
  <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>
</div>
<hr>

<div>
  <h2>Button 스타일 적용 범위</h2>
  <p>&lt;a&gt;,&lt;button&gt;,&lt;input&gt; 에 쓰일수 있다</p>
  <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이다">
  <input type="submit" class="btn btn-info">
</div>
<hr>

<div class="container">
  <h2>Button Outline</h2>
  <p><b>.btn-outline-*</b> 클래스</p>
  <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>
<hr>

<div class="container">
  <h2>Button Sizes</h2>
  <p><b>.btn-lg</b> <b>.btn-md</b> <b>.btn-sm</b></p>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Default</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>
<hr>

<div class="container">
  <h2>Block Level Buttons</h2>
  <p>좌우폭 100% 사용하는 버튼</p>
  <p><b>.btn-block</b> 클래스</p>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-block">Button 2</button>
  <br>
  
  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-lg btn-block">Button 2</button>
  <br>
  
  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-sm btn-block">Button 2</button>
</div>

<div class="container">
  <h2>Button 상태 : active, disabled</h2>
  <p><b>.active</b>, <b>.disabled</b></p>
  <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 href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>


</body>
</html>

'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글

프론트엔드 웹 페이지 제작하기(5.8 ~ 5.17)  (0) 2020.05.18
2020.05.15  (0) 2020.05.15
2020.05.13  (0) 2020.05.13
2020.05.12  (0) 2020.05.12
2020.05.11  (0) 2020.05.11

'웹_프론트_백엔드/JAVA프레임윅기반_풀스택'의 다른글

  • 현재글2020.05.14

관련글

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

티스토리툴바