-
div 태그공부-3 레이어속성 정하기IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 13. 13:30
<div id="container">
<div id="header">상단레이어</div>
<div id="content">좌측레이어</div>
<div id="sidebar">우측레이어</div>
</div>
위 태그는 1강 때 설명한 것입니다
이제 각 레이어의 속성을 정해보는 연습을 해보겠습니다
(참고로 div로 잡히는 것이 레이어 입니다)
위 태그에는 container, header, content, sidebar 4가지의 레이어가 있습니다
먼저 감싸는 레이어인 container부터 설정해 보겠습니다
전체 틀을 이야기 하는 것입니다.
가로 크기 800px로 하고
width:800px;
가운데 정렬이 되게 합니다.
width:800px; margin:20px auto
'margin'은 바깥 여백을 뜻합니다. 안쪽 여백은 'padding'입니다.
'20px auto' 는 위 아래에 각각 20px 여백을 주고,
좌 우에는 자동으로 동일하게 주라는 말입니다. 고로 가운데 정렬이 되겠지요.
container의 완성된 속성을 style.css에 아래와 같이 입력해보면
------------------------------------------------
#container {width:800px; margin:20px auto}
------------------------------------------------
괜히 어렵게 얘기되는 듯 하는데
간단하게 정리해 보겠습니다.
width, margin 등 기본적인 명령어 들은 일반적인 태그와
비슷하게 사용되어집니다.
그대로 이해하시면 될 거 같구요~
css 명령어를 적을 때
앞에 #을 붙이고 레이어 이름을 적습니다
그리고 {} 안에 속성을 적어시면 됩니다~
또하나 중요한 것은
명령어 다음에 “:” 콜론을 적어주시고 수치
계속해서 속성을 적을 때는 “;” 세미콜론 적어주시고 다음 속성 값~~
#container {width:800px; margin:20px}
뭐 위와 같이 적어주시면 되는 것이지요~
오늘 시간에서 기본적인 css문법만 잘 기억하면 됩니다.
디스플레이 되면~~ 1강때와 그대로 이죠~
참고로 container 레이어 속성만 잡아준다고 해서
바뀌는 것은 없습니다 ㅜㅜ
(색상은 바꾸면 바뀌겠죠~~)
반응형'IT 배우기 > 컴퓨터, 스마트폰 활용' 카테고리의 다른 글
div 태그공부-5 (0) 2010.10.15 div 태그공부-4 (2) 2010.10.14 div 태그공부-2 css (0) 2010.10.12 div 태그공부-1 (0) 2010.10.11 [기초태그강좌] 클릭하면 파일다운 받기 (2) 2010.10.11