흠... 동적으로 클래스를 추가하고 삭제하여 스타일을 바꾸는 기술은 아주 많은 방법이 있다.

이번에 사용한 방법은 클래스를 계층적으로 다음과 같이 정의한 뒤...

.today-text
{
    color : #ffffff;
    font-weight : bold;
    margin : 8px 0 0 60px;
}
.text-b .today-text
{
    color : #848484;
    font-weight : normal;
    margin : 8px 0 0 60px;
    font-size : 10px;
    margin : 10px 0 0 60px;
}

이걸 보면 감이 잡혀야지...

html 코드는 이렇게 되어있을 것이다...

<div id="to_program" ><div class="today-text"><?=substr(date("m-d"), 0, 2)?>&nbsp; <?=substr(date("m-d"), 3, 2)?></div></div>

php 코드는 날짜를 써 넣으려하다보니 들어간 것.....

암튼 어떤 이벤트가 발생했을때 id 가 to_program 인 엘리먼트에 text-b 라는 클래스를 add 해주면

아래쪽의 css 가 적용되지 않겠는가.ㅋㅋ

자바스크립트 코드는 다음과 같다... 

Ext JS 라이브러리를 사용했을 경우..

this.today = this.form.child("#to_program");
this.form = Ext.get(form);

만약 위의 하얀 글씨의 css 를 적용하려면..

this.today.addClass("text-b");

밑의 글씨의 css 를 적용하려면..

this.today.removeClass("text-b");

이렇게 하면 되겠지!!

잊어먹지말자.ㅋㅋ

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

아.. 한심스럽지만 올려놓자;

.link-text
{
        font-size:11px;
        text-decoration:none;
        color : white;
}
Posted by 행복한 프로그래머 궁금쟁이박
TAG CSS

댓글을 달아 주세요

DIV와 CSS를 이용한 웹 표준코딩의 장점

Table&DivLayout-naradesign.zip

첨부파일 다운로드

웹 표준코딩을 준수 했을때 어떤 가시적인 효과가 있는지 직접 검증하기 위하여 한가지 실험을 하였습니다. 첨부된 파일은 동일한 화면을 Table로 구성하였을 때와 Div로 구성하였을 때 어떤 차이가 있는지 보여드리기 위하여 작성된 html 및 css 파일입니다.

사용자 삽입 이미지
사용자 삽입 이미지

Table Layout Div Layout
HTML 코드라인 수 = 59 Line HTML 코드라인 수 = 31 Line
HTML 파일 용량 = 1.58 KB HTML 파일 용량 = 746 Byte
<table width="800" border="0" cellspacing="0" cellpadding="20">
<tr>
<td colspan="3" valign="top" bgcolor="#000000" id="logo">Table Layout</td>
</tr>
<tr>
<td width="200" height="400" valign="top" bgcolor="#666666">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu">
<tr>
<th bgcolor="#999999" style="height:30px">Menu List </th>
</tr>
<tr>
<td>Menu1</td>
</tr>
<tr>
<td>Menu2</td>
</tr>
<tr>
<td>Menu3</td>
</tr>
<tr>
<td>Menu4</td>
</tr>
<tr>
<td>Menu5</td>
</tr>
</table>
</td>
<td height="400" valign="top" bgcolor="#999999">
<table width="380" border="0" cellspacing="0" cellpadding="5" id="contents">
<tr>
<th bgcolor="#999999" style="height:30px">Page Title </th>
</tr>
<tr>
<td valign="top">Layout Test Page. </td>
</tr>
</table>
</td>
<td width="100" height="400" valign="top" bgcolor="#CCCCCC">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="contents">
<tr>
<th bgcolor="#999999" style="height:30px">Links </th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#333333" id="copy">Copyright</td>
</tr>
</table>

<div id="logo">Table Layout</div>
<div id="page">
<div id="menu">
<h1>Menu List </h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id="contents">
<h2>Page Title </h2>
<div id="text">Layout Test Page. </div>
</div>
<div id="links">
<h2>Links</h2>
</div>
</div>
<div id="copy">Copyright</div>

