블럭과 인라인

거의 모든 태그는 태그가 감싸고 있는 부분이 웹브라우저에 어떻게 표시될지를 결정하는 display라는 속성을 가지고 있습니다. 웹브라우저의 개발자 도구를 열어서 보면 기본적으로 정해진 태그의 display 속성을 확인 하실 수 있습니다.

 

개발자도구에서 display 확인

 

위 그림에서서 styles 부분에 보시면 body의 display : block; 임을 확인 할 수 있습니다.

 

대표적인 display 속성은 block, inline 입니다.

이외에도 inline-block, table, table-cell, flex, inline-flex, grid ... 등 다양하게 있지만 기본적으로 block과 inline 속성을 이해하면 나머지들은 대략 어떤 느낌인지 파악할 수 있으며 CSS강좌에서 다시 설명드리겠습니다.

html5 전에는 대부분의 웹문서에서는 block과 inline 만으로도 웹페이지를 구성했었습니다. 그만큼 기본이 되는 속성이니 반듯이 이해하고 있어야 합니다.

 

 

개발자 도구의 Elements 부분 div 태그요소에 마우스를 클릭하면 아래쪽 styles부분의 div display 속성을 보면 block 임을 확인 할 수 있습니다.

다시 Elements 부분 div 태그요소에 마우스를 올리면 화면에 div 요소가 파란색으로 활성화 되고 선택된 div 요소의 크기가 보이게 됩니다. 현재는 218*21 사이즈 입니다.

파란색으로 활성화된 부분을 보면 "블럭 요소"라는 글자를 넘어서 화면 끝까지 차지하고 있습니다.

기본적으로 display:block 속성을 가진 요소는 화면의 가로 전체를 차지합니다. 정확히 말하면 부모요소의 크기를 상속 받습니다.

 

다시 개발자 도구의 Elements 부분 span 태그요소에 마우스를 클릭해보면 아래쪽 styles부분의 div display 속성이 보이지 않습니다. 기본적으로 인라인 속성을 가진 요소는 styles부분에 display 속성을 표시 하지 않습니다. 하지만 아래 그림처럼 styles 옆에 Computed를 클릭해서 보면 아래 Layout 부분에  display 속성이 inline으로 적용되었슴을 알 수 있습니다.

 

 

다시 Elements 부분 span 태그요소에 마우스를 올리면 화면에 span 요소가 파란색으로 활성화 되고 선택된 div 요소의 크기가 보이게 됩니다. 

 

 

파란색으로 활성화된 부분을 보면 이번에는 "인라인 요소"라는 글자까지만 차지하고 있습니다.

즉 display:inline 속성을 가진 요소는 태그안 내용의 크기 만큼만을 차지합니다.