Bootstrap 3.3.7 경고, 다이어로그, 접기
경고(alert)
응용 프로그램은 각종 정보를 표시하거나 사용자에게 확인 및 입력 등을 재촉하기 위한 인터페이스가 준비되어 있다. “경고(alert)“와 “다이어로그(dialog)“이다. Bootstrap에도 이러한 인터페이스를 실현하기 위한 기능이 포함되어 있다.
우선 가장 간단한 “경고(alert)“부터 설명하겠다. Bootstrap에는 약간 메시지 등을 표시하기 위하여 아래와 같이 경고 표시를 제공할 수 있다.
<div class="alert 알람 클래스">
...알람 내용...
</div>
class에 “alert"를 지정하면, 경고 표시된다. 단, 그것만으로는 윤곽선만 표시되므로 실제 이용시에는 아울러 아래와 같이 클래스 중에 하나를 추가한다.
| 클래스 | 설명 |
|---|---|
| alert-info | 약간의 정보 등을 표시한다. |
| alert-success | 어떤 조작이 성공했을 때에 표시하는데 사용한다. |
| alert-warning | 경고 표시이다. |
| alert-danger | 위험을 전하기 위한 표시이다. |
이들을 이용하여 경고 표시를 만들 수 있다. 아래에 그 이용 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>알람, 다이어로그 표시</h1>
<h2 >Alert</h2>
</div>
<div>
<div class="alert alert-info">
<h4>Alert!</h4>
이것은 경고 표시입니다.
</div>
<div class="alert alert-success">
<h4>Alert!</h4>
이것은 경고 표시입니다.
</div>
<div class="alert alert-warning">
<h4>Alert!</h4>
이것은 경고 표시입니다.
</div>
<div class="alert alert-danger">
<h4>Alert!</h4>
이것은 경고 표시입니다.
</div>
</div>
</div>
</div>
</body>
4개의 경고가 표시된다.
경고 표시 ON/OFF
이 경고는 페이지에 처음부터 표시한다. 단순한 디자인이다. 하지만 실제 경고는 필요에 따라 화면에 표시하거나, 또는 닫기 상자(close box)로 닫을 수 없다면 안 될 것이다.
이러한 경고 같은 작업을 위해는 몇 가지 추가 요소가 필요하다. 먼저 경고 중에 닫기 상자의 표시해야 할 필요가 있을 것이다. 그리고 경고를 표시하는 버튼도 있어야 될 것이다.
닫기 상자(close box)
<a href="#" data-dismiss="alert">×</a>
닫기 상자는 <a> 태그로 사용할 수 있다. 이것은 data-dismiss="alert "라는 속성을 반드시 준비하여 작성한다. 이를 준비하기 위한 경고의 오른쪽 상단에 닫기 상자를 볼 수 있다. 또한, 닫기 상자의 “×"는 <a> 태그에 “×"표시한다.
닫고 사라질 때 효과를 걸 수 있다. 이것은 경고 <div> 태그에 "fade in"클래스를 추가한다. 이것으로 서서히 경고를 사라질 수 있도록 된다.
경고 표시 제어
이것으로 ‘클릭 후 닫기 경고"가 되었다. 그럼 경고를 숨겨놨다가 버튼 등을 클릭하여 표시하려면 어떻게할까?
경보 숨기기로 유지
이는 간단하다. 스타일을 설정하고 숨겨두면 된다. 경고 <div> 태그에 아래와 같은 형태로 스타일 설정하면 된다.
style="display:none;"
경고 표시하기
경고를 표시하려면 숨겨져 있는 <div> 태그를 표시시키면 된다. 이는 jQuery의 show 메소드를 사용하면 편리하다.
$('경보 태그 지정').show();
<button> 태그 등에서 onclick에 이렇게 실행되도록 하여, 클릭하면 경고를 표시할 수 있다.
그럼 간단한 사용 예제를 보도록 하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>アラート・ダイアログ</h1>
<h2 >Alert</h2>
</div>
<div>
<button class="btn btn-default" onclick="$('#alert').show()">
Show Alert</button>
</div>
<div> </div>
<div id="alert" class="alert alert-success fade in" style="display:none;">
<a href="#" class="close" data-dismiss="alert"
aria-label="close">×</a>
<h4>Alert!</h4>
이것은 알람 표시입니다.
</div>
</div>
</div>
</div>
</body>
</html>
페이지를 방문하여 “Show Alert"버튼을 누르면 경보가 표시된다. 그리고 닫기 상자를 클릭하면 경고를 닫힌다.
모달 다이어로그(modal-dialog)
경고는 어디까지나 콘텐츠에 메시지로 삽입되는 것이었다면, “다이어로그"는 화면 위에 다른 창으로 뭔가를 표시하기 위해 사용된다. 이는 “대화 상자"라고도 한다.
다이어로그는 조금 복잡한 태그 구조이다. 경고(alert)와 동일하게, 사전에 표시하는 다이어로그 내용을 HTML 태그로 작성해서 준비두고, 이것을 버튼 클릭 등으로 표시하는 방식이다. 우선은 다이어로그의 태그 구조를 정리하면 아래와 같다.
<div class="modal fade" id="다이어로그 아이디" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...헤더 표시...
</div>
<div class="modal-body">
...바디 표시...
</div>
<div class="modal-footer">
...풋터 표시...
</div>
</div>
</div>
</div>
매우 복잡하고 이해하기 어려울 수 있다. 좀 더 알기 쉽게 정리하자면, 아래와 같은 구조로 되어있는 것을 알 수 있다.
대화 전체
<div class="modal-dialog">
컨텐츠 부분
<div class="modal-content">
헤더, 바디, 풋터
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
다이어로그는 class="modal-dialog"를 지정한 <div> 태그로 만든다. 그 안에 내용을 보면 class="modal-content"태그를 제공하고, 더불어 그 안에 헤더, 바디 및 풋터 태그를 준비하여 내용을 작성한다. 이 구성이 다이어로그의 기본형으로 생각할 수 있다.
다이어로그 열기(open) 및 닫기(close)
다이어로그는 단지 표시 태그를 준비한 것만으로는 사용할 수 없다. 다이어로그를 호출하여 표시하거나 닫을 수 있는 구조도 준비해야 한다.
다이어로그 열기
다이어로그를 열려면 <a> 태그를 이용한다. 이것은 아래와 같은 형태가 된다.
<a href="다이어로그의 지정" data-toggle="modal"> ...... </a>
href에서 여는 다이어로그 <div> 태그를 지정한다. 이는 ID를 사용하여 지정하면 된다. 태그에는 data-toggle="modal"라는 속성을 지정한다. 그러면 href에 지정된 ID의 다이어로그가 표시되게 된다.
다이어로그 닫기
대화를 닫으려면 이것도 <a> 태그를 사용한다. 이는 다이어로그의 태그(일반적으로 풋터 태그)에 제공한다.
<a href="#" data-dismiss="modal"> ...... </a>
속성으로 data-dismiss="modal"을 사용할 수 있어야 한다. 그러면 자동으로 대화 상자를 닫을 수 있다.
그럼 실제로 간단한 대화를 호출 예제를 보도록 하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>경로, 다이어로그</h1>
<h2 >다이어로그</h2>
</div>
<a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>
<div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="dlogLabel">
Dialog!
</h4>
</div>
<div class="modal-body">
이것은 다이어로그의 메세지입니다.
</div>
<div class="modal-footer">
<a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
여기에서 “Show Dialog"버튼을 클릭하면 다이어로그가 나타난다. 다이어로그의 “Close"버튼을 클릭하면 다이어로그가 닫힌다.
접기(collapse)
경고는 필요에 따라 확 나타나고 닫겨 사라진다. 그런데, 필요에 따라 표시하거나 지우거나 할 수 있는 인터페이스로는 다른 것이 사용된다.
그것이 “접기 표시(Collapse)“라는 것이다. 이것은 다음과 같은 형태로 작성된다.
<div class="collapse">
...... 표시 내용 ......
</div>
이처럼 class="colapse"를 지정한 <div> 태그를 준비해두면, 접기 표시를 할수 있는 태그로 만들 수 있다. 이 태그의 표시를 접기하거나 확장하려면 이를 위한 <a> 태그를 준비해 둔다.
<a data-toggle="collapse" href="접어서 작게 하는 항목 지정"> ...... </a>
href에는 class="collapse"를 지정한 태그를 ID 등으로 지정한다. 이것으로 링크를 클릭할 때마다 접기 표시 태그를 표시하거나 숨기거나 한다.
아래에 사용 예를 들어 두었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>알랄, 다이어로그, 접기</h1>
<h2 >Collapse</h2>
</div>
<div>
<a role="button" class="btn btn-default" data-toggle="collapse" href="#panel">Show Collapse</a>
</div>
<div> </div>
<div id="panel" class="collapse">
<div class="panel panel-default">
<div class="panel-body">
표시하는 패널이다.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
버튼을 클릭하면 메시지가 표시되었다가 사라지거나 한다. 간단히 접기 표시를 만들 수 있는 구성 요소로 기억두도록 하자.