댓글 목록

홈페이지제작 - CSS작업3

페이지 정보

작성자 운영자 작성일 17-10-29 18:46 조회 1,666 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.


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

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


또한, 메인엔 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;    
}



댓글목록 0

등록된 댓글이 없습니다.