메인에 일반적으로 큰 이미지 또는 슬라이드 부분이 들어갑니다.

일단 이미지를 배치하고 후에 슬라이드 반영은 별도로 살펴보겠습니다.

또한, 메인엔 2단 또는 3단으로 구분된 부분이 나옵니다. 최신글을 표현할 수도 있고 메인에 노출하고 싶은 정보를 빼기도 합니다.

이 부분은 CSS float 속성을 이용해 구현하겠습니다.

.main{
    position:relative;
    width:1000px;
    margin:20px auto 0;
    min-height:300px;    
}
.main slider{}
.main .container{
    position:relative;
    margin:10px auto 0px;
    padding-bottom:50px;
}
.main .container:after {display:block;visibility:hidden;clear:left;content:""}
.main .container .m_column{
    width:32%;
    float:left;
}
.main .container .m_column > h3{
    padding:0 0 10px;
}
.main .container .m_column li{
    list-style-position:inside;
}
.main .container .m_video{
    text-align:right;
}

하단은 카피라이트를 포함한 부가적인 메뉴 또는 사이트 운영과 관련한 정보를 담게 됩니다.

.footer{
    position:relative;
}
.footer .f_menu{
    border-top:1px solid rgb(209, 209, 209);
    background-color:rgb(219, 219, 219);
}
.footer .f_menu p{
    width:1000px;
    margin:0 auto; 
    padding:5px 10px;
    text-align:center; 
    font-size:0.8rem;       
}
.footer .f_menu p span{
    padding-left:50px;      
}
.footer .copyright{
    border-top:1px solid rgb(209, 209, 209);
    background-color:rgb(24, 23, 23);
    color:#f4f4f4;
}
.footer .copyright p{
    width:1000px;
    margin:0 auto;   
    padding:20px 10px;
    text-align:center;   
    font-size:0.9rem;    
}