💻 Programming/CSS

[CSS] 27. Layouts ( 레이아웃 )

웹페이지를 디자인하다보면 구역을 나눠서 정보를 표시하게 됩니다.

CSS에서는 이렇게 구역을 나눈것처럼 보여지도록 할 수 있습니다. 실제로 테이블이나 frame으로 나눈것은 아니고 그냥 그렇게 보이게끔 하는 거죠.

CSS also provides table-layout property to make your tables load much faster.Following is the example:

<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>

You will notice the benefits more on large tables. The reason this makes tables load faster is because with traditional HTML, the browser had to calculate every cell before finally rendering the table. When you set the table-layout algorithm to fixed however, it only needs to look at the first row before rendering the whole table. This means that your table will need to have fixed column widths and row heights.

Sample Column Layout:

CSS를 이용해서 간단한 Column Layout 을 만들어보겠습니다.

우선 문서 전체의 마진과 패딩, 백그라운드를 설정합니다.

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

Now we will define a column with yellow color and later we will attach this rule to a <div>:

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

Up to this point we will have a document with yellow body, so lets now define another division inside level0:

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

Now we will nest one more division inside level1 and we will change just background color:

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

Finally we use the same technique, nest a level3 division inside level2 to get the visual layout for the right column:

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

위 소스들을 모두 합쳐서 하나로 만들어보죠

<style tyle="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>

자, 이제 이걸 테스트 해보세요. ^____^

Reference : http://www.tutorialspoint.com/css/css_layouts.htm

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 포지션(position) 속성 강좌 (2)	2016.12.06
[CSS] 26. Filters - Texts and Image Effects ( 텍스트, 이미지 효과 ) (0)	2016.06.12
[CSS] 25. @ Rules ( @ 규칙들 ) (0)	2016.06.12
[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 ) (0)	2016.06.12
[CSS] 23. Pseudo Classes ( 슈도 클래스 ) (0)	2016.06.12

💻 Programming/CSS

[CSS] 27. Layouts ( 레이아웃 )

Sample Column Layout:

'💻 Programming > CSS' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바