div 태그공부-5

기초 틀 잡는 것은 오늘 마지막 시간입니다.

사실 지난번 시간까지만 잘 이해하셨다면

오늘 것은 얘기안해도 벌써 하신분들이 많이 있을 겁니다~

 

그래도 다른 속성 태그가 어떻게 사용되는지 볼겸

한번 설명해 볼까요~~

 

 

본문 출력 부분 content 레이어

 

가로 크기를 580px로 하고, 배경색을 흰색으로 지정합니다.

width:580px; background-color:#FFFFFF;

가독성을 위해서 본문의 배경은 흰색을 추천합니다.

 

좌측으로 오게 하기 위해 float 속성을 줍니다.

width:580px; background-color:#FFFFFF; float:left

좌측으로 위치시키기 위해서 'float:left'를 입력하였습니다.

우측에 오게 할 때는 'float:right'를 입력하면 됩니다.

 

content의 완성된 속성을 style.css에 아래와 같이 입력합니다.

-------------------------------------------------------

#content {width:580px; background-color:#FFFFFF; float:left}

---------------------------------------------------------

 

 

sidebar 레이어

 

가로 크기를 220px로 하고, 배경색을 채워줍니다.

width:220px; background-color:#AAAAAA;

 

container레이어의 가로크기를 800px,

content 레이어의 가로 크기를 580px로 지정했으므로

sidebar레이어의 가로크기는 800px에서 580px를 뺀 220px로 정확히 지정해줍니다.^^

 

우측으로 오게 하기 위해 float 속성을 줍니다.

width:220px; background-color:#AAAAAA; float:right

 

sidebar의 완성된 속성을 style.css에 아래와 같이 입력합니다.

-------------------------------------------------------

#sidebar {width:220px; background-color:#AAAAAA; float:right}

------------------------------------------------------

 

디스플레이 하면

 

 

 

완성 되었다고 볼 수 있겠지요^^

 

이 정도만 잘 이해하시면

예전에 테이블로 짜던 모든 것을 만들 수 있으리라 생각되어집니다.

div 태그가 나와도 무서워(?) 하지 마시고

소스 분석도 가능하시리라 생각되어집니다~~

 

이제 남은 과제는

다양한 속성값들을 활용한 꾸미기의 문제이겠지요^^