css box에 대한 동작요소

box에 대한 동작요소

 

1.style에서 같은 box(div header body footer ...) 묶으면 전체 적용

 

2. 브라우저에서

div는 적용되면 옆에 어떠한 박스도 오지않는다. => block

span은 적용되면 옆에 다른 요소가 따라온다. => inline

이러한 형태를 이해하면 디자인에 도움이 된다.

 

Inline에 포함되는 것 

작은 글(span), 링크(a), 그림(img)

Inline = no box (높이와 너비가 없다.)

 

Block에 포함되는 것

대부분의 박스들

Block = box

 

 

즉 inline에 포함되는 것들을 외우면 구분하기 쉽다.

Block -> Inline으로, Inline -> Block으로 가능하게 되는 법 = display:block

 

Inline->Block은 그냥 display:block; 으로 값을 주면 되지만

Block->Inline은 display:inline; 를 입력 할 경우 그 요소가 높이와 넓이를 가질 수 없다.

ㄴ>Inline = 높이와 넓이가 없다. (크기가 없다)