CSS-레이아웃

HTML 테이블에 매우 익숙하고 HTML 테이블을 사용하여 페이지 레이아웃을 효율적으로 디자인하기를 바랍니다. 그러나 CSS는 문서에서 요소의 위치를 ​​지정하기위한 많은 컨트롤을 제공한다는 것을 알고 있습니다. CSS는 미래의 물결 이기 때문에 페이지 레이아웃 목적으로 표 대신 CSS를 배우고 사용하는 것은 어떨까요?

다음 목록은 두 기술의 몇 가지 장단점을 수집합니다.

  • 대부분의 브라우저는 테이블을 지원하지만 CSS 지원은 천천히 채택되고 있습니다.

  • 테이블은 브라우저 창 크기가 변경 될 때 더 관대합니다. 내용을 변경하고 그에 따라 변경 사항을 수용하도록 래핑합니다. CSS 포지셔닝은 정확하고 상당히 유연하지 않은 경향이 있습니다.

  • 표는 CSS 규칙보다 배우고 조작하기가 훨씬 쉽습니다.

그러나 이러한 각 주장은 역전 될 수 있습니다.

  • CSS는 웹 문서의 미래에 중요한 역할을하며 대부분의 브라우저에서 지원됩니다.

  • CSS는 표보다 정확하므로 브라우저 창에 관계없이 문서를 의도 한대로 볼 수 있습니다.

  • 중첩 된 테이블을 추적하는 것은 정말 힘든 일입니다. CSS 규칙은 잘 구성되어 있고 읽기 쉽고 변경도 쉽습니다.

마지막으로 자신에게 맞는 기술을 사용하고 알고있는 기술이나 문서를 가장 잘 표현하는 기술을 사용하는 것이 좋습니다.

CSS는 또한 테이블을 훨씬 빠르게로드 할 수 있도록 테이블 레이아웃 속성을 제공 합니다 . 다음은 예입니다-

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

큰 테이블에서 더 많은 이점을 알 수 있습니다. 기존 HTML에서는 브라우저가 최종적으로 테이블을 렌더링하기 전에 모든 셀을 계산해야했습니다. 그러나 테이블 레이아웃 알고리즘을 fixed 로 설정 하면 전체 테이블을 렌더링하기 전에 첫 번째 행만 확인하면됩니다. 이는 테이블에 고정 된 열 너비와 행 높이가 있어야 함을 의미합니다.

샘플 열 레이아웃

다음은 CSS를 사용하여 간단한 열 레이아웃을 만드는 단계입니다.

다음과 같이 전체 문서의 여백과 패딩을 설정합니다.

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

이제 노란색으로 열을 정의하고 나중에이 규칙을 <div>에 연결합니다.

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

지금까지 노란색 본문이있는 문서가 있으므로 이제 level0 내부에 또 다른 구분을 정의하겠습니다.

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

이제 우리는 level1 안에 하나의 분할을 더 중첩시키고 배경색 만 바꿀 것입니다.

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

마지막으로 동일한 기술을 사용하여 level2 내에 level3 분할을 중첩하여 오른쪽 열에 대한 시각적 레이아웃을 얻습니다.

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

다음과 같이 소스 코드를 완성하십시오-

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

마찬가지로 페이지 상단에 상단 탐색 표시 줄이나 광고 표시 줄을 추가 할 수 있습니다.

다음 결과가 생성됩니다-