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 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

DTD 의 이해

Web 2008. 7. 1. 17:57
DTD의 이해 HTML/CSS

2008/05/09 14:24

복사 http://blog.naver.com/niceilm/150031138845

이 포스트를 보낸곳 ()

Overview
  • DTD의 정의
  • DTD 이해의 필요성
  • DTD의 이해
  • DTD에 따른 렌더링 차이

DTD의 정의

  • DTD란?
    • Document  Type Definition  (문서형 정의)
    • 문서의 정보 모델을 구체적으로 서술한 것으로서, 문서를 구성하는 정보 요소, 정보 요소의 구조와 특성 등 문서의 형태를 구조화 한 것
    • 웹브라우저에서 HTML 문서가 렌더링 되는 기준이 됨
  • DTD의 구성

DTD 이해의 필요성

  • 브라우저 및 DTD에 영향받지 않는 동일한 UI의 스크립트 개발
    • 현재 라이브러리의 문제점 파악 및 개선
    • 추후 발생할 문제점에 대해서 인지 가능
  • WS팀의 주요 사용 DTD가 변해가는 상황임
    • WS팀과의 협업 시, 문제점 파악 용이

DTD의 이해 - XHTML의 특징

  • 문법적으로 엄격하게 구성되어 있어야 한다.
  • 요소와 속성은 소문자로 표기되어야 한다.
  • 모든 태그는 종료태그를 갖는다.
  • 속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.
  • 속성과 값의 단축표기를 허용하지 않는다.
  • 비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.
  • a, applet, frame, iframe, img, map 에서 name 속성은 XHTML에서는 지원하지 않는다.

DTD의 이해 – 여러 종류의 DTD

DTD의 이해 - Quirks Mode

  • Quirks Mode는?
    • 점점 표준에 가깝게 개선된 웹브라우저들이 그렇지 못한 오래된 웹페이지들을 정상적으로 보여주기 위해 최신 버전의 브라우저에서 제공하는 호환모드
  • Quirks Mode로 동작하는 경우
    • DTD를 선언하지 않거나 잘못 선언한 경우
    • HTML 4.01 문서에서 시스템 식별자를 지정하지 않는 경우
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • Quirks Mode의 문제점
    • Quirks Mode는 비표준 모드로서 브라우저에 따라 호환시키려고 하는 요소들이 다르기에 브라우저에 따라 다르게 보여질 수 있는 문제가 있음 예) IE와 다른 브라우저 간의 Box Model 해석 차이 등등
DTD의 이해 – DTD 선언에 따른 브라우저별 렌더링
Q: Quirks Mode, A: Almost Standards Mode, S: Standards Mode

DTD의 이해 - DTD에 따른 렌더링 차이

  • Box Model
    • IE에서 Quirks Mode인경우 넓이를 지정하거나  계산 시, border와 padding을 포함하여 처리하는 반면 표준 모드에서는 실제 객체의 넓이를 기준으로 처리함
  • white-space : pre
    • 해당 요소 안의 공백 문자가 무시되지 않고 pre 요소처럼 처리할 수 있는 white-space : pre 속성이 Quirks Mode일 때는 윈도우 계열의 IE에서 제대로 처리되지 못함
      • IE Quirks Mode
      • Strict Mode
  • width and margin : auto (margin : 0 auto)
    • width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준이나 Quirks Mode일 때는 IE에서 적용되지 않음
      • IE Quirks Mode
      • Strict Mode
  • 단위 없는 값의 무시
    • 요소의 속성값을 설정 시, 단위를 붙이지 않을 경우 대부분의 브라우저에서 Quirks Mode에서는 값이 적용되는 반면, Strict Mode일 때는 값이 무시 됨
  • CSS 가상 선택자 관련
    • CSS 가상 선택자가 일부 브라우저의 Quirks Mode에서는 적용되지 않음
      • Quirks Mode
      • Strict Mode
  • overflow: visible
    • 특정 요소에 고정된 높이를 지정하고 overflow속성의 값을 visible로 설정한 경우, 요소 안의 내용이 많을 경우에는 요소를 벗어나서 표현되는 것이 표준이나 IE6, Quirks Mode의 IE7과 OP9에서는 그렇지 못함
      • IE6, Quirks Mode의 IE7, OP9
      • Strict Mode
  • inline 엘리먼트의 넓이 설정
    • Inline 엘리먼트에 넓이 값을 설정 시, 넓이 값이 무시되는 것이 표준이나 Quirks Mode의 IE에서는 display 속성을 inline-block으로 처리하여 넓이 설정이 적용 됨
      • IE Quirks Mode
      • Strict Mode
  • td의 font-size 속성
    • td 요소의 font-size 속성의 값을 80%로 설정한 경우, body text의 80% 크기로 설정하는 것이 표준이나 Quirks Mode에서는 대부분의 브라우저가 브라우저의 기본 폰트 크기의 80%로 설정 함
      • Quirks Mode
      • Strict Mode

