9일차 - 부트스트랩3, 그리드 시스템 (2)

1. 구조 생각하기

2. 에밋 넣기

2-1) ul class="d-flex w-100" 콤비

.container>ul.d-flex.w-100>li.col-6+li.bestP.col-6

<div class="container">
    <ul class="d-flex w-100">
        <li class="col-6"></li>
        <li class="bestP col-6"></li>
    </ul>
</div>

2-2) a, span, strong 태그 모두 class="d-block" 배정

.titleImg>img
ul.threeList>li*3>a>img+span.icon+strong.name+span.send+span.price

인라인 태그라서 여유만 있으면 위로 올라오려고 하기 때문에 모두 .d-block 배정

    <div class="container">
        <ul class="d-flex w-100">
            <li class="col-6"></li>
            	.titleImg>img
                ul.d-flex.threeList>li.col-4*3>a.d-block>img.d-block
                                               +span.d-block.icon
                                               +strong.d-block.name
                                               +span.d-block.send
                                               +span.d-block.price
			<li class="bestP col-6"></li>
        </ul>
    </div>

2-3) ul class="d-flex w-100" 대신 -----> ul class="row"

• row : d-flex w-100 콤비의 단점 보완
• container와 col이 가지고있던 마진/패딩을 row가 처리
• container - row - col 세트

    <div class="container">
        <ul class="row">
            <li class="col-md-6 bestP"></li>
            	.titleImg>img
                ul.d-flex.threeList>li.col-4*3>a.d-block>img.d-block
                                               +span.d-block.icon
                                               +strong.d-block.name
                                               +span.d-block.send
                                               +span.d-block.price
			<li class="col-md-6"></li>
        </ul>
    </div>

3. 완성

    <div class="container">
        <ul class="row">
            <li class="col-md-6 bestP"></li>
                <div class="titleImg"><img src="https://simage.lottechilsung.co.kr/display/corner/2866/delivery_pc.jpg" alt=""></div>
                <ul class="threeList d-flex">
                    <li class="col-4">
                        <a href="" class="d-block"><img src="https://simage.lottechilsung.co.kr/goods/31/13/27/27/17141_N_N_160.jpg" alt="" class="d-block">
                            <span class="d-block icon">sale</span>
                            <strong class="d-block name">[아이시스8.0] ECO 1.5L(12펫)_정기배송</strong>
                            <span class="d-block send">정기배송가</span>
                            <span class="d-block price">19% 7,200원 8,900원</span>
                        </a>
                    </li>
                    <li class="col-4">
                        <a href="" class="d-block"><img src="https://simage.lottechilsung.co.kr/goods/31/13/32/70/17046_COL_013_160.jpg" alt="" class="d-block">
                            <span class="d-block icon">sale</span>
                            <strong class="d-block name">[트레비] 4종 500ml(20펫)_정기배송</strong>
                            <span class="d-block send">정기배송가</span>
                            <span class="d-block price">19% 7,200원 8,900원</span>
                        </a>
                    </li>
                    <li class="col-4">
                        <a href="" class="d-block"><img src="https://simage.lottechilsung.co.kr/goods/31/12/90/31/6874_N_N_160.jpg" alt="" class="d-block">
                            <span class="d-block icon">sale</span>
                            <strong class="d-block name">[아이시스8.0] 2.0L(12펫)_정기배송</strong>
                            <span class="d-block send">정기배송가</span>
                            <span class="d-block price">19% 7,200원 8,900원</span>
                        </a>
                        
                    </li>
                </ul>
            <li class="bestP col-md-6"></li>
        </ul>
    </div>