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

티스토리 뷰

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

Posted by Godffs on 2009. 7. 30. 02:00 in jQuery | javascript | CSS /

<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

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

'jQuery | javascript | CSS' 카테고리의 다른 글

24.CSS - 속성정리 (0)	2009.07.30
23.CSS - 레이어 (0)	2009.07.30
21.CSS - 이미지관련 스타일 (0)	2009.07.30
20.CSS - 리스트(목록)관련 스타일 (0)	2009.07.30
19.CSS - 나만의 스타일시트 (0)	2009.07.29

Blog Content

티스토리 뷰

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

'jQuery | javascript | CSS' 카테고리의 다른 글

Comments

티스토리툴바