QM: Quirks Mode

SM: Strict Mode

N: None Standard

S: W3C Standard

 
 

[출처] DTD의 이해|작성자 치토스

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

댓글을 달아 주세요

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. 6. 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 신고  댓글주소  수정/삭제  댓글쓰기

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

HTTPS

Web 2008. 6. 29. 09:13

Https란 인터넷 상에서 정보를 암호화하는 SSL(Secure Socket Layer) 프로토콜을 이용하여 세션 데이터를 암호화하여 전송하는 방법을 의미한다. SSL Netscape에서 선도한 보안기법으로, 정보 암호화시 공개키와 개인키라는 두 가지 키를 이용하여 정보를 암호화한다.

클라이언트가 서버에 접속하면 서버인증서(서버의 공개키를 인증기관이 전자서명으로 인증한 것) 를 전송받는다. (이때, 클라이언트 인증을 필요로 할 경우 클라이언트의 인증서를 전송하게 된다.). 클라이언트는 받은 서버 인증서를 분석하여 신뢰할 수 있는 인증서인지를 검토한 후, 서버의 공개키를 추출한다. 클라이언트가 세션키로 사용할 임의의 메세지를 서버의 공개키로 암호화하여 서버에 전송한다. 서버에서는 자신의 개인키로 세션키를 복호화하여 그 키를 사용하여 대칭키 암호방식으로 메시지를 암호화하여 클라이언트와 통신하게 되며 이것은 "https"라는 별도의 프로토콜을 사용하게 된다. 사용자가 입력한 정보는 공개키를 이용하여 암호화되어 다시 서버까지 전달된다. 공개키로 암호화된 정보는 서버만이 유일하게 소유하고 있는 개인키로만 해독이 가능하다.

이러한 https의 전송방식을 사용하면 인해 제 3자가 의도적으로 암호화된 정보를 가로챈다 하더라도, 서버의 개인키가 없는 한 해석이 불가능 하므로 신뢰성 높은 암호화 방법이 된다. 따라서 https는 웹 상에서 전자 상거래시 신용카드 정보를 암호화하거나, 전자 서명을 만드는데 주로 쓰인다. 보호의 수준은 웹 브라우저에서의 구현 정확도와 서버 소프트웨어, 지원하는 암호화 알고리즘에 달려있다.

공개키 암호 시스템은 암호문을 생성할 때 사용하는 키와 평문을 생성할 때 사용하는 키가 다른 암호 시스템이며(비대칭 키 암호), 공개키를 생성하는 암호화 알고리즘에는 RSA, EIGamal, 타원 곡선 암호등이 존재한다.

비밀키 암호 시스템은 암호문을 생성할 때 사용하는 키와 평문을 생성할 때 사용하는 키가 동일한 암호 시스템이며, 대칭키 암호 시스템으로 불리기도 한다. 비밀키를 생성하기 위해 사용되는 암호화 알고리즘으로는 DES, AES, ARIA ,Twofish등이 있다.

한편, HTTPS를 사용한다고 신용카드 등의 사용 사용 정보가 완벽하게  보호되는 것은 아니다. 암호화되는 정보는 웹 서버와 브라우저 사이에 전송되는 카드 정보만이 암호화될 뿐이므로, 데이터베이스에 저장되는 정보가 암호화 되지 않을 경우, 내부 인력에 의한 정보 유출이 발생하거나, 해킹으로 인해 암호화 되지 않은 정보가 대량으로 유출되는 사건이 일어나기도 한다.(최근의 중국 해커의 옥션 해킹 사건)

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

