CSS의 모든 요소는 저마다 고유한 기본 display 값을 가지고 있습니다. 예를 들어 <div>나 <p> 같은 블록 레벨 요소는 block이, <span>이나 <a> 같은 요소는 inline이 기본값입니다. 이러한 기본값은 display 속성을 명시적으로 설정함으로써 언제든지 자유롭게 변경할 수 있습니다.
가장 대표적인 활용 사례 중 하나가 바로 수평 메뉴(horizontal menu)입니다. 기본적으로 세로로 나열되는 목록(<ul>, <li>)에 display: inline;을 적용하면 항목들이 가로 방향으로 배치되어 마치 내비게이션 바처럼 보이게 됩니다.
예제 코드
아래 예제에서는 목록 항목(li)에 인라인(inline) display 값을 설정하여 수평 메뉴를 구현하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
li {
display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>Following are the list of resources:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 원래 세로로 나열되던 목록 항목들이 가로 방향으로 한 줄씩 배치되는 것을 확인할 수 있습니다. 이것이 바로 display: inline;이 기본 표시 값을 변경한 결과입니다.
주요 display 값 정리
- block: 요소가 사용 가능한 가로 전체를 차지하며, 앞뒤로 줄바꿈이 발생합니다. (예: div, p, h1~h6)
- inline: 콘텐츠 크기만큼만 공간을 차지하며, 줄바꿈 없이 나란히 배치됩니다. (예: span, a, strong)
- inline-block: 인라인처럼 나란히 배치되면서도 블록처럼 너비와 높이를 지정할 수 있습니다.
- none: 해당 요소를 화면에서 완전히 숨깁니다.
이처럼 display 속성 하나만 잘 활용해도 요소의 배치 방식을 자유롭게 제어할 수 있으며, 특히 반응형 내비게이션 메뉴를 만들 때 매우 유용하게 사용됩니다.