티스토리 뷰




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

 
댓글
댓글쓰기 폼
공지사항
Total
3,328,334
Today
125
Yesterday
357
«   2020/07   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함