index flex 고급 요소 다루는 방법

1

2

3

4

5

6

@charset 'UTF-8';


/* layout */

.mg-wrapper {
    width: 100%;
}


/* header */
.mg-header {
    border-top: 4px solid #387af0;
    border-bottom: 1px solid #c2c2c2;
}
.mg-header .inner-box {
    width: 1392px;
    height: 75px;
    margin: 0 auto;
    background: violet;
}

/* main */
.mg-main {
    width: 1392px;
    height: 982px;
    margin: 0 auto;
    background: tomato;
    padding: 40px 0 70px;
    display: flex;
    flex-direction: column;
    gap:48px;
    flex-wrap: wrap;
}
.mg-main .sec {
    flex:none;
    width: 312px;
    background:yellowgreen;
}
.mg-main .sec1 {
    width: 672px;
    height: 872px;
}
.mg-main .sec2 {
    height: 456px;
}
.mg-main .sec3 {
    height: 368px;
}


/* footer */
.mg-footer {
    height: 182px;
    background-color: #fc0;
}
.mg-footer .f-top {
    border-top: 1px solid #c2c2c2;
    border-bottom: 1px solid #e6e6e6;
}
.mg-footer .f-top .inner-box {
    width: 1392px;
    height: 72px;
    margin: 0 auto;
    background:aqua;
}

.mg-footer .f-bt {
    width: 1392px;
    height: 108px;
    margin: 0 auto;
    background: yellowgreen;
}