(24.08.29) - 레이아웃 수련 1일차 [리뷰 필요]

Figma Link

Figma

---

HTML

    <div class="l_wrapper">
        
        <div class="header w-h-fix">
            <div class="header-cover">
                
            </div>
        </div>

        <div class="main-container w-h-fix">
            <div class="box-contents"></div>
            <div class="box-contents"></div>
            <div class="box-contents"></div>
        </div>

        <div class="bottom-container">
            <div class="bottom-box-contents"></div>
            <div class="bottom-box-contents"></div>
            <div class="bottom-box-contents"></div>
        </div>
    </div>

 

CSS

 

        body{
            /*margin: unset;*/    /*부모 요소로부터 상속할 값이 존재하면 상속값을 적용 (inherit)
                                부모 요소로부터 상속할 값이 존재하지 않는다면 초기 값을 적용 (initial)*/
        }

        .w-h-fix{
            width:587px;
            height: 100px;
        }

        .l_wrapper{
            width: 635px;
            height: 397px;
            background-color: #FFFFFF;
            border: 1px solid red;
            
            
        }
        .header{
            background-color: #d9d9d9;

            margin: 14px auto;

            position: relative; /* 1.중앙정렬 방법 부모에게 상대위치 relative*/
            
        }

        .header-cover{
            background-color: #EFB3EE;   
            width: 521px;
            height: 70px;

            position: absolute; /*자식에게 절대위치 absolute*/
            margin: auto; /*마진을 auto 줌으로써 브라우저가 적절한 여백 크기를 선택하기에 자연스럽게 중앙 배치*/
            inset: 0; /* top, right, bottom, left의 축약 코드 : inset / 절대위치를 가진 요소인 cover를 중앙 정렬 시키기위해 적용*/
        }

        .main-container{
            display: flex; /*2.중앙정렬 방법 부모에게 flexbox*/
            justify-content: space-between; /*main axis (x축)’ 정렬과 아이템 사이의 간격을 제어하고 균등 분할*/
            margin: 0 auto; /*space-between에 따라 개별적으로 가용공간을 제어 하기위해 마진을 추가하여 중앙 정렬*/
        }

        .box-contents{
            border: 1px solid yellow;
            width: 129px;   
            height: 70px;
        }

        .box-contents:nth-child(1){
            background-color: #8C3435;
        }

        .box-contents:nth-child(2){
            background-color: #AFC54F;
        }

        .box-contents:nth-child(3){
            background-color: #34678C;
        }




        .bottom-container{
            /* border: 1px solid #000; */
            display: grid;
            grid-template-columns: 129px minmax(0,325px);
            grid-template-rows: minmax(70px, auto);
            align-content: space-around;
            justify-content: center;
            gap: 67px;
            
            
            
            
        }

        /* .bottom-box-contents{
        
            
        } */

        .bottom-box-contents:nth-child(1){
            background-color: #8C3435;
        }

        .bottom-box-contents:nth-child(2){
            grid-column-start:2;
            grid-column-end: 4;
            background-color: #AFC54F;
        }

 

 

RESULT

결과물 문제점

 

- 3번째 레이아웃 그리드 적용 후 병합 배치 문제 해결 필요

 

- 각 박스들 사이 간격 조정 필요

 

■ 차후 레이아웃 수련 하면서 점차 개선 예정

 

Duration of time