html css 레이아웃 구성하기 1

1

2

1

2

1

2

1

2

1

2

3

1

2

3

4

5

6

7

8

9

@charset 'UTF-8';

/* main layout */
.nps-wrapper {
    width: 100%;
}

/* header */
.h-wrap .h-top {
    border-bottom: 1px solid #e8e8e8;
}
.h-wrap .h-top .h-inner {
    width: 1220px;
    height: 88px;
    margin: 0 auto;
    background-color: #fc0;
}

.h-wrap .h-bottom {
    height: 59px;
    border-bottom: 1px solid #e8e8e8;
}
.h-wrap .h-bottom .gnb-inner {
    width: 1220px;
    height: 58px;
    margin: 0 auto;
    background-color: #f30;
}

/* main */
.m-wrap .m-top .m-top-inner {
    width: 1220px;
    margin: 0 auto;
    padding:23px 0 54px;
}

/* main-top section */
.m-sec1 {
    background-color:#fc0;
    margin-bottom: 27px;
    display: flex;
    justify-content: space-between;
}

.m-sec1 .cont {
    flex: none;
    height: 320px;
}

.m-sec1 .cont-l {
    width: 726px;
    background-color: #f30;
}

.m-sec1 .cont-r {
    width: 472px;
    background-color: #f30;
}

/* sec2 */

.m-sec2 {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

.m-sec2 .cont {
    flex: none;
    height: 224px;
}

.m-sec2 .cont-l {
    width: 972px;
    background-color: #f30;
}

.m-sec2 .cont-r {
    width: 226px;
    background-color: #f30;
}



.m-sec3 {
    height: 243px;
    background-color: tomato;
    margin-bottom: 36px;
}

/* sec4 */

.m-sec4 {
    display: flex;
    justify-content: space-between;
}

.m-sec4 .cont {
    flex: none;
    height: 243px;
}

.m-sec4 .cont-l {
    width: 652px;
    background-color: #f30;
}

.m-sec4 .cont-r {
    width: 530px;
    background-color: #f30;
}



.m-wrap .m-bottom {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
}
.m-wrap .m-bottom .m-bottom-inner {
    width: 1220px;
    margin: 0 auto;
    background-color: beige;
    padding-bottom: 60px;
}

/* main bottom section  */
.m-sec5 {
    height: 522px;
    background-color: cadetblue;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

.m-sec5 .cont {
    flex: none;
    height: 522px;
}

.m-sec5 .cont-l {
    width: 598px;
    background-color: #f30;
}

.m-sec5 .cont-r {
    width: 598px;
    background-color: #f30;
}

.m-sec6 {
    background-color: skyblue;
    margin-bottom: 60px;
     display: flex;
    justify-content: space-between;
}

.m-sec6 .cont {
    flex: none;
    width: 390px;
    height: 348px;
}

.m-sec6 .cont-l {
    
    background-color: #f30;
}

.m-sec6 .cont-m {
    background-color: #f30;
}

.m-sec6 .cont-r {
    background-color: #f30;
}

/*sec7 */
.m-sec7 {
    height: 642px;
    background-color: sandybrown;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 25px 32px;
}

.m-sec7 .cont {
    flex: none;
}

.m-sec7 .cont-1,
.m-sec7 .cont-2,
.m-sec7 .cont-3 {
    width: 390px;
    height: 60px;
    background-color: #fc0;
}

.m-sec7 .cont-4 {
    width: 390px;
    height: 387px;
    background-color: #fc0;
}

.m-sec7 .cont-5 {
    width: 390px;
    height: 384px;
    background-color: #fc0;
}

.m-sec7 .cont-6 {
    width: 390px;
    height: 232px;
    background-color: #fc0;
}

.m-sec7 .cont-7 {
    width: 376px;
    height: 179px;
    background-color: #fc0;
}

.m-sec7 .cont-8 {
    width: 376px;
    height: 179px;
    background-color: #fc0;
}

.m-sec7 .cont-9 {
    width: 376px;
    height: 233px;
    background-color: #fc0;
}

/* footer */
.f-wrap {
    background-color: #fff;
}
.f-wrap .f-inner {
    width: 1220px;
    height: 358px;
    margin: 0 auto;
    background-color: yellowgreen;
}