inline 과 block

처음 코딩을 시작할 때 부터 오늘까지, (비록 얼마되지 않은 짧은 시간이지만) 집요하게 나를 괴롭히는 개념이 있다. 

바로 HTML의 inline 과 block 인데 두 개념이 헷갈리니 여백이나 정렬에서도 계속 헷갈리는 부분이 나온다. 

그래서 먼저 둘을 정확하게 구분하고 관련된 개념들도 다시 정리하려 한다. 

 

1. inline 

 

태그에 할당된 공간만 차지하는 요소이다. (새로운 줄을 만들지 않는다.)

다른 인라인 요소는 포함할 수 있지만, 블록 요소는 포함할 수 없다. 

display 속성을 사용해 인라인을 블록 요소처럼 다룰 수 있다. 

width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

 

인라인 요소

<a> , <br> , <button> , <canvas> , <img>, <input>, <label>, <object>, <select>, <span>, <textarea> 등  

 

2. block

 

전체 공간을 차지해 '블록'을 만든다. (언제나 새로운 줄을 만들고, 좌우로 최대한 늘어나 모든 너비를 차지한다. )

다른 블록 요소와 인라인 요소를 모두 포함할 수 있다.

HTML5 에서는 이전의 block 요소에 해당하는 요소들이 정확히 한 콘텐츠에 포함되지는 않는다. (사라진 개념?)

- 콘텐츠 카테고리: HTML5에서 요소들을 분류하는 집합 단위 

width, height, margin, padding 속성이 모두 반영된다.

 

블록 요소

<address>, <article>, <div>, <h1~6>, <header>, <hr>, <li>, <nav>, <p>, <pre>, <section>, <table>, <ul> 등

 

3. display

 

display속성으로 인라인을 블록처럼, 블록을 인라인처럼 사용할 수 있다. 

또한 display: inline-block으로 지정하면 인라인 요소처럼 줄바꿈 없이 나란히 요소를 배치할 수 있으며, 

블록 요소처럼 width, height, margin, padding 속성이 모두 반영된다.

 

------------------------------------------

 

인라인 요소는 제한되는 부분이 많아서 (width, height가 무시된다.) 다루기 쉽지 않다. 

인라인 요소를 쓸 때 그 바깥에 <div>를 한 번 씌우고 div에 원하는 속성을 추가하는 방법이 있다. 

그런데 inline-block을 쓰면 굳이 div를 한 번 더 감싸지 않아도 인라인 요소에 바로 원하는 속성을 넣을 수 있지 않나?

둘의 차이가 뭔지 잘 모르겠다. 

+ 블록요소의 가운데 정렬은 text-align이다.

그렇다면 중앙정렬은 무엇일까? display: table-cell을 선호하지 않는 이유는?