반응형

메시지를 필요에 따라 표시하려면, "알림(alert)" 및 "다이아로그(dialog)"라고 것이 사용된다. Bootstrap에는 그러한 "필요에 따라 표시"하는 콤포넌트가 많이 포함되어 있다. 그 방법을 함께 살펴 보겠다.


경고(alert)

경고는 어디까지나 콘텐츠에 메시지로 삽입되는 것이 었습니다. 이 화면 위에 다른 창으로 뭔가를 표시 할 수 있습니다. 이러한 경우에 사용되는 것이 "대화 상자" 즉, "다이어로그"이다.

모달 다이어로그

다이어로그는 조금 복잡한 태그 구조이다. 경고(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"버튼을 클릭하면 다이어로그가 닫힌다.



모달 다이어로그(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)

그것이 "접기 표시(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>

버튼을 클릭하면 메시지가 표시되었다가 사라지거나 한다. 간단히 접기 표시를 만들 수 있는 구성 요소로 기억두도록 하자.



반응형

+ Recent posts