[CSS] display 속성 (화면 배치 방법) block, inline

display 속성에 대해 알기 전에 아래 내용을 알아야 한다.

HTML  태그는 "블록 레벨 요소"와 "인라인 레벨 요소"로 구분지을 수 있다.

종류	태그
블록 레벨 태그	<p>, <h1> ~ <h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

그럼 "블록 레벨 요소"와 "인라인 레벨 요소"는 무엇일까.

블록 레벨 요소

• 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소

인라인 레벨 요소

• 줄을 차지하지 않는 요소

 

블록 레벨 요소

인라인 레벨 요소

 

Display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다.

display : none | contents | block | inline | inline-block | table | table-cell 등

많이 사용하는 속성은 none, block, inline, inline-block

none : 해당 요소 화면 표시 X

block : 블록 레벨로 지정

inline : 인라인으로 지정

inline-block : 인라인으로 배치하면서 내용에는 블록 레벨 속성을 지정할 수 있음 width, height, margin, padding