문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Alerts======
<WRAP left notice 80%>
  * description : Bootstrap Alerts
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Alerts=====
Bootstrap은 미리 정의 된 경고 메시지를 생성하는 쉬운 방법을 제공합니다:\\
{{:wiki:bootstrap:bootstrap_note:bootstrap-alerts.png?600|}}\\
출처: [[https://www.w3schools.com/bootstrap/bootstrap_alerts.asp#Alerts|W3Schools.com - Bootstrap Alerts]]\\
\\
Alerts는 ''%%.alert%%'' 클래스, 그리고 그 뒤에 4 개의 컨텍스추얼 클래스인 ''%%.alert-success%%'', ''%%.alert-info%%'', ''%%.alert-warning%%'' 또는 ''%%.alert-danger%%'' 중 하나를 사용하여 생성합니다.\\
\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Alerts</h2>
        <div class="alert alert-success">
            <strong>Success!</strong> 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>

</body>
</HTML>
\\
=====Alert Links=====
Alert 박스 내부의 모든 링크에 ''%%alert-link%%'' 클래스를 추가하여 "일치하는 컬러의 링크"를 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Alerts</h2>
        <p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p>
        <div class="alert alert-success">
            <strong>Success!</strong> you should <a href="#" class="alert-link"> read this message</a>.
        </div>
        <div class="alert alert-info">
            <strong>Info!</strong> you should <a href="#" class="alert-link"> read this message</a>.
        </div>
        <div class="alert alert-warning">
            <strong>Warning!</strong> you should <a href="#" class="alert-link"> read this message</a>.
        </div>
        <div class="alert alert-danger">
            <strong>Danger!</strong> you should <a href="#" class="alert-link"> read this message</a>.
        </div>
    </div>

</body>
</HTML>
\\
=====Closing Alerts=====
Alert 메시지를 닫으려면, alert 컨테이너에 ''%%.alert-dismissible%%'' 클래스를 추가합니다.\\
그런 다음 링크 또는 버튼 요소에 ''%%class="close"%%'' 및 ''%%data-dismiss="alert"%%''를 추가합니다.(이것을 클릭하면 경고 상자가 사라집니다)\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Alerts</h2>
        <p>The a element with class="close" and data-dismiss="alert" is used to close the alert box.</p>
        <p>The alert-dismissible class adds some extra padding to the close button.</p>

        <div class="alert alert-success alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>

        <div class="alert alert-info alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Info!</strong> This alert box could indicate a successful or positive action.
        </div>

        <div class="alert alert-warning alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Warning!</strong> This alert box could indicate a successful or positive action.
        </div>

        <div class="alert alert-danger alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Danger!</strong> This alert box could indicate a successful or positive action.
        </div>
    </div>

</body>
</HTML>
\\
**aria-* 속성과 **%%&times;%%** 설명**\\
스크린 리더를 사용하는 사람들의 접근성을 높이려면, 닫기 버튼을 만들 때 %%aria-label = "close"%% 속성을 포함해야 합니다.\\
\\
**%%&times;%%** (×)는 문자 "x"가 아닌 닫기 버튼의 기본 아이콘인 %%HTML%% 엔티티(entity)입니다.\\
모든 %%HTML Entities%% 목록을 보려면 [[https://www.w3schools.com/charsets/ref_html_entities_4.asp|HTML Entities Reference]]를 방문하십시오.\\ 
\\
=====Animated Alerts=====
''%%.fade%%'' 및 ''%%.in%%'' 클래스는 Alert 메시지를 닫을 때 페이딩 효과를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Animated Alerts</h2>
        <p>The .fade and .in classes adds a fading effect when closing the alert message.</p>
        <div class="alert alert-success alert-dismissable fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
        <div class="alert alert-info alert-dismissable fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Info!</strong> This alert box could indicate a successful or positive action.
        </div>
        <div class="alert alert-warning alert-dismissable fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Warning!</strong> This alert box could indicate a successful or positive action.
        </div>
        <div class="alert alert-danger alert-dismissable fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Danger!</strong> This alert box could indicate a successful or positive action.
        </div>
    </div>

</body>
</HTML> 









{{tag>오션 Bootstrap Alerts}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
