Box Model: Block, inline-block, inline

 

• 기본 div, span 성질

- div element는 content없어도 css로 width, height, background-color를 주면 웹에 등장!

- span은  css로 꾸며줘도 content가 있어야만 화면에서 볼 수 있다.

 

 

 

 

• div에 display:inline

div element에 display:inline을 하면 span처럼 inline element가 된다.

그래서 content가 없으면 화면에서 볼 수 없다.

 

 

 

 

• div에 display:inline-block;

 

div를 display:inline-block;으로 바꿔주면 화면 크기에 따라 상자 배열이 바뀐다.

화면 크기가 클 때는 저렇게 일렬로 있지만, 화면이 작아지면 뒤에 div 박스들이 아래줄로 내려간다.

 

 

 

 

• 기본 span 크기

 

span과 같은 inline 요소는 content의 길이에 따라 크기가 변한다.

 

 

 

 

• span에 display:inline-block;

그런데 이렇게 display를 inline-block으로 바꿔주면

content의 길이에 상관 없이 위에서 지정해준 width, height 크기만큼 박스가 생긴다.

 

 

 

 

• div를 inline으로 span을 block으로

default로 block인 div에 inline을 적용해주면 span처럼

default로 inline인 span에 block을 적용해주면 div처럼!

 

 

 

 

 

 

 

 

강의 필기