Display?
display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다. display 속성은 매우 다양한 값을 가질 수 있지만, 지금은 가장 기본이 되는 block, inline, inline-block 을 비교해 정리 하려 합니다.
inline?
display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록 구성됩니다. 가로와 세로의 크기를 임의로 지정 할 수 없으며 그 크기는 오로지 포함하고 있는 내용에 의해서 결정됩니다. 대표적인 inline 요소로는 span 이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>block, inline, inline-block</title>
<style>
body {
padding: 0;
margin: 0;
}
.span1 {
background-color: tomato;
}
.span2 {
background-color: yellowgreen;
}
.span3 {
background-color: skyblue;
}
</style>
</head>
<body>
<span class="span1" >이것은</span>
<span class="span2">인라인 요소</span>
<span class="span3">입니다.</span>
<span class="span1" >이것은</span>
<span class="span2">인라인 요소</span>
<span class="span3">입니다.</span>
</body>
</html>
block?
display 가 block 으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지합니다. 간단하게 말해서 어떤 특정 구역을 차지한다고 보면 됩니다. 가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것 보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 block 으로 설정된 요소는 한 줄을 그대로 차지합니다. block 속성을 기본 값으로 가지는 요소는 대표적으로 div, p 등이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>block, inline, inline-block</title>
<style>
body {
padding: 0;
margin: 0;
}
.block1 {
background-color: tomato;
}
.block2 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="block1">이것은</div>
<div class="block2">블록 요소입니다</div>
</body>
</html>
inline-block?
display 가 inline-block 으로 설정된 요소는 block 속성과 inline 의 속성을 섞어 놓은 것과 같습니다. block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.
block 요소
address, article, aside, blockgquote, canvas, dd, div, dl, hr, header, h1, h2, h3, h4, h5, h6, table, pre, ul, p, ol...
inline 요소
a, i, span, abbr, img, strong, b, input, sub, br, code, em, small, tt, map, textarea, label, sup, q, button, cite...