CSS 코드라인 수 = 8 Line CSS 코드라인 수 = 11 Line
CSS 파일 용량 = 919 Byte CSS 파일 용량 = 1.27 KB
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold}
#menu th { border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left}
#menu td { border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF}
#contents th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666}
#contents td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify}
#links th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666}
#links td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify}
#copy { font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; }
h1 { width:190px; padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#999999; border-bottom:3px solid #FFFFFF; margin:0}
h2 { padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#666666; border-bottom:3px solid #FFFFFF; margin:0}
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold; background:#000000; width:760px; padding:20px}
#page { position:relative; width:800px; overflow:visible}
#menu { position:relative; padding:20px; width:200px; background:#666666; float:left; height:400px }
#menu ul { margin:0; padding:0}
#menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF; list-style:none}
#contents { position:relative; padding:20px; background: #999999; font-size:12px; font-family:Verdana; color:#FFFFFF; width:380px; float:left; height:400px}
#text { padding:5px; line-height:150%; font-family:Verdana; text-align:justify}
#links { position:relative; float:left; background:#CCCCCC; width:100px; padding:20px; clear:right; height:400px}
#copy { position:relative; clear:both; background: #333333; font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; width:760px; padding:20px }

DIV+CSS 레이아웃과 웹 표준 코딩의 장점

1. 작고 가벼운 구조와 용량

Div 레이아웃의 경우 순수한 HTML 파일의 코드 라인 수와 파일의 용량은 Table 레이아웃에 비하여대략 50%정도 절감됩니다. 이렇게표준으로 코딩된 HTML 파일은 한개 사이트에서 수십 수천 페이지에 이르기 때문에 사용자의 트래픽으로 인한 서버의 부하를 경감할 수 있습니다. 유지보수 비용과 직결되는 문제죠.

Div 를 이용한 표준 코딩이 가벼워 질 수 밖에 없는 이유는 다음과 같습니다.내용 하나를 원하는 위치에 표기하기 위하여 Table 로 코딩하려면 <table><tr><td>내용</td></tr></table> 이와 같이 3쌍의 태그로 둘러싸야 합니다.하지만 Div 로 코딩하면 <div>내용</div> 1쌍의 태그로 족합니다. HTML 태그의 코드 라인수와 용량이 반으로 줄만 하죠

CSS 코드가 조금 더 늘어나긴 하지만 CSS 파일은 해당 웹사이트에 접속시 최초 1회 다운로드 되어 사용자 PC의 캐시메모리에 저장되며, 해당 웹사이트를 빠져나갈 때까지 다시 다운로드 되는 일이 거의 없는 파일입니다. 따라서 CSS 파일의 용량이 늘어나면 HTML 코드가 줄어들어도 전체적인 트래픽량은 대동소이 하지 않을까 라고 생각하신다면 잘못된 계산 입니다. HTML코드는 페이지를 열때마다 새롭게 다운로드 하지만 CSS 파일은 한번만 다운로드 되는 파일이기 때문입니다.

2. XML포멧으로 확장가능,CSS의존도를 높여디자인개편 비용을 절감

웹 표준 코딩은 문서의 구조와 표현을 분리합니다. 구조는 HTML으로 정의하고, 표현은 CSS로 정의합니다. 예를 들면 문서의 제목을 표현함에 있어서 <h1>태그는 구조적으로 의미있는 태그 입니다. 하지만 <h1> 태그는 글자를 단지 구조적으로만 의미있게 표현할 뿐보여주기 위한 장식적인 디자인 표현은 CSS 에서 담당합니다.이렇게 되면 HTML 태그는 문서의 구조만, CSS는 표현만 따로 분리하여 정의 한 것으로이는XML 데이터 문서로의 확장을 용이하게 만들고디자인 변경시 HTML 파일의 편집비율은 줄어들고 CSS파일만 수정하면 됩니다.

비표준 웹문서의 디자인 개편시HTML 1,000 페이지를 모두 일일이 열어서 Find & Replace 방식으로 수정하여야했습니다. 또는테이블 구조가 변경되는 경우기존의 페이지를 수정하는 것보다 다시 생산하는 방식이 훨씬 빠르기 때문에 디자인 개편은 곧 사이트의 재구축을 의미하였습니다.W3C에서 표준으로 권고하는 웹 표준방식으로 제작된 웹사이트는딸랑 CSS 1개 파일을 수정함으로서 HTML 1,000 페이지를 한꺼번에 디자인 개편하는 놀라운 경험을 할 수 있습니다.CSS의 본래 목적이 바로 그것입니다. 이것을 이해하려면 먼저 CSS의 디자인 표현 가능성과 한계에 대하여 알아두셔야 합니다. CSS의 디자인 표현 능력은 상상 그이상입니다.

3. 사람이나 로봇(컴퓨터)이이해하기 쉬운구조

둘러싸는 코드가간결하고 코드라인의 양이 줄기때문에 구조를 한눈에 파악하기 쉽습니다. 또한 그뿐만이 아닙니다.Div 레이아웃에서 h1, h2 태그를 사용한 것은 제목을 표기하기 위함이며 ul, li 태그를 사용한 것은 목록을구조적으로 의미있게 표현하기 위함 입니다. h1 태그 대신 제목을 <tr><td>...</td></tr>안에표현하는 것은어떤 의미도 없으므로 사람이든 검색로봇이든 이해하기 어려운 정보 입니다. 하지만h1태그로 둘러싼 제목은 사람 뿐만 아니라 검색로봇도 의미있게 받아들이고 XML 데이터로 확장하기에도 용이합니다. 그동안 하찮게 여겼던 태그들이 얼마나 중요한지 모르실 껍니다.

4. Table 은 고지식 하고 Div 는 유연합니다

솔직히 저는 처음 Div 코딩을 제안 받았을때 이해하기 어려웠습니다. 왜 그래야 하는지. Table 태그도 분명 표준 태그이며 편하고 유용하게 사용해 왔는데 왜이제는 사용하면 안돼는지 의아해 했습니다. 하지만 Div 의 장점을 알게 되면서 부터는 더이상 그것이 궁금하지 않게 되었습니다. 물론 Div 레이아웃을 사용하는 것이 웹 표준 방식이며소고기 맛을 처음 본 사람이 돼지고기는 쳐다보지도 않는 상황과 같다고 말씀드릴 수 있겠네요. 벽에 액자를 붙인다고 합시다. Table이 콘크리트 벽에 못을 깊숙히 때려박는 행위라면 Div 는 콘크리트 벽에 실리콘 접착행어를 달아주는 것과 같습니다. 언제든지 깔끔하게 떼어서 다른 위치에 붙일 수 있죠. 이게 가장 큰 장점 입니다. 게다가 레이아웃과 디자인 표현에 관한 코드가 CSS 파일안에서 모두 정의 되므로 문서의 구조와 내용은 변경하지 않고 디자인과 레이아웃만 바꾼다면 HTML 파일은 열어볼필요도 없어집니다. 레이아웃과 디자인을언제든지 쉽게 바꿀 수 있는 유지보수의 용이성이죠.

Table 은 현재 셀과 이웃셀이 연결되어 있습니다. 따라서 서로 높낮이나 크기를 완전히 다르게 하려면 따로 Table 태그를 한번 더 사용해야 합니다. 그리고 셀과 셀이 서로 연결되어 있기 때문에 특정부분의 레이아웃을 잘못 변경하면 페이지의 나머지 레이아웃도 함께 수정해야 합니다. 하지만 Div 태그는 각자 따로 노는 스타일 입니다. 물론 서로 밀어내고 붙어있는등 유기적인 관계를 가질 수도 있으며 이것을 변경하는 것은 매우 쉽습니다. css 코드의 position 속성만 변경하면 됩니다. 그럼 서로 함께 움직이거나 따로 놀도록 설정 할 수 있습니다. 다시 한번 말하지만 Div 태그는 둥둥 떠다니는 레이어의 성격을 함께지니고있으므로 언제든지 원하는 위치로 옮길 수 있어 유지보수가 매우 용이 합니다.

5. 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다

행정자치부에서 발표한 "홈페이지 구축운영 표준지침 2005" 문서에는 "한국형 웹 콘텐츠 접근성 지침 1.0" 이라는 별첨문서가 있는데 2005년부터 구축되기 시작한 행정기관 홈페이지는 해당 지침을 따르도록 되어 있는 말 그대로의 지침 입니다. 아직 강제성은 없지만 이 지침을 기준으로 평가하는 행위도 이루어 지고 있고 또 앞으로 강제될 활률이 높습니다.

이러한 접근성 지침의 근간이 되는 문서는 W3C에서 발표한 "웹 접근성 가이드" 입니다. 웹 표준은 접근성을 고려하여 제정된 것이기 때문에 웹 표준만 지키면 접근성 문제는 90%이상 자동으로 해결됩니다. 따로 떼어놓고 생각할 수 있는 문제가 아닙니다.

 

Posted by 행복한 프로그래머 궁금쟁이박
TAG CSS, 웹표준

댓글을 달아 주세요

사용자 삽입 이미지
<style type=text/css>
body {
 margin:0;
 padding:30px;
 font-family:굴림,Gulim,AppleGothic,sans-serif;
 font-size:small;
 background:#b5b5b5;
}

a {color:#77985c;}

.forums{background:#919191;}

table{
 position:relative;
 top:-4px;
 left:-4px;
 width:100%;
 border:1px solid #000;
 background:#fff;
 border-collapse:collapse; /*cellspacing="0"*/
}
table caption{
 margin:0;
 padding:8px 20px;
 text-align:left;
 border:1px solid #000;
 border-bottom:none;
 background:#fff;
 
}
table th, table td{
 margin:0;
 padding:8px 20px;
 text-align:center;
 border-bottom:1px solid #b5b5b5;
}

table th{color:#999;}
table .name{text-align:left;}
table tr{background:#e6e6e6;}
table tr.alt{ background:#f1f1f1;}
table td a{display:block; font-weight:bold;}
</style>
 
<div class="forums">
<table>
 <caption>테이블 제목</caption>
 <tr>
        <th scope="col" class="name">tab1</th>
        <th scope="col">tab2</th>
        <th scope="col">tab3</th>
 </tr>
 <tr class="alt">
        <td class="name"><a href="#">제목1</a> 주저리 주저리</td>
        <td>123</td>
        <td>2006.12.12</td>
 </tr>
 <tr>
        <td class="name"><a href="#">제목1</a> 주저리 주저리</td>
        <td>123</td>
        <td>2006.12.12</td>
 </tr>
 </table>
</div>
 

 

Posted by 행복한 프로그래머 궁금쟁이박
TAG CSS, table

댓글을 달아 주세요




<style>

.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}

.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px;  background:#EEEEEE; font-size:12px}
</style>

 

<div id="container" style="background: #fff">
   <b class="rtop">

      <b class="r1"></b>

      <b class="r2"></b>

      <b class="r3"></b>

      <b class="r4"></b>

   </b>
   <div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
   <b class="rbottom">

      <b class="r4"></b>

      <b class="r3"></b>

      <b class="r2"></b>

      <b class="r1"></b>

   </b>

</div>


Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

8.1 Box dimensions

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

Image illustrating the relationship between content, padding, borders, and margins.   [D]

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

Posted by 행복한 프로그래머 궁금쟁이박
TAG CSS

댓글을 달아 주세요

  1. BlogIcon soa888 2012.07.25 20:52 신고  댓글주소  수정/삭제  댓글쓰기

    soa888 서피스가 슬레이트 7보다 나을까요?

CSS Box model

Web/CSS 2008.06.30 15:40

The CSS Box Model

Your understanding of the box model concept, and how it relates to the way in which an element’s final dimensions are determined, will be essential to your understanding of how an element is positioned on a web page. The box model applies to block-level elements. A companion concept, the inline layout model, defines how inline elements are positioned, and is covered in Inline Formatting.

Calculating Box Dimensions

In CSS2.1, block-level elements can only be rectangular. We calculate the overall dimensions of a block-level element by taking into account the height and width of the content area, as well as any margins, padding, and borders that are applied to the element.

We can define the content width of an element by declaring its width and height properties. If no declarations are applied, the default value for the width and height properties is auto.

For static (non-positioned) elements, and relatively positioned elements where the width property has the value auto, the computed width will be the width of the containing block minus any horizontal margins, borders, padding, and scrollbars. That is, it will be whatever’s left over when horizontal margins, borders, padding, and scrollbars (if any) have been deducted from the width of the containing block.

The containing block is the reference rectangle whose position and dimensions are used for relative calculations of descendant elements’ positions and dimensions. Although elements are positioned with respect to their containing block, they’re not confined by it, and they may overflow. In most cases, generated boxes act as containing blocks for descendant boxes. The full details of containing blocks are covered in Containing Block.

For floated or absolutely positioned elements (including elements for which position is set to fixed), a width of auto will make the generated box shrink to the intrinsic dimensions of its contents.

Floated Elements and Width

Previously, in CSS2, floated elements without a declared width value would not shrink to wrap their content; instead, they’d expand to the full width of their parent element. This behavior was changed in CSS2.1 to allow the shrink-wrapping to take place. However, in Internet Explorer 6 and earlier versions, a floated element with no declared width value will shrink to wrap its content as per the specifications unless a child element has a layout, in which case the floated parent will expand to fill the available content width of the parent.1

It should also be noted that when a float (without a declared width) contains a right-floated child element, it will also expand to fill the parent’s available content width in IE browsers up to and including version 7 (Firefox up to and including version 2.0 also exhibits this bug but, the problem appears to have been fixed as of Firefox 3.0 Alpha 6).

Therefore, it’s always safer to specify an explicit value for the width of a floated element where possible, and thereby to avoid the buggy behavior described above. However, as long as you’re aware of the problems mentioned above, you’ll likely find that widthless floats can be useful in certain situations, such as fluid-width horizontal menus.

No matter how the content area is positioned, its height value will be equal to the content height if no values have been declared for height, or for min-height and max-height.

Therefore, to ascertain the total space required to place an element on the page, add the content area’s dimensions to any padding, borders, and margins that have been declared. Of course, an element may have no padding, border, or margins, in which case its dimensions will be dictated solely by its content.

If an element contains only floated or absolutely positioned elements, it will have no content at all, and its height will be zero. We’ll discuss this more in Floating and Clearing.

Implementing the Box Model

The box model is best demonstrated with a short example. The calculation we’ll use to ascertain the total space required to accommodate an element on the page (ignoring margin collapse for the time being—see below for more on this) will be as follows:

Total width = left margin + left border + left padding + width +
                   right padding + right border + right margin

Total height = top margin + top border + top padding + height +
                   bottom padding + bottom border + bottom margin

Here’s our example CSS—a rule set that contains declarations for all the box properties of an element that has the class "box":

.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;
}

The total size of the element above will be calculated as follows:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

The above calculation is depicted in Figure 1, which is taken from the element layout display from Firebug, the JavaScript and CSS development add-on for Firefox.

Figure 1. The CSS box model in action A diagram displaying the width of a box and how it is
          calculated in CSS. The interior dimensions are added to the padding,
          border and margin widths.

In Figure 1, we can clearly see the content area in the center, the padding around the content area, the border area, and the margin area. The outer edge of the content area is called the content edge or inner edge; the outer edge of the padding area is called the padding edge; the outer edge of the border area is called the border edge; and the outer edge of the margin area is called—you guessed it—the margin edge or outer edge.

You can see from this short example that, for this element to fit on the page, we’ll need a space that’s at least 352px wide and 252px high. If the space available is any smaller than this, the element will be misplaced, or will overflow its containing block. Note that Internet Explorer 6 and earlier versions will most likely stretch the containing block to accommodate this extra height, and could severely disrupt the layout. Other browsers will let the element overflow its boundaries, but will ignore the content.

Watch Out for Collapsing Margins

Although margins are included in the above calculations for the total space required to place the element, note that vertically adjacent margins on static (non-positioned) elements would collapse into the bigger margin of the elements that are adjacent above and below. This means that the actual space required to place an element would not necessarily extend from the margin edges of elements existing on the page: only the biggest margin will apply, and the smaller margins will appear to overlap the bigger margins. See Collapsing Margins for the full details of this quite complicated subject.

Posted by 행복한 프로그래머 궁금쟁이박
TAG CSS, 웹표준

댓글을 달아 주세요

  1. BlogIcon 셈틀쟁이 2008.06.30 19:32 신고  댓글주소  수정/삭제  댓글쓰기

    아오 몽땅 영어야....ㅋ

2단 레이아웃을 만들어 보았다.

뭔가 3단은 너무 메인화면이 작은 느낌이라 나는 늘 2단 레이아웃을 사용하는 편이다.

블로그의 레이아웃을 보아도 2단으로 되어있음을 알 수 있을 것이다.

JSP 작업을 하다가 만든 것이므로 예시는 확장자는 JSP 로 되어있다.

먼저 큰 틀을 잡아보자.

일반적으로 header, left, content, footer 네 부분으로 구성되는게 보통이다.

 header

  left

  content

                        footer


나는 다음과 같이 이 페이지를 구성하였다.

<div id="wrap">                            <!-- 전체를 감싸는 랩퍼 -->
       <div id="header">                  <!-- 헤더 영역 -->
       </div>
       <div id="left">                        <!-- left 영역 -->
       </div>
       <div id="contentWrap">            <!-- content 를 감싸는 랩퍼 -->
                <div id="contentheader"> <!-- content 의 헤더 -->
                </div>
                <div id="content">           <!-- content 영역 -->
                </div>
       </div>
       <div id="footer">                     <!-- footer 영역 -->
       </div>
</div>


header, left, content, footer 외에 wrapper 가 들어가 있다.

내가 wrapper 라는 것을 넣은 이유는 무엇일까?

나는 레이아웃이 깨지는 것을 방지하기 위해 wrapper 를 사용했다.

wrapper 없이 레이아웃을 디자인 했을 때 각 영역들이 유동적으로 줄어들고 늘어나고 했지만

마냥 늘이고 줄일 수 있다면 웹페이지가 보기 흉해질 것이므로 wrapper 를 사용하여 고정 값을

지정해 주었다.

이미지를 올려서 설명해야 하는데 너무 귀찮다 ㅡㅡ;;

css 를 한번 볼까?

/* BORDER 가 left, contentWrap, content 에 들어가서 6px 을 추가, 추후 줄일 것 */
/* 1106px = left(250px) + padding-left(15px) +
   contentWrap(820px) + padding-contentWrap(15px) + border(6px)
   보더는 임시로 넣은 것이다. 레이아웃이 제대로 잡혔나 확인하기 위해서...  
   세 부분에 사방으로 1px 보더가 잡혀서 6px 을 더 잡았다. */

#wrap {                    
 width : 1106px;
}                     
#contentWrap {
 float : right;
 width : 820px;
 border : solid 1px;
 padding : 15px;
}

#header {
 height: 127px;
 background: #ffffff;
 border : solid 1px;
}

#left {
 float : left;
 width : 250px;
 text-align : center;
 background : #ffffff;
 border : solid 1px;
}
#left div {
 padding : 15px;
}

