Layout 만들기 #2

header, content, foot 세 가지 열을 만들어보았고, 이번에는 행을 만들어 보겠습니다. header 부분에 3번째 행으로 gamma를 넣어보겠습니다. 디폴트 상태에서는

#gamma {
    display:none;
}

display:none으로 설정되어 있습니다. skin.html에서 <div id="gamma"> 감마 </div>라고 표현되더라도 화면에는 아무것도 출력되지 않는 상태인 것이지요. #gamma 행을 추가하기 위해서는 각 행의 width(가로) 사이즈를 변경해주어야 합니다. 디폴트 상태에서는 

#header-alpha {
    width:580px;
}
#header-alpha-inner {
    width:560px;
}
#header-beta {
    width:240px;
}
#header-beta-inner {
    width:220px;
}

#header-alpha 행의 크기를 200px 줄이고 #header-gamma의 크기를 200px로 설정해보겠습니다. gamma 행 하나를 추가하는데 alpha의 가로 사이즈 200px를 줄이는 이유는 #container-inner의 가로 사이즈를 820px로 설정해두었기 때문입니다. 전체 가로 사이즈에 맞춰서 각 행의 가로 사이즈를 맞춰야합니다. 다음과 같습니다.

#header-alpha {
    width:380px;
}
#header-alpha-inner {
    width:360px;
}
#header-beta {
    width:240px;
}
#header-beta-inner {
    width:220px;
}
#header-gamma {
    width:200px;
}
#header-gamma-inner {
    width:180px;
}

다음의 동영상을 참고하시고, 추가로 gamma 다음으로 delta, 즉 4 행을 만드는 것까지 해보겠습니다.