[Bootstrap] 웹사이트 만들기 - 포트폴리오 섹션

포트폴리오 섹션 결과물

PC 화면

 
패드 화면

 
모바일 화면

 

index.html

<!-- 포트폴리오 섹션 -->
     <section id="portfolio" class="bg-dark">
        <div class="container overflow-hidden">
            <div class="text-center text-white py-5">
                <h2 class="fw-bold mb-3">ART Cook 포트폴리오</h2>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, amet!</p>
            </div>
            <div class="row g-4 pb-5">
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio1.jpg" class="img-fluid img-thumbnail" alt="포트폴리오1">
                </div>
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio2.jpg" class="img-fluid img-thumbnail" alt="포트폴리오2">
                </div>
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio3.jpg" class="img-fluid img-thumbnail" alt="포트폴리오3">
                </div>
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio4.jpg" class="img-fluid img-thumbnail" alt="포트폴리오4">
                </div>
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio5.jpg" class="img-fluid img-thumbnail" alt="포트폴리오5">
                </div>
                <div class="col-lg-4 col-sm-6">
                    <img src="images/portfolio6.jpg" class="img-fluid img-thumbnail" alt="포트폴리오6">
                </div>
            </div>
        </div>
     </section>

 
<section>

• bg-dark : 섹션의 배경색 지정

 
<div>

• container : 섹션의 자식 요소를 컨테이너 레이아웃으로 배치
• overflow-hidden : 거터에서 튀어나오는 부분을 숨겨줌

 
<row>

• g-4 : 그리드 간의 거터(간격)를 4px 부여
• pb-5 : 패딩 바텀을 5px 부여

 
<col>

• col-lg-4  : 화면 크기가 대형(large) 일 때, 해당 열이 그리드의 4칸을 차지
• col-sm-6 :  : 화면 크기가 소형(small) 일 때, 해당 열이 그리드의 6칸을 차지

 
<img>

• img-thumbnail : 이미지에 테두리 효과