CSS display attribute

CSS display 속성의 이해를 위한 테스트

CSS의 display 속성에 주로 사용되는 block, inline, inline-block 값을 적용했을 때의 차이점을 구분해보려고 합니다

display : block;  이 속성을 적용한 요소는 웹브라우저에서 자신만의 독립적인 행을 가지며, 지정한 폭과 높이가 그대로 적용되어 나타난다

display : inline; 이 속성을 적용한 요소는 웹브라우저 화면에서 다른 요소들과 행을 공유하며, 자신에게 적용된 폭과 높이가 무효화된다.

display : inline-block; 이 속성을 적용한 요소는 inline, block 특징을 갖는다. 즉, 지정한 폭과 높이 속성은 유지되지만 다른 요소와 행을 공유하게 된다.

div, table 에 스타일을 적용하지 않은 기본형태 테스트

<div id="div1" style="width:200px; height:200px; background-color: cyan;">
	안녕하세요?<br>
	abc<br>
	def
</div>
여기는 div 밖의 내용

<table id="table1" style="background-color: lightgray; width:200px; height;200px;">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>가</td><td>나</td><td>다</td></tr>
</table>

테이블 밖의 내용

위의 내용을 웹브라우저로 실행한 결과

안녕하세요?
abc
def

여기는 div 밖의 내용

A	B	C
1	2	3
가	나	다

테이블 밖의 내용

div, table 태그에 display:inline; 속성을 적용한 경우

<style type="text/css">
div#div1 { display:inline; }
table#table1 { display:inline; }
</style>

<div id="div1" style="width:200px; height:200px; background-color: cyan;">
	안녕하세요?<br>
	abc<br>
	def
</div>
여기는 div 밖의 내용

<table id="table1" style="background-color: lightgray; width:200px; height;200px;">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>가</td><td>나</td><td>다</td></tr>
</table>

테이블 밖의 내용

위의 내용을 웹브라우저로 실행한 결과

안녕하세요?
abc
def

여기는 div 밖의 내용

A	B	C
1	2	3
가	나	다

테이블 밖의 내용

div, table 태그에 display:inline-block; 속성을 설정한 경우

<style type="text/css">
div#div1 { display:inline-block; }
table#table1 { display:inline-block; }
</style>

<div id="div1" style="width:200px; height:200px; background-color: cyan;">
	안녕하세요?<br>
	abc<br>
	def
</div>
여기는 div 밖의 내용

<table id="table1" style="background-color: lightgray; width:200px; height;200px;">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>가</td><td>나</td><td>다</td></tr>
</table>

테이블 밖의 내용

위의 내용을 웹브라우저로 실행한 결과

안녕하세요?
abc
def

여기는 div 밖의 내용

A	B	C
1	2	3
가	나	다

테이블 밖의 내용

div, table 태그에 display-inline-table; 속성을 설정한 경우

<style type="text/css">
div#div5 { display:inline-table; }
table#table5 { display:inline-table; }
</style>

<div id="div5" style="width:200px; height:200px; background-color: cyan;">
	안녕하세요?<br>
	abc<br>
	def
</div>
여기는 div 밖의 내용

<table id="table5" style="background-color: lightgray; width:200px; height;200px;">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>가</td><td>나</td><td>다</td></tr>
</table>

테이블 밖의 내용

위의 내용을 웹브라우저로 실행한 결과

안녕하세요?
abc
def

여기는 div 밖의 내용

A	B	C
1	2	3
가	나	다

테이블 밖의 내용