-
div 태그공부-5IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 15. 13:42
기초 틀 잡는 것은 오늘 마지막 시간입니다.
사실 지난번 시간까지만 잘 이해하셨다면
오늘 것은 얘기안해도 벌써 하신분들이 많이 있을 겁니다~
그래도 다른 속성 태그가 어떻게 사용되는지 볼겸
한번 설명해 볼까요~~
본문 출력 부분 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 태그가 나와도 무서워(?) 하지 마시고
소스 분석도 가능하시리라 생각되어집니다~~
이제 남은 과제는
다양한 속성값들을 활용한 꾸미기의 문제이겠지요^^
반응형'IT 배우기 > 컴퓨터, 스마트폰 활용' 카테고리의 다른 글
파일삭제가 너무 느린경우 해결법 (0) 2010.10.18 div 태그공부-6 속성 값과 의미 (0) 2010.10.16 div 태그공부-4 (2) 2010.10.14 div 태그공부-3 레이어속성 정하기 (0) 2010.10.13 div 태그공부-2 css (0) 2010.10.12