대부분의 HTML의 요소(element)는 block 요소다.
예를 들어 header, footer, p, li, table, div, h1 등이 모두 block 요소에 해당된다.
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 이어 붙여넣을 수 없다는 뜻.
block 요소와 성질이 반대인 inline 요소도 있다. span, a, img 태그 등이 inline 요소.
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻.
첫 번째부터 네 번째까지는 p태그 같은 block 요소다. 노란색 영역이 해당 요소가 차지하는 영역. 텍스트는 짧은데 그 이상으로 영역을 차지하고 있다. block 요소들은 이런식으로 항상 새 줄에서 시작하며 좌우로 최대한 늘어나게 된다.
마지막 'span의 오른쪽 정렬'이라고 작성된 것은 inline요소인 span태그를 사용했다. 그림과 같이 딱 텍스트 길이만큼의 영역만 차지한다. 만약 저 이후로 inline 성질을 가진 태그가 더 있었다면, 새 줄에 시작되는게 아니라 바로 오른쪽에 배치됐을 것.
홈페이지 디자인을 받아서 HTML 작업을 시작할 때, 이렇게 inline, block 성질을 생각하면서 HTML 태그를 선택할 필요는 없다.
물론 대부분 inline, block 성질에 의해 태그가 결정되지만, 아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있다.
아무리 block 요소의 성질을 가진 p태그도 css을 사용하여 inline 스타일로 바꾸면 span과 똑같은 디자인이 된다. inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.
div { display: inline-block; } /* 또는 */ div { float: left; } /* 또는 */ div { float: right; }
위 예시 코드처럼 css에 display: inline-block; 를 적용하면 block 요소를 inline 요소로 바꿀 수 있다.
반대로 inline 요소를 가진 태그를 block으로 바꾸려면 css에 display: block; 을 적용하면 된다.