댓글을 달아 주세요

웹의 3대 보안 기법

Web 2008. 6. 29. 09:12

Authentication

인증은 가장 기본적인 사용자 접근 처리 기법으로써 사용자가 아이디와 패스워드를 전송하면 유효성을 체크하여 권한을 주는 방식이다. HTML 폼을 이용한 인증 기법이 주를 이루며, SSL 인증서나 물리적 토큰, 스마트 카드등도 제한적이지만 이용되고 있다.  보통의 인증 기법의 취약점은 설계의 결함에서 많이 노출된다. 이는 사용자의 패스워드에 대한 제어가 없거나 최소화 됨으로써(짧은 패스워드, 주민등록번호와 같은 패스워드, 사전에 있는 단어 등의 사용), Brute Force 공격에 의하여 쉽게 패스워드가 노출되게 된다. 또 다른 위협의 예로는, 인증 실패시의 메시지(“해당 아이디가 존재하지 않습니다.”, ”비밀번호가 틀렸습니다”)를 자세하게 제시하여 공격자의 공격 속도를 빠르게 할 수 있는 구조적인 위협도 존재한다.

이러한 위협을 방지하기 위해 패스워드의 최소한의 요구사항을 강제하여야 하며, 사용자가 강력한 패스워드를 저장할 수 있도록 지원해야 한다. 또한 자동화된 도구로의 공겨을 막기 위한 수단(여러 차례 로그인 실패시 계정을 임시 차단, 암호 찾기시 이메일 인증)이 구현단계에서 추가되어야 하며, 모든 인증 관련 사건을 로깅하고, 공격 방지를 위해 brute-force등의 공격이 탐지시, 실시간 경보등의 예방 대책들이 마련되어야 한다.

 

Session Management

세션은, 오늘날의 많은 웹 응용이 동적인 페이지를 사용함으로써, 상태를 유지하기 위해 사용되는 데이터 구조로써, 이를 이용하여 인증을 통해 성공적으로 로그인 한 사용자의 후속 행위에 대한 접근제어에 사용된다.  서비스 제공자는 각 사용자에게 세션을 식별할 수 있는 토큰을 제공하며, 사용자는 웹에서의 모든 요청을 해당 토큰을 이용하여 전송한다.

 이러한 사용자의 이메일이나 아이디와 관한 정보를 저장하는 세션이, 쉬운 암호를 사용하여 이를 인코딩할 경우 매우 위험하다. 또 의미있는 형태의 세션의 모습은 아니지만, 순서나 패턴등을 쉽게 예측 당할 수 있는 세션 토큰을 사용할 경우에도 공격자에게 악용될 소지가 있다.  또한 세션 자체를 얻는 것을 목적으로, 네트워크를 통해 전송되는 세션이 hijacking당하여 악용될 가능성도 존재한다.

세션 해킹을 방지하기 위해 세션 토큰은 HTTPS로 전송되어야 하며, 로그 아웃시에 정보를 저장하고 있는 세션토큰을 비우는 기능이 구현되야 하고, 적절한 시간이 지나면 세션이 자동 파괴되고, 동시 로그인을 허용하지 않는 방법등이 강구되어야 한다.

 

Access Control

사용자 접근 제어의 마지막 단계로써, 사용자가 특정한 행위나 자원에 대한 접근을 요청할시 허가할 것인지에 대한 결정을 확정 짓는 처리단계이다. 접근 제어는 인증과 세션 관리를 기반으로 하는 보안기법이고, 보통은 정교한 로직을 통해 구현되며, 응용의 영역이나 기능의 종류에 따라 고려 사항이 달라진다. 접근제어는 두 영역으로 구분되는데 첫째는 수직 접근제어, 두번째는 수평접근제어이다. 전자는 서로 다른 사용자가 서로 다른 기능을 사용할 있도록 제어하는 것(관리자vs일반 사용자)이고 후자는 사용자들이 서로 다른 자원에 대해 서로 다른 권한을 갖는 것(메일 응용과 같은)을 말한다.

