BootStrap - 종합(3)

이전 포스팅에 이어서 2번째 섹션에 대해서 부트스트랩을 사용해보겠습니다.

1. Section 나누기

 <section class="container-fluid px-0">
   		<!-- 수직 정렬 (가운데) -->
        <div class="row align-items-center">
          
          	<!-- 뷰포트 너비가 라지사이즈 이상이면 6유닛씩, 미만이면 12유닛씩 차지  -->
            <div class="col-lg-6">
                <img src="./img/milk.png" alt="milk" class="img-fluid">
            </div>
            <div class="col-lg-6 text-center">
                <h2>MUSEUM OF CANDY</h2>
                <img src="./img/lolli_icon.png" alt="">
                <p class="lead">
                    텍스트더미
                </p>
            </div>
        </div>

    </section>

<!--
lead
문단의 단락을 좀 더 돋보이게 해줍니다. ( 글꼴이 커지는등 변화가 생김 )
-->

1.1 새로운 행 안에 문단그룹 중첩시키기

  <section class="container-fluid px-0">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="./img/milk.png" alt="milk" class="img-fluid">
            </div>
            <div class="col-lg-6 text-center">
              
              <!-- col-6 유닛 박스 안에 새로운 열 생성 -->
                <div class="row">
                    <div class="col-10">
                        <h2>MUSEUM OF CANDY</h2>
                        <img src="./img/lolli_icon.png" alt="">
                        <p class="lead">
                           텍스트더미
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </section>

1.2 문단 수평 정렬

<!-- 생략 --> 
				<!-- justify 클래스를 이용해서 메인축을 수평 정렬 -->
                <div class="row justify-content-center">
                    <div class="col-10">
                        <h2>MUSEUM OF CANDY</h2>
                        <img src="./img/lolli_icon.png" alt="">
                        <p class="lead">
                           텍스트더미
                        </p>
                    </div>
                </div>
       

2. 문단 반응형 요소 추가

<section class="container-fluid px-0">
        <div class="row align-items-center">
            <div class="col-lg-6 order-2 order-lg-1">
                <img src="./img/milk.png" alt="milk" class="img-fluid">
            </div>
            <div class="col-lg-6 text-center order-1 order-lg-2">
                <div class="row justify-content-center">
                    <div class="col-10">
                        <h2>MUSEUM OF CANDY</h2>
                        <!-- 기본적으로 감추나, 라지사이즈 이상인 경우에는 인라인스타일로 문단에 표시 -->
                        <img src="./img/lolli_icon.png" alt="" class="d-none d-lg-inline">
                        <p class="lead">
                            텍스트 더미
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </section>

<!-- 
col-lg-6 order-2 order-lg-1
order 클래스를 이용해서 컨텐츠의 우선순의를 변경
(값이 낮을 수록 우선순위가 높다)

본문 같은 경우에는, 라지사이즈 이상인 경우에는 사진에 대한 요소가 우선순위가 1번이 되고
라지사이즈 미만인 경우에는 문단에 대한 요소가 1순위가 된다.
-->

2.1 문단 꾸미기

 <!-- 생략-->	
					<!-- 해당 div 요소에만 스타일을 주기 위해 blurb 클래스 생성 -->
                    <div class="col-10 col-lg-8 blurb">
                        <h2>MUSEUM OF CANDY</h2>
                        <!-- 기본적으로 감추나, 라지사이즈 이상인 경우에는 인라인스타일로 문단에 표시 -->
                        <img src="./img/lolli_icon.png" alt="" class="d-none d-lg-inline">
                        <p class="lead">
                            텍스트 더미
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </section>

.blurb h2 {
    color: #EA1C2C;
    font-weight: 100;
    font-size: 2.5rem
}

.blurb p {
    color: #f498b8;
    font-weight: 100;
    font-size: 1.20rem;
    line-height: 2;
}

2.2 섹션 여백 설정

 <section class="container-fluid px-0 content">
 <!-- 각 섹션마다 content 클래스 추가 -->

.content {
    margin: 100px 0;
}
/* 위아래 마진만 100px로 수정 */