display

html태그를 통해 만든 요소들은, 초기설정된 디폴트 값 만큼 웹 화면상에서 제각각 일정 크기의 공간을 차지한다. display 속성을 사용하면 엘리먼트가 화면상에서 보여지는 방식을 변경 할 수 있다.

display 속성을 통해 부여할 수 있는 여러가지 속성값 중 가장 기본이 되는 세 가지가 (block/inline/inline-block)이다.

block

div태그,p태그로 감싸여진 엘리멘트는, 웹 화면 상에서 부모요소의 가로길이 100%만큼의 영역을 차지하도록 디폴트 값이 설정되어 있다. 이러한 성질을 갖는 요소들을 두고 block 속성을 갖는다고 표현한다.

'display:block;'속성의 엘리먼트는 width, height, padding, margin 값을 변경할 수 있다.(inline은 안됨)

inline

div태그나 p태그와는 달리, span태그로 텍스트를 감싸면 그 엘리먼트는 텍스트의 길이 만큼만을 영역으로 차지한다.

여러개의 span태그로 짧은 텍스트들을 각각 감싸면 한 줄의 '왼쪽->오른쪽' 방향으로 차곡차곡 쌓인다. 한 줄이 다차면 다음줄로 넘어감.

div태그를 사용한 엘리먼트의 경우, 감싸여진 텍스트의 길이가 한 두 글자라고 할지라도 '부모요소의 가로 길이 100%'를 영역으로 차지한다.

'display:inline;' 속성의 엘리먼트는 width, height, padding, margin값을 변경할 수 없다.

inline-block

'inline' , 'block' 두 개가 믹스된 속성을 갖는다.

inline과 마찬가지로, 엘리먼트 내용물의 부피/길이만큼만 영역을 차지함.

하지만 inline의 경우 width/height/margin/padding 변경 적용을 할 수 없었다면, inline-block은 가능하다.

정리하면, inline-block은 width/height/margin/padding-top/bottom/line-height 적용이 가능한 inline 이라고 보면 된다.