div 태그공부-3 레이어속성 정하기

<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 레이어 속성만 잡아준다고 해서

바뀌는 것은 없습니다 ㅜㅜ

(색상은 바꾸면 바뀌겠죠~~)