22.CSS - Div태그로 레이아웃 설정

Godffs 2009. 7. 30. 02:00

<DIV>를 이용하여 레이아웃 설정을 통해 프레임형식 웹을 표현해 보겠습니다.

<head>부분에 아이디값을 정하고 스타일 설정을 하겠습니다.

#아이디이름 {길이, 색상, 테두리, 여백설정}으로 설정하도록 하겠습니다.

#header { width:770px; height:50px;background-color:Yellow;
    border:groove 1px silver; padding:5px 5px 5px 5px;
                margin:0px 0px 10px 0px; }

#left{ width:180px; height:100px; background-color:Yellow;
       border:groove 1px silver; padding:5px 5px 5px 5px;
         margin:0px 10px 0px 0px;float:left; }

#content{ width:350px; height:100px; background-color:Yellow;
                border:groove 1px silver; padding:5px 5px 5px 5px;
                margin:0px 0px 0px 0px;float:left; }

#right{ width:180px; height:100px; background-color:Yellow;
           border:groove 1px silver; padding:5px 5px 5px 5px;
           margin:0px 0px 0px 10px;float:left; }

#footer{ clear:both;width:770px; height:50px;
              background-color:Yellow;
             border:groove 1px silver;
             padding:5px 5px 5px 5px; margin:10px 0px 0px 0px;

float:left; } padding,margin 여백설정(CSS2.0-13강좌)

결과화면

기본 메인페이지 프레임을 레이아웃으로 작성했습니다.

22.Div태그로레이아웃설정.htm

(파일안에 테이블로 작성된 예제가 포함 되어있습니다.)