[CSS] display 속성(1) block, inline-block, inline

display는 화면이 렌더링되었을 때 어떠한 특정 영역이 표시되는데 성질을 부여하는 property이다.  문서 내에서 요소가 가지고 있는 고유한 속성을 변경할 수 있다.

 

 block 

• block은 한 영역을 차지하는 박스형태를 가진다. 
• 기본적으로 width값이 100%이며 height, width, margin, padding을 지정할 수 있다.

<address>, <article>, <aside>, <blockquote>, <canvas>, <div>, <hr>, <header>, <form>, <table>, <pre>, <ul>, <ol>, <p>, <video>, <dd>, <dl>, <h1>~<h6>, ....

 

 inline 

• inline은 주로 텍스트를 넣을 때 사용되는 형태이다.
• width값이 컨텐츠 영역만큼 잡히며 width와 height를 명시할 수 없다.
• margin은 위아래에는 적용되지 않는다.
• padding은 좌우에는 모두 적용되지만, 위아래에는 시각적으로는 추가되나 공간을 차지하지는 않는다.

<a>, <i>, <span>, <img>, <strong>, <b>, <input>, <sub>, <br>, <button>, <cite>, <em>, <map>, <textarea>, <label>, ....

 

 inline-block 

• inline-block은 inline 요소처럼 배치되면서 block 요소의 속성(width, height)들을 사용할 수 있다.
• width와 height를 지정하지 않으면 inline과 같이 컨텐츠만큼 영역이 잡힌다.