클론코딩 레이아웃만들기 4

1

2

1

2

3

4

5

6

7

1

2

3

@charset 'UTF-8';


/* layout */
.h-wrap {
    margin: 0 auto;
    width: 1682px;
} 

.h-wrap .h-top{
    height: 63px;
    background-color: bisque;
}

.h-wrap .h-bt{
    height: 45px;
    background-color: rgb(194, 120, 29);
}

/*section*/

.m-wrap {
    width: 100%;
}

.m-wrap .sec01 {
    width: 100%;
    height: 604px;
    background-color: darkgoldenrod;
}

.m-wrap .sec02 {
    width: 1386px;
    height: 256px;
    background-color: aqua;
    margin: 0 auto;
}

.m-wrap .sec03 {
    width: 1386px;
    height: 734px;
    background-color: rgb(35, 21, 161);
    margin: 0 auto;
}

.m-wrap .sec04 {
    height: 852px;
    background-color: rgb(48, 218, 113);
    margin: 0 auto;
}

.m-wrap .sec05 {
    height: 722px;
    background-color: rgb(35, 21, 161);
    margin: 0 auto;
}

.m-wrap .sec06 {
    width: 1386px;
    height: 862px;
    background-color: rgb(36, 146, 26);
    margin: 0 auto;
}

.m-wrap .sec07 {
    width: 1386px;
    height: 412px;
    background-color: rgb(129, 184, 124);
    margin: 0 auto;
}

/* footer */

.f-wrap {
    background-color: #f4f4f4;
}

.f-inner {
    width: 1290px;
    margin: 0 auto;
}

.f-inner .f01{
    height: 148px;
    background-color: bisque;
}

.f-inner .f02{
    height: 64px;
    background-color: rgb(189, 112, 18);
}

.f-inner .f03{
    height: 198px;
    background-color: rgb(62, 45, 211);
}

@charset 'UTF-8';

/* 여백초기화 */
html, body , h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, table, tr, td, th, caption, div, span, form, fieldset, legend, input, select, textarea, button, img, a, header, main, footer, nav, section, article {
    margin:0;
    padding:0;
}


/* 리스트타입 초기화 */
ol, li {
    list-style: none;
}

/* 이미지, 필드셋 테두리 제거 */
fieldset, img {
    border:0 none;
}

/* 타이포 설정 */
body, h1, h2, h3, h4, h5, h6, th, td, input, select, textarea, button {
    font-family: '맑은 고딕', sans-serif;
    font-size: 16px;
    color:#111;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: normal;
}

/* 링크요소 장식제거, 색상변경 */
a {
    text-decoration: none;
    color:inherit; /* 상위요소의 색상값 상속받기 */
}

/* 박스계산법 변경하기 border-box로 변경하기 */
/* width값에 ( border+padding이 포함되서 계산됨 ) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 숨김요소 */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: polygon(0 0,0 0,0 0);
}