css block, inline, inline-block 속성
이번에는 웹페이지 상에서 html 태그들이 어떻게 보여지고 다른 태그들과 어떻게 상호 배치되는지
결정하는 display의 속성값 중 가장 기본적이라고 할 수 있는 block, inline, inline-block에 대해
알아보는 시간을 갖도록 하겠습니다.
- display: inline
먼저 inline 속성부터 보겠습니다.
display가 inline으로 지정된 태그는 줄바뀜 없이 다른 태그들과 나란히 배치됩니다.
(span, a, em과 같은 태그들이 inline 속성입니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
span, a, em {
border: 1px solid black;
font-size: 20px;
}
</style>
</head>
<body>
<span>span</span>
<a>a</a>
<em>em</em>
</body>
</html>
이렇게 나란히 배치되는 것을 볼 수 있습니다.
하지만 inline 속성은 width와 height 값을 지정해도 무시되고, margin과 padding 속성은 좌우 간격만
반영이 되고 상하 간격은 반영이 되지 않는다는 특징이 있습니다.
(inline 속성은 기본적으로 해당 태그의 내용 크기만큼만 공간을 차지하도록 되어 있기 때문입니다.)
- display: block
block 속성으로 지정된 태그는 줄바꿈이 들어가고, 혼자 한 줄을 차지하게 됩니다.
(div, p, h1와 같은 태그들이 block 속성입니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div, p, h1 {
border: 1px solid black;
font-size: 20px;
background-color: #CFFFE5;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<h1>h1</h1>
</body>
</html>
div 태그들은 한 줄을 다 차지하고, 줄바뀜이 되는 것을 볼 수 있습니다.
block 태그는 inline과 달리 width, height, margin, padding 모두 정상 적용이 됩니다.
- display: inline-block
이 속성은 기본적으로 block과 inline의 특징 둘 다 가져왔습니다.
inline-block의 특징은 기본적으로 inline 엘리먼트처럼 줄바뀜 없이 배치되지만, inline에선 불가능하고
block에서는 가능했던 width, height, padding, margin 모두 정상 적용이 가능합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div, span, h1 {
display: inline-block;
border: 1px solid black;
font-size: 20px;
background-color: #CFFFE5;
margin: 100px 50px;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
<h1>h1</h1>
</body>
</html>
div와 h1은 원래 block이고, span은 원래 inline인데 display값을 inline-block으로 바꾸고 크기값과
margin값을 줘서 정상 적용되나 실행해 봤습니다.
결과를 보면 셋 다 inline 속성처럼 나란히 배치되지만, block 속성처럼 margin값과 크기값 모두
정상적으로 들어간 것을 볼 수 있습니다.
오늘은 display의 기본이 되는, 그러나 헷갈릴 수도 있는 3가지 속성에 대해서 알아 봤습니다.
세 속성의 특징을 잘 파악하시고, margin auto는 block요소만 적용되는 등 3가지 속성이 필요한
상황을 판단하여 잘 활용하시길 바랍니다.