레이아웃을 설정하는데 있어 CSS의 ‘display’ 속성은 핵심적인 역할을 합니다. 이 속성은 각 HTML 요소의 박스 타입을 결정하며 이 박스 타입은 요소의 레이아웃과 모양에 큰 영향을 미칩니다. 오늘은 이 중 ‘inline’과 ‘block’에 대해 깊이 있게 알아보고 이 두 요소가 어떻게 서로 다르며 어떻게 활용될 수 있는지에 대해 알아보겠습니다.
‘inline’과 ‘block’이란?
먼저, ‘inline’과 ‘block’에 대해 이해하기 위해서는 CSS의 ‘display’ 속성에 대해 알아야 합니다. ‘display’ 속성은 요소의 박스 타입을 결정하며 이 박스 타입은 요소가 웹 페이지에 어떻게 배치되는지, 요소 주위의 공간은 어떻게 활용되는지 등을 결정합니다.
‘block’ 요소는 항상 새로운 줄에서 시작하며, 가능한 한 부모 요소의 전체 너비를 차지하려고 합니다. 또한 너비와 높이, 마진, 패딩 등을 명시적으로 설정할 수 있습니다. ‘div’, ‘h1’~’h6’, ‘p’ 등의 태그는 기본적으로 ‘block’ 요소입니다.
반면에 ‘inline’ 요소는 새로운 줄에서 시작하지 않으며 다른 ‘inline’ 요소와 함께 한 줄에 배치될 수 있습니다. 또한 내부 콘텐츠의 너비만큼의 공간을 차지하며 상하 마진은 적용되지 않고, 좌우 마진만 적용됩니다. 또 너비와 높이를 직접 설정할 수 없습니다. ‘span’, ‘a’, ‘img’ 등의 태그는 기본적으로 ‘inline’ 요소입니다.
‘inline’과 ‘block’의 차이점
‘inline’과 ‘block’은 몇 가지 주요 차이점이 있습니다. 이 차이점을 이해하는 것은 CSS를 통한 레이아웃 제어에 중요합니다.
첫째, ‘block’ 요소는 항상 새로운 줄에서 시작하며 가능한 한 부모 요소의 전체 너비를 차지하려고 합니다. 이는 ‘block’ 요소를 사용하면 레이아웃의 큰 틀을 잡는 데 유용하다는 것을 의미합니다. 예를 들어 웹 페이지의 헤더, 본문, 푸터 등을 ‘block’ 요소로 만들면 각 섹션은 자신의 영역을 명확하게 구분할 수 있습니다.
반면에 ‘inline’ 요소는 새로운 줄에서 시작하지 않으며 다른 ‘inline’ 요소와 함께 한 줄에 배치될 수 있습니다. 이는 ‘inline’ 요소를 사용하면 텍스트나 이미지 같은 세부 요소를 가로로 나열하는 데 유용하다는 것을 의미합니다. 예를 들어 메뉴 항목이나 버튼 그룹을 ‘inline’ 요소로 만들면 이들은 가로로 나열되어 사용자에게 보여집니다.
둘째, ‘block’ 요소는 너비와 높이, 마진, 패딩 등을 설정할 수 있습니다. 이는 ‘block’ 요소를 사용하면, 요소의 기와 주위의 공간을 세밀하게 제어할 수 있다는 것을 의미합니다.
반면에 ‘inline’ 요소는 상하 마진과 너비, 높이 설정이 제한적입니다. 이는 ‘inline’ 요소는 주로 텍스트나 이미지 같은 내용을 담는 데 사용되며 이런 내용은 주로 자신의 내부 콘텐츠에 따라 크기가 결정되기 때문입니다.
‘inline’과 ‘block’의 활용
‘inline’과 ‘block’의 이러한 특성을 이해하고 활용하면, 웹 페이지의 레이아웃을 세밀하게 제어하고 다양하게 구성할 수 있습니다.
예를 들어, 웹 페이지의 큰 틀을 잡는 데는 ‘block’ 요소를 사용하면 좋습니다. 레이아웃의 각 섹션을 ‘block’ 요소로 만들어 각 섹션의 영역을 명확하게 구분하고 각 섹션의 크기와 주위의 공간을 세밀하게 제어할 수 있습니다.
반면에 텍스트나 이미지 같은 세부 요소를 나열하거나 배치하는 데는 ‘inline’ 요소를 사용하면 좋습니다. 메뉴 항목이나 버튼 그룹을 ‘inline’ 요소로 만들어 이들을 가로로 나열하고 각 요소의 위치를 세밀하게 제어할 수 있습니다.
block안에는 inline을 넣을 수 있지만 inline 안에는 block를 넣을 수는 없습니다. 대표적인 block인 <div></div>나 <p></p>는 문단 단위로 줄바꿈을 할 때 사용할 수 있는데 이 안에 inline인 span을 넣어서 <span class=”bold”> css에서 .bold에 font-weight: bold;를 넣어서 이렇게 입력을 해주면 div나 p안에 있는 class명이 bold인 부분으로 설정된 부분은 볼드체로 나오게 됩니다.
inline과 block 외에도 inline-block라고 해서 폭은 inline처럼 자신의 너비 만큼을 사용하지만 줄바꿈 등 block의 성질을 가지고 있는 속성도 있습니다. 너무 극단적인 inline과 block에 비해 활동도가 더 높은 코드이기도 한데 여러 가지 코드를 상황에 맞게 잘 사용하시면 될 것 같습니다.
결론
CSS의 ‘inline’과 ‘block’은 웹 페이지의 레이아웃을 제어하는 데 있어 중요한 역할을 합니다. ‘block’ 요소는 레이아웃의 큰 틀을 잡는 데 유용하며 ‘inline’ 요소는 세부 요소를 나열하거나 배치하는 데 유용합니다. 이 두 요소의 특성과 차이점을 이해하고 잘 활용하시면 좋겠습니다.