CSS에서 display: inline은 블록(block) 방식과 달리 요소가 새로운 줄에서 시작하지 않고 같은 줄에 이어서 배치되며, 콘텐츠가 차지하는 만큼의 너비만 사용하는 표시 방식입니다. 대표적인 인라인 요소로는 <span>, <a>, <strong> 등이 있습니다.
이번 글에서는 CSS의 display: inline 속성값을 실제 예제를 통해 어떻게 구현하는지 자세히 알아보겠습니다.
예제 1: display: none과 display: inline 비교
아래 예제에서는 숨김 처리되는 문단(display: none)과 인라인으로 표시되는 span 요소(display: inline)를 함께 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 display: nonedisplay: inline이 적용된 '5PM' span 요소는 주변 텍스트와 같은 줄에서 이어져 표시됩니다. 인라인 요소는 줄바꿈 없이 흐름 속에 자연스럽게 배치되는 것을 확인할 수 있습니다.
예제 2: id 선택자로 인라인 지정하기
이번에는 id 선택자를 활용해 특정 span 요소에만 display: inline을 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
span#demo {
background-color: orange;
color: white;
display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <span id="demo">9AM</span> on 20th December.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 '9AM' 텍스트가 주황색 배경의 인라인 요소로 표시되며, 앞뒤 텍스트와 동일한 줄에서 자연스럽게 이어집니다. 이처럼 display: inline을 활용하면 특정 텍스트 부분만 강조하면서도 전체 문장의 흐름을 유지할 수 있습니다.
정리
- inline: 요소가 같은 줄에서 시작하고, 콘텐츠 크기만큼의 너비만 차지합니다.
- block: 요소가 항상 새로운 줄에서 시작하고, 사용 가능한 전체 너비를 차지합니다.
- none: 요소를 화면에서 완전히 숨깁니다.
인라인 요소는 width와 height 속성이 적용되지 않으므로, 크기 조절이 필요하다면 display: inline-block을 사용하는 것이 좋습니다.