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>마찬가지로 페이지 상단에 상단 탐색 표시 줄이나 광고 표시 줄을 추가 할 수 있습니다.
다음 결과가 생성됩니다-