HTML 문서에 나오는 많은 태그들 중에 body 영역에 쓰이는 태그들은 크게 두가지 성격으로 나눌 수 있습니다. 바로 블록과 인라인이라는 속성인데, 아래 예시를 한 번 보겠습니다.

See the Pen
블록과 인라인 차이
by 배현기 (@illustudio)
on CodePen.

일부러 눈에 잘띄게 블록 속성의 태그에는 빨간테두리를, 인라인 속성의 태그에는 초록색 테두리를 둘러주었습니다. 별다른 설정을 하지 않아도, 블록(block) 속성을 가진 태그는 무조건 욕심껏 가로로 100%의 공간을 다 차지합니다. 하지만 인라인(inline) 속성을 가진 태그는 딱 내용이 필요한만큼만 영역을 차지하고, 옆 공간을 다른 태그에게 양보해줍니다.

여기서 착각해서는 안되는 점이 있습니다. inline 속성의 태그를 block 속성의 태그 옆에 붙여주면, inline은 양보를 잘하니까 그대로 옆에 붙어있지 않을까? 라고 생각 할 수 있는데, 절대 그렇지 않습니다. block은 욕심껏 무조건 100%를 차지하기때문에 inline을 무시하고 무조건 100% 다 가로폭을 차지합니다.

블록과 인라인은 레이아웃을 구성할때 무척 중요한 개념입니다.

여기서 재미있는 점이 하나 있는데, CSS를 이용하면 Block의 성격을 inline으로 , inline을 Block으로 바꿔줄 수 있습니다. 사람 성격은 쉽게 못 바꿔도, 태그의 성격은 쉽게 바꿀 수 있습니다. 그렇다면 왜 태그를 굳이 성격을 정해놓고 만들었느냐 싶은 생각도 들 수 있을 겁니다.

각 태그들은 이름에서 의미를 찾아볼 수 있습니다. 위의 예시에서 보여준 div, p, span의 이름은 각각 Division, Paragraph, Span에서 유래됐다고 볼 수도 있는데 – 정확한 네이밍에 대해서는 의견이 분분하더군요. 각각 영역을 분할(division)하고, 문단(Paragraph)으로 나누고, 컨텐츠 내용에 따라서 자유롭게 늘어나고 줄어든다(span)는 의미에서 이름을 지어놓은 것들입니다. 그래서 태그 성격상 100% 다 공간을 차지해야하는 태그와 그렇지 않은 태그로 나누었다고 생각해볼 수 있습니다. 어차피 초창기 HTML문서에 대한 규약은 요즘처럼 화려한 레이아웃을 염두에 두고 만든게 아니었기 때문이죠.

과거 html4 시절만해도 이런 태그 이름의 의미에 대해서 크게 주목받지 못했습니다. 오래전에 html을 배우신 분들은 table로 레이아웃을 잡던 것이 익숙할 겁니다. 하지만 검색엔진이 점점 적절한 의미대로 구조를 갖춰 작성된 웹 문서를 선호하는 알고리즘으로 변화하면서 이런 태그들의 이름과 역할대로 쓰여지는 의미론적 접근이 중요해졌지요.

그러면서 레이아웃을 구성하는 header, aside, section, article, footer 태그들이 새로 나오게 됐습니다. 다음 글에서는 이것들에 대해서 대략적으로 흝어보겠습니다.

0

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of