안녕하세요.
오늘은 자바스크립트에서 bootstrap 5의 경고창 컴포넌트 만드는 방법을 정리해 보려고 합니다. 자바스크립트의 기본 alert이 있지만 style이 기본 style이고, 자바스크립트의 내장 기능이기 때문에 변경하는 것이 어렵습니다. 그래서 bootstrap의 기능을 빌려 alert을 사용하면 style이 적용된 alert을 간단하게 활용하여 사용할 수 있습니다.
그럼 예제를 통해 하나씩 알아보도록 하겠습니다.
Alert 경고창
bootstrap에서는 alert 경고창의 스타일 8가지를 지원하고 있습니다. 색상에 따라 나타내는 내용, 상황을 다르게 줄 수 있는 효과가 있습니다. 기본적으로 간단한 알림을 줄 때에는 파란색, 성공을 알릴 때에는 초록색, 실패를 알릴 때에는 붉은색 등 표시를 다르게 줄 수 있습니다.
그럼 사용 방법부터 알아보도록 하겠습니다.
1. Alert 사용 예시
<div class="alert alert-primary" role="alert">
primary
</div>우선 가장 간단한 알림을 알려주는 예시입니다. 가장 기본적인 상태이며, bootstrap에서 흔하게 사용되는 primary의 색상을 넣어줬습니다.
class에 "alert-primary"를 입력해 주고, role="alert" 속성을 추가해 줍니다.
실행 결과
파란색 계열의 깔끔한 알림 창이 나왔습니다. 그럼 primary 외에도 어떤 색상들이 있는지 확인해 보겠습니다.
스타일별 alert
<div style="width:300px;">
<div class="alert alert-primary" role="alert">
primary
</div>
<div class="alert alert-secondary" role="alert">
secondary
</div>
<div class="alert alert-success" role="alert">
success
</div>
<div class="alert alert-danger" role="alert">
danger
</div>
<div class="alert alert-warning" role="alert">
warning
</div>
<div class="alert alert-info" role="alert">
info
</div>
<div class="alert alert-light" role="alert">
light
</div>
<div class="alert alert-dark" role="alert">
dark
</div>
</div>위의 예제 소스 코드를 보게 되면 8가지의 색상별로 alert을 만들어 줬습니다.
primary, secondary, success, danger, warning, info, light, dark
실행 결과
실행 결과는 8가지의 스타일이 깔끔하게 잘 나왔습니다. 예전에 사용했던 bootstrap 하위 버전의 스타일과 많이 바뀐 것 같네요! 개인적으로 지금 버전의 색상이 더 좋은 것 같습니다. :)
2. Alert 버튼 추가 예시
<div class="alert alert-primary alert-dismissible fade show" role="alert">
버튼 확인
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>alert을 띄웠다면 확인 후 닫는 버튼도 있어야 될것 같네요. 그래서 이번에는 alert dialog안에 버튼을 추가해 줬습니다.
- <div class="alert"> 요소에 "alert-dismissible"를 추가
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> 요소 추가
닫기 버튼을 만들어 줬는데, 버튼에 class="btn-close"를 주게 되면 dialog내의 버튼은 close 버튼으로 기능이 활성화됩니다. bootstrap에서 처리해 주는 기능입니다.
실행 결과
위의 실행 결과처럼 "X"표시의 닫기 버튼을 누르게 되면 alert 경고창은 닫히게 됩니다.
3. 아이콘 추가 예시
<div class="alert alert-primary alert-dismissible" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
안녕하세요.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>alert 경고창을 그냥 사용하기보단 상황에 따라 색상을 다르게 주고 거기에 아이콘을 추가해주면 알림 내용을 강조할 수 있습니다. 위의 예시 코드는 "!"(느낌표)를 표시하는 아이콘입니다. 실행 결과를 보겠습니다.
실행 결과
위의 실행 결과와 같이 간단하게 아이콘이 추가된 모습입니다. 문자만 넣었을 때보다 훨씬 강조되는 느낌입니다. 그럼 다른 예시는 어떤 게 있는지 확인해 보겠습니다.
아이콘별 alert
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div style="width:300px;">
<div class="alert alert-primary alert-dismissible d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
안녕하세요.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
완료하였습니다.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
시스템 점검중입니다.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
장애가 발생했습니다.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>위의 예제 코드와 같이 상황별로 아이콘과 색상을 강조해 줬습니다.
실행 결과
아이콘을 포함하여 alert을 띄우니 훨씬 더 강조되는 느낌입니다. 위의 아이콘이 말고 개인적으로 원하는 아이콘을 넣어서 커스터마이징하여 사용하면 훨씬 더 좋을 것 같습니다!
마무리
오늘은 이렇게 bootstrap의 alert 사용하는 방법을 정리해 봤습니다. 보통 개발을 하게 되면 자바스크립트의 기본 alert을 많이 사용하게 되는데, 평소에는 눈에 잘 안 보이다가 경고창이 뜨게 되면 사용자 입장에서는 굉장히 밋밋할 수 있습니다. UI는 예쁘게 스타일했는데 경고창 하나 때문에 전체적인 분위기가 바뀔 수 있습니다. 오늘 알아본 bootstrap의 alert 예시들과 같이 사용 방법은 크게 어렵지 않기 때문에 상황에 맞춰 스타일링 된 alert을 사용하는 것도 좋을 것 같습니다. :)
그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.
'javascript > javascript' 카테고리의 다른 글
| 자바스크립트 bootstrap5 아코디언 만들기 (accordion) (0) | 2023.02.03 |
|---|---|
| 자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스) (0) | 2023.02.02 |
| 자바스크립트 split 문자열 자르는 방법과 활용 (0) | 2023.01.31 |
| 자바스크립트 isNaN 함수 기능 정리 (0) | 2023.01.30 |
| 자바스크립트 async / await 이해하기 ! (0) | 2023.01.26 |