#content {
 width : 100%;
 height : 400px;
 text-align : left;
 border : solid 1px;
}

#contentheader {
 height : 30px;

}
#footer{
 clear : both;
 height: 30px;
 background: #ffffff;
 text-align : center;
 border : solid 1px;
 width : 100%;

}
#footer div {
 padding : 15px;
 font-weight : 900;
 }

이렇게 하여 나온 화면은 다음과 같다.


사용자 삽입 이미지

깔끔하게 나왔당.^^;

헤더와 푸터는 height 가 고정되어 있고, left 와 contentWrap 은 height 를 유동적으로 해 놓았음을 볼 수 있다.

창 크기를 줄여도 wrapper 가 width 를 fix 된 길이로 잡고 있기 때문에 left 나 content 가 줄어들지 않고

단지 브라우저에 스크롤바가 생기게 된다.

레이아웃을 제대로 만들어 보자는 생각으로 해봤는데 이게 괜찮은지 잘 모르겠다.^^;

책을 많이 읽어서 보다 안정적이고 이상적인 레이아웃을 만들어보자...




Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

  1. BlogIcon 에어림 2008.05.24 01:55 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃.. 골 아프다 정말

  2. BlogIcon 에어림 2008.05.24 01:55 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃.. 골 아프다 정말

  3. BlogIcon Nike Air Max Shoes 2012.05.04 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    http://www.nikejordanairmaxshoes.com/ Nike Air Max Shoes http://www.nikejordanairmaxshoes.com/ Air Max Shoes http://www.nikejordanairmaxshoes.com/ Nike Air Max http://www.nikejordanairmaxshoes.com/ nike jordan air max http://www.nikejordanairmaxshoes.com/ nike air jordon http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run-sale-id-187.html Barefoot Nike Free Run http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run--2-sale-id-321.html Barefoot Nike Free Run+ 2 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run--3-sale-id-322.html Barefoot Nike Free Run+ 3 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run-sale-id-323.html Barefoot Nike Free Run http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Free-Run-3-0-V2-sale-id-324.html Barefoot Free Run 3.0 V2 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Free-Run-3-0-V3-sale-id-325.html Barefoot Free Run 3.0 V3 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-5-0-V4-sale-id-326.html Barefoot Nike Free 5.0 V4 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-7-0-sale-id-327.html Barefoot Nike Free 7.0 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Tr-Fit-sale-id-328.html Barefoot Nike Free Tr Fit http://www.nikejordanairmaxshoes.com/cheap-Dual-Fusion-St-2-sale-id-329.html Dual Fusion St 2 http://www.nikejordanairmaxshoes.com/cheap-Air-Max-sale-id-330.html Air Max http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2009-sale-id-331.html Nike Air Max 2009 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2011-sale-id-332.html Nike Air Max 2011 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2012-sale-id-333.html Nike Air Max 2012 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-24-7-sale-id-334.html Nike Air Max 24-7 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-87-sale-id-335.html Nike Air Max 87 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-89-sale-id-336.html Nike Air Max 89 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-90-sale-id-337.html Nike Air Max 90 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-91-sale-id-338.html Nike Air Max 91 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-93-sale-id-339.html Nike Air Max 93 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-95-sale-id-340.html Nike Air Max 95 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-180-sale-id-341.html Nike Air Max 180 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-360-sale-id-342.html Nike Air Max 360 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2010-sale-id-343.html Nike Air Max 2010 http://www.nikejordanairmaxshoes.com/cheap-Nike-Max-Alpha-2012-sale-id-344.html Nike Max Alpha 2012 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-ACG-sale-id-345.html Nike Air Max ACG http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Tailwind--4-sale-id-346.html Air Max Tailwind +4 http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Classic-BW-sale-id-347.html Air Max Classic BW http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Griffey-sale-id-348.html Air Max Griffey http://www.nikejordanairmaxshoes.com/cheap-Air-Max-LTD-sale-id-349.html Air Max LTD http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Skyline-sale-id-350.html Air Max Skyline http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Terra-Ninety-sale-id-351.html Air Max Terra Ninety http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-Tn-sale-id-352.html Nike Air Max Tn http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Zenyth-sale-id-353.html Air Max Zenyth http://www.nikejordanairmaxshoes.com/cheap-Air-Max-2009-Heels-sale-id-354.html Air Max 2009 Heels http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-Barkley-sale-id-355.html Nike Air Max Barkley http://www.nikejordanairmaxshoes.com/cheap-Nike-Lunar-sale-id-356.html Nike Lunar http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide--3-sale-id-367.html Nike LunarGlide+ 3 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide--2-sale-id-368.html Nike LunarGlide +2 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide---sale-id-369.html Nike LunarGlide + http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarElite--sale-id-370.html Nike LunarElite+ http://www.nikejordanairmaxshoes.com/cheap-LunarEclipse--2-sale-id-371.html LunarEclipse+ 2 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarEclipse--sale-id-372.html Nike LunarEclipse+ http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarMX--sale-id-373.html Nike LunarMX+ http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarSwift-sale-id-374.html Nike LunarSwift http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarHaze-sale-id-375.html Nike LunarHaze http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarFly--2-sale-id-376.html Nike LunarFly+ 2 http://www.nikejordanairmaxshoes.com/cheap-Nike-Lunaracer--2-sale-id-377.html Nike Lunaracer+ 2 http://www.nikejordanairmaxshoes.com/cheap-Lunar-Orbit-Nd-sale-id-378.html Lunar Orbit Nd http://www.nikejordanairmaxshoes.com/cheap-Lunar-Rejven8-Mid-sale-id-379.html Lunar Rejven8 Mid http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarElite--2-sale-id-380.html Nike LunarElite+ 2 http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-sale-id-357.html Air Jordan http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-2012-sale-id-381.html Air Jordan 2012 http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-2011-sale-id-382.html Air Jordan 2011 http://www.nikejordanairmaxshoes.com/cheap-Jordan-Melo-M7-sale-id-383.html Jordan Melo M7 http://www.nikejordanairmaxshoes.com/cheap-Jordan-Fly-Wade-II-sale-id-384.html Jordan Fly Wade II http://www.nikejordanairmaxshoes.com/cheap-Jordan-Alpha-Trunmer-sale-id-385.html Jordan Alpha Trunmer http://www.nikejordanairmaxshoes.com/cheap-Jordan-Heels-sale-id-386.html Jordan Heels http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-III-3--sale-id-387.html Air Jordan III(3) http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-V-5--sale-id-388.html Air Jordan V(5) http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-IV-4--sale-id-389.html Air Jordan IV(4) http://www.nikejordanairmaxshoes.com/cheap-Jordan-Retro-XI-11--sale-id-390.html Jordan Retro XI(11) http://www.nikejordanairmaxshoes.com/cheap-Jordan-3-5-Spiziker-sale-id-391.html Jordan 3.5 Spiziker http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-sale-id-358.html Nike Shox http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-R4-sale-id-392.html Nike Shox R4 http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-NZ-sale-id-393.html Nike Shox NZ http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-Turbo-sale-id-394.html Nike Shox Turbo http://www.nikejordanairmaxshoes.com/cheap-Air-Force-1-sale-id-359.html Air Force 1 http://www.nikejordanairmaxshoes.com/cheap-Air-Force-1-Heels-Hi-Top-sale-id-395.html Air Force 1 Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-SB-sale-id-360.html Nike Dunk SB http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Heels-Lo-Top-sale-id-396.html Nike Dunk Heels Lo-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Heels-Hi-Top-sale-id-397.html Nike Dunk Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Block-Heels-sale-id-398.html Nike Dunk Block Heels http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Block-Heels-Hi-Top-sale-id-399.html Nike Dunk Block Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Zoom-sale-id-361.html Nike Zoom http://www.nikejordanairmaxshoes.com/cheap-Hyperdunk-2011-Low-sale-id-400.html Hyperdunk 2011 Low http://www.nikejordanairmaxshoes.com/cheap-Zoom-Kobe-VI-sale-id-401.html Zoom Kobe VI http://www.nikejordanairmaxshoes.com/cheap-Zoom-Rookie-sale-id-402.html Zoom Rookie http://www.nikejordanairmaxshoes.com/cheap-Lebron-VIIII-9-sale-id-403.html Lebron VIIII 9 http://www.nikejordanairmaxshoes.com/cheap-Zoom-Kobe-VII-sale-id-404.html Zoom Kobe VII http://www.nikejordanairmaxshoes.com/cheap-Air-GO-LWP-sale-id-405.html Air GO LWP http://www.nikejordanairmaxshoes.com/cheap-Zoom-Lebron-VII-sale-id-406.html Zoom Lebron VII http://www.nikejordanairmaxshoes.com/cheap-Football-Soccoer-sale-id-363.html Football Soccoer http://www.nikejordanairmaxshoes.com/cheap-Tiempo-Legend-IV-sale-id-365.html Tiempo Legend IV http://www.nikejordanairmaxshoes.com/cheap-Nike-MERCURIAL-sale-id-366.html Nike MERCURIAL http://www.nikejordanairmaxshoes.com/cheap-Nike-Trail-Blazer-sale-id-364.html Nike Trail Blazer

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요