======Bootstrap Alerts======
* description : Bootstrap Alerts
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-03-25
\\
=====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%%'' 중 하나를 사용하여 생성합니다.\\
\\
====예제====
Alerts
Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
\\
=====Alert Links=====
Alert 박스 내부의 모든 링크에 ''%%alert-link%%'' 클래스를 추가하여 "일치하는 컬러의 링크"를 만듭니다.\\
====예제====
Alerts
Add the alert-link class to any links inside the alert box to create "matching colored links".
\\
=====Closing Alerts=====
Alert 메시지를 닫으려면, alert 컨테이너에 ''%%.alert-dismissible%%'' 클래스를 추가합니다.\\
그런 다음 링크 또는 버튼 요소에 ''%%class="close"%%'' 및 ''%%data-dismiss="alert"%%''를 추가합니다.(이것을 클릭하면 경고 상자가 사라집니다)\\
====예제====
Alerts
The a element with class="close" and data-dismiss="alert" is used to close the alert box.
The alert-dismissible class adds some extra padding to the close button.
×
Success! This alert box could indicate a successful or positive action.
×
Info! This alert box could indicate a successful or positive action.
×
Warning! This alert box could indicate a successful or positive action.
×
Danger! This alert box could indicate a successful or positive action.
\\
**aria-* 속성과 **%%×%%** 설명**\\
스크린 리더를 사용하는 사람들의 접근성을 높이려면, 닫기 버튼을 만들 때 %%aria-label = "close"%% 속성을 포함해야 합니다.\\
\\
**%%×%%** (×)는 문자 "x"가 아닌 닫기 버튼의 기본 아이콘인 %%HTML%% 엔티티(entity)입니다.\\
모든 %%HTML Entities%% 목록을 보려면 [[https://www.w3schools.com/charsets/ref_html_entities_4.asp|HTML Entities Reference]]를 방문하십시오.\\
\\
=====Animated Alerts=====
''%%.fade%%'' 및 ''%%.in%%'' 클래스는 Alert 메시지를 닫을 때 페이딩 효과를 추가합니다.\\
====예제====
Animated Alerts
The .fade and .in classes adds a fading effect when closing the alert message.
×
Success! This alert box could indicate a successful or positive action.
×
Info! This alert box could indicate a successful or positive action.
×
Warning! This alert box could indicate a successful or positive action.
×
Danger! This alert box could indicate a successful or positive action.
{{tag>오션 Bootstrap Alerts}}