접근제어가 깨어질 경우, 웹서버에 접근한 임의의 사용자가 자신에게 허가되지 않은 문서를 조회할 가능성도 있고, 이를 통해 페이지의 네이밍 규칙이 파악되면 많은 정적인 자원들이 대량으로 유출될 위험이 존재한다.

접근 제어의 요구 사항은 복잡하므로, 보안 취약점이 되는 경우가 많다. 개발자들은 사용자의 행위에 대해 종종 결함이 있는 가정을 하며, 접근 제어 체크를 누락하기도 한다. 공격자들은 각 기능 단위마다 접근 제어 취약점을 찾는 일이 번거로울 수 있으나, 접근 제어의 결함은 워낙 만연하므로 가치 있는 노력으로 간주 된다.

 따라서 접근 제어를 통제하기 위해, 사용자가 전송한 파라미터를 반드시 재검증 후에 사용해야하고, 중요한 데이터를 접근 할 경우에는 반드시 로그를 남김으로써 사후 처리를 할 수 있게 해야한다.

 

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

댓글을 달아 주세요

 XSS ( Cross Site Scripting ) 는 다양한 해킹의 방법 중 최근에 가장 이슈가 되고 있는 공격방법이다. 악의적인 사용자가 만든 동적으로 생성되는 웹페이지에서 악의적인 HTML 태그나 스크립트가 포함될 수 있다. XSS 는 웹 어플리케이션에 클라이언트로부터 악의적인 데이터를 받아 들일 때에 발생할 수 있다. 이렇게 받아들여진 데이터는 다른 클라이언트가 그 페이지에 접근할 경우에 전달 되게 되고, 이 클라이언트는 정상적인 데이터로 인식하고 그 내용을 interpret 하게 된다. 즉, 웹 어플리케이션을 매개로 하여 다른 사용자의 브라우저에서 스크립트 실행이 가능해 지는 것이다. 결과적으로 DOM( Document Object Model ) security restrictions 을 건너 뛰어 명령 실행이 가능해 지게 되는 것이다.

다음 예를 보자. 철수는 XSS 공격 방법을 이용하여 메일 서버를 통해 영희에게 악성코드가 첨부된 메일을 발송한다. 메일에 포함된 악성 스크립트 코드에 의해 영희가 메일을 읽는 순간 영희의 쿠키 정보가 철수에게 전달된다. 이렇게 되어 철수는 영희의 쿠키값을 간단히 조작하여 영희의 메일을 읽을 수 있게 되는 것이다.

XSS에는 두 가지 유형이 존재한다.

하나는 client-to-client 방식이다. 한 클라이언트에서 다른 클라이언트로 악의적인 코드가 전달되는 것이다. 게시판에 글을 쓴다든지 하는 방식으로 악의적인 코드를 전달할 수 있다.

또 하나는 client-to-itself 방식이다. 악의적인 코드가 공격 대상이 되는 클라이언트 자신이 보내서 자신이 되돌려 받는 유형이다. 이러한 형태의 공격은 주로 이메일이나 웹페이지를 통해서 링크를 제시하고 사용자가 그러한 링크를 클릭을 유도하는 방식으로 이루어진다.

이러한 경우에 대해 XSS 공격을 방어하는 가장 좋은 방법은 어플리케이션이 모든 header 들, cookie, query string, form field, hidden field 등에 대해 유효성 검사를 실시하는 것이다.

이러한 방식의 공격을 방어하기 위해 ASP, JSP, PHP 등의 웹 언어들은 간단한 방어기법을 제공하는데 다음은 JSP 의 예이다. HTML코드의 시작을 알리는 ‘<’ 에 대해서 &lt; 으로 변환시킨다.

/% less than (<) character 를 &lt; 으로 변환시킵니다. %/

String userInput = request.getParameter(“keyword”);

user_input = user_input.replaceAll(“’”, “\’”);

 

무엇보다 중요한 것은 개발자가 보안에 대한 경각심을 가지고 프로그래밍을 할 때에 조금 귀찮은 부분이라도 위와 같은 처리를 해줌으로써 공격에 대응할 수 있도록 하는 것이다.



 

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

댓글을 달아 주세요

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