커뮤니티
포인트
로딩중
쿠폰
내 강의실
국비 신청 내역
수강권
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
부트스트랩(Modal) 에서 이미지를 넣는게 잘 안돼서요~
웹개발 종합반
4주차
북마크
저*틴
댓글
4
추천
0
조회수
25
조회수
25
답변 완료

부트스트랩 Modal 에서 버튼을 클릭했을 때 이미지가 잘 나오게 하고 싶은데요,

계속 해보는데 밑에까지가 최선이어서요 ㅠ


밑에 코드가 부트스트랩에 있는 기본 코드이구요,


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>



밑에 코드가 제가 해본 코드입니다.

이미지파일도 첨부합니다.

스파르타 즉문즉답


<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  커피/카페
</button>

<!-- Modal -->
<div>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

<!--          여기가 커피/카페 클릭했을 때 나오는 이미지-->
        <img src="static/1.png"/>


      </div>
<!--      <div class="modal-footer">-->
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!--        <button type="button" class="btn btn-primary">Understood</button>-->
      </div>
    </div>
  </div>
</div>
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