[Bootstrap] 웹사이트 만들기 - 뉴스 섹션

뉴스 섹션 결과물

PC 화면

 

[뉴스보기] 클릭 시 모달 실행

 

모바일 화면

 

index.html

<!-- 뉴스 섹션 -->
    <section id="news" class="py-5">
        <div class="container">
            <div class="row p-4 align-items-center">
                <div class="col-lg-9 text-white">
                    <h2 class="fw-bold mb-3">ART Cook 뉴스</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt recusandae, vel dolor officiis, doloremque ratione cumque deleniti quibusdam impedit pariatur delectus? Accusantium quod magnam facere nulla ducimus ullam harum quae!</p> 
                </div>

                <div class="col-lg-3">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#newsModal">
                    뉴스보기
                    </button>
  
                    <!-- Modal -->
                    <div class="modal fade" id="newsModal" tabindex="-1" aria-labellnewsModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="newsModalLabel">ART Cook News</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="ratio ratio-16x9">
                                        <iframe src="https://www.youtube.com/embed/VpxvOijmOAE?si=hvJVr4c57LcIGl-R" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>     
            </div>
        </div>
    </section>

 

<modal>

부트스트랩 모달 예제 사용

https://getbootstrap.com/docs/5.3/components/modal/

Modal

 

<ratio>

iframe 태그로 영상을 가져올 시 모달 바디안에 사이즈 비율을 맞춰주어야 함.

ratio ratio-16x9 사이즈로 적용

 

style.css

/* 뉴스 영역 */
#news {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url(../images/news-bg.jpg);
    background-size: cover;
    background-position: center;
}