웹 디자인을 배우는 과정에서 display 속성은 매우 중요합니다. 특히 display: inline-grid;와 같은 속성은 레이아웃을 구성할 때 유용하게 사용됩니다. 이번 글에서는 display 속성의 다양한 값과 특히 인라인 그리드에 대해 자세히 알아보겠습니다.
display 속성이란?
display 속성은 HTML 요소가 어떻게 보여질지, 즉 레이아웃에 있어서 요소의 상자 유형을 결정합니다. 이 속성은 웹 페이지의 레이아웃 구조를 크게 조정할 수 있는 강력한 도구입니다.
display 속성의 값들
block: 요소를 블록 레벨로 만듭니다. 새 줄에서 시작하며, 가능한 모든 너비를 차지합니다.inline: 요소를 인라인 레벨로 만듭니다. 줄바꿈 없이 다른 인라인 요소와 나란히 배열됩니다.inline-block: 인라인 레벨 요소처럼 줄바꿈 없이 다른 요소와 나란히 배열되면서, 블록 레벨 요소처럼 폭과 높이를 가집니다.flex: 요소를 플렉스 컨테이너로 만듭니다. 유연한 레이아웃을 구성할 수 있습니다.grid: 요소를 그리드 컨테이너로 만듭니다. 2차원 그리드 레이아웃을 구성할 수 있습니다.inline-grid: 인라인 레벨 요소처럼 배치되면서, 내부적으로 그리드 레이아웃을 가집니다.
인라인 그리드의 매력
display: inline-grid;는 특히 유니크한 경우에 사용됩니다. 이 설정을 사용하면 요소가 인라인 요소처럼 동작하면서도 그리드 레이아웃의 모든 이점을 누릴 수 있습니다.
인라인 그리드 활용 예
<div class="inline-grid">
<div>아이템 1</div>
<div>아이템 2</div>
<div>아이템 3</div>
</div>
.inline-grid {
display: inline-grid;
grid-template-columns: auto auto auto;
}
이 예시에서 .inline-grid는 인라인 요소처럼 다른 텍스트와 함께 줄에서 표시되지만, 내부적으로는 세 개의 열을 가진 그리드 레이아웃을 갖습니다.
결론
display 속성은 웹 페이지의 요소들을 어떻게 배치할지 결정하는 중요한 도구입니다. 특히 inline-grid는 그리드 레이아웃의 강력함과 인라인 요소의 유연성을 결합한 매력적인 옵션입니다. 이 속성을 잘 이해하고 사용하면, 웹 디자인의 가능성을 크게 넓힐 수 있습니다.