인라인 레벨(inline-level) 요소는 CSS의 display 속성 값이 inline, inline-table 또는 inline-block으로 지정된 요소를 말합니다. 이러한 요소는 자신의 앞뒤에서 강제로 줄바꿈을 만들지 않기 때문에 텍스트 흐름 속에 자연스럽게 배치됩니다. 각 인라인 레벨 요소는 배치 방식(positioning scheme)의 일부를 구성하면서 동시에 자식 박스를 포함하는 인라인 레벨 박스(inline-level box)를 생성합니다.
인라인 박스(Inline Box)란?
인라인 박스는 그 내용이 인라인 서식 맥락(inline formatting context)을 따르는 박스를 의미합니다. 하나의 인라인 박스는 줄바꿈 지점에 따라 여러 개의 인라인 박스로 분할될 수 있습니다. 반면, 어떤 경우에도 분할되지 않는 인라인 박스를 원자적(atomic) 인라인 레벨 박스라고 부릅니다.
익명 인라인 박스(Anonymous Inline Box)
익명 인라인 박스는 개발자가 직접 선택하거나 스타일을 지정할 수 없는 박스입니다. 예를 들어 블록 박스 안에 맨 텍스트(bare text)와 다른 인라인 레벨 박스가 함께 존재하는 경우, 인라인 레벨 박스 주변의 텍스트는 인라인 서식 맥락을 따르게 되며, 이 텍스트는 자동으로 익명 인라인 박스로 감싸집니다.
대표적인 인라인 레벨 요소
<span>, <a>, <img>, <input>, <label> 등이 대표적인 인라인 레벨 요소에 해당하며, 문서 흐름에서 줄바꿈 없이 나란히 배치됩니다.
예제 코드
다음은 인라인 레벨 요소와 인라인 박스의 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과 화면을 확인할 수 있습니다. span 요소들이 줄바꿈 없이 한 줄에 나란히 배치되는 것을 통해 인라인 레벨 요소의 특징을 직관적으로 이해할 수 있습니다.
