티스토리 뷰

IT 이야기/프로그래밍

[HTML 쉽게 이해하기 강좌] 2단 레이아웃 한 방에 만들기

하늘과 나b 2011. 7. 4. 22:30



2단 레이아웃 만들기
 


이전에는 다단 레이아웃은 테이블로 작업하는 것이 보통이었습니다.
하지만 테이블로 작업해 놓은 레이아웃은 잘못 수정하면 레이아웃이 깨지는 현상이 발생했죠.
물론 수정작업조차 쉽지 않았습니다.
소스가 길고 복잡했기 때문이죠.

그래서 우리는 CSS를 이용해서 HTML코드와 CSS코드를 분리하는 즉,
내용과 디자인을 분리해서 다단 레이아웃을 만들어 보도록 하겠습니다.




2단 레이아웃 만들어 보기

 
여기서는 테이블로 2단 레이아웃을 만들지 않고 <div> 태그를 이용해 2단 레이아웃을 만들어 보도록 하겠습니다. 2단 레이아웃의 HTML 코드는 아래와 같이 간단합니다.

 

<div id="wrap">
  <div id="header">
    <h1>헤더 영역
</h1>
  </div>
  <div id="content">
    내용<br/>
    사이드바는 빨강색으로 표시했습니다.
  </div>
  <div id="sidebar">
    사이드바<br/>
    사이드바는 파랑색으로 표시했습니다.
  </div>
  <div id="footer">
     푸터
  </div>
</div>

위의 소스는 헤더, 컨텐트, 사이드바, 푸터로 구성되어 있습니다.
CSS를 적용하지 않은 상태에서도 눈으로 봐도 알 수 있죠?

계속해서 2단 레이아웃을 만들어 보도록 하겠습니다. 이번에는 CSS입니다.
 
 
#content
{
  float:left;
  width:70%;
  background:red;
}

#sidebar
{
  float:right;
  width: 30%;
  background:blue;
}

#footer
{
  clear:both;
  background:gray;
}




그러면 최종 소스로 실제 결과를 보도록 하겠습니다.
먼저 결과부터 보도록 하겠습니다.
최종 소스를 실제로 저장해서 실행하면 아래 화면과 같이 나옵니다.




2단 레이아웃 만들기 최종 소스


<html>
<head>
  <style type="text/css">

#content
{
  float:left;
  width:70%;
  background:red;
}

#sidebar
{
  float:right;
  width: 30%;
  background:blue;
}

#footer
{
  clear:both;
  background:gray;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="header">
    <h1>헤더 영역</h1>
  </div>

  <div id="content">
    내용<br/>
    사이드바는 빨강색으로 표시했습니다.
  </div>
  <div id="sidebar">
    사이드바<br/>
    사이드바는 파랑색으로 표시했습니다.
  </div>
  <div id="footer">
     푸터
  </div>
</div>
</body>


파일을 첨부합니다. 파일이 필요하신 분은 아래에서 다운받으세요^^

2단 레이아웃.html

 

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[강의] HTML5 그 두번째 이야기 - HTML5는 OOO가 다르다  (2) 2011.11.05
[강의] HTML5란? HTML5 자세하게 알아보기  (2) 2011.10.23
C언어 강좌 - 함수 fopen()의 모든 것!  (5) 2011.10.19
POST 방식과 GET 방식의 차이  (0) 2011.10.17
모바일 홈페이지로 자동 이동시키는 소스  (2) 2011.09.21
[HTML 쉽게 이해하기 강좌 #3] HTML의 기본 태그에 대해 알아보기  (2) 2011.06.30
[HTML 쉽게 이해하기 강좌 #2] - HTML 시작하기  (0) 2011.06.30
[프로그래밍 사이트 추천] 웹에서도 프로그래밍 할 수 있다? 없다? 결론은 있다!  (1) 2011.06.23
[프로그래밍 Tip] 프로그램 소스코드를 공개하는 사이트 모음!  (0) 2011.06.01
[C#] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제 [출처] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제  (0) 2011.05.31
공유하기 링크
댓글