CSS display 속성 중 많이 쓰이는 inline, block, inline-block 의 차이에 대해 알아보자.
다음과 같은 html 코드가 있고
<div>a</div>
<div>b</div>
<div>c</div>다음과 같은 css 코드가 있다.
div {
display: inline;
width: 100px;
height: 100px;
background-color: red;
margin: 1rem;
color: white;
font-size: 2rem;
text-align: center;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}위 코드에 대한 결과물은 다음과 같다.
각각의 div에 width값과 heigth 값을 설정했지만 inline 요소는 width, height가 적용 되지 않아 나오지 않는 것을 볼 수 있다. 여기서 display: inline;을 display: block; 으로 바꿔준다면
위와 같이 한 요소가 한 단락을 차지하면서 width와 height가 적용된다.
inline 요소와 block 요소
다음과 같은 코드가 있다.
<style>
div {
border: 5px solid black;
margin: 1rem;
font-size: 1.5rem;
line-height: 2rem;
}
.txt {
display: inline-block;
border: 1px solid red;
background-color: beige;
width: 500px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<p>p태그는 block요소</p>
<p>p태그는 block요소</p>
<p>p태그는 block요소</p>
</div>
<div>
<span>span은 inline 요소</span>
<span>span은 inline 요소</span>
<span>span은 inline 요소</span>
</div>
<div>
<span class="txt">inline-block 요소</span>
<span class="txt">inline-block 요소</span>
<span class="txt">inline-block 요소</span>
</div>
</body>
<p>는 block 요소이므로 한 단락을 모두 차지하기에 위와 같이 자동으로 다음 단락으로 넘어가면서 요소가 차지한다.
<span>는 inline 요소로 한 단락에 요소들이 들어가는 것을 볼 수 있다.
마지막 그림은 <span> 이지만 display:inline-block; 처리를 해줘 inline 요소처럼 한 줄을 차지하나 width 값이 적용되고 margin값을 가질 수 있는 모습을 볼 수 있다.
정리
inline
-
사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
-
요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
-
크기값 가질 수 없음 ( 사이즈 지정 불가능 )
-
상하 마진 적용 불가능
( 좌우 마진은 가능 / 상하좌우 패딩도 가능 )
block
-
사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% )
-
전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
-
크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
-
상하좌우 마진 & 패딩을 가질 수 있음
-
레이아웃을 작업하는 요소로 적합
inline-block
-
기본 특성은 인라인이라 요소가 수평으로 쌓이지만
블록 요소처럼 사이즈를 적용할 수 있다. -
크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
-
상하좌우 마진 & 패딩을 가질 수 있음
-
사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
-
요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
가운데 정렬하는 법
block 요소 - margin: auto;
inline / inline-block 요소 - 부모 요소에 text-align: center;
