BootStrap5(BS5) 공부하기 4

이미지를 첨부할때, 이미지 모양에는 세 종류가 있다 : rounded, circle, thumbnail

다음은 rounded로 이미지 모양을 지정하는 방식이다.

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">

circle로 이미지 모양을 지정하려면 다음과 같이 한다.

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">

Thumbnail형식도 마찬가지다.

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 

왼쪽, 오른쪽에 각각 align되는 이미지를 만들려면 float-start, float-end를 사용한다.

<img src="paris.jpg" class="float-start" alt="Paris" width="304" height="236"> 
  <img src="paris.jpg" class="float-end" alt="Paris" width="304" height="236"> 

이미지를 중심에 추가하려면 mx-auto, d-block을 추가한다.

<img src="paris.jpg" class="mx-auto d-block" style="width:50%"> 

반응형 이미지는 자동으로 스크린의 크기에 사이즈를 조정한다.
img-fluid를 태그에 추가하면 반응형으로 만들 수 있다.

<img class="img-fluid" src="ny.jpg" alt="New York" width="1100" height="500">

부트스트랩을 이용해 경고메시지를 만들 수 있다.

 <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 class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>

경고 박스 내부에 링크를 만들고자 하면 alert-link를 사용한다.

<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.

경고 메시지에 닫기 버튼을 만들고자 하면 다음과 같이 한다.

<div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

경고창을 닫을 때 fade 효과를 주기 위해서는 fade show를 기재해준다.

<div class="alert alert-success alert-dismissible fade show">