04-02_display.html

display

none

화면에 보이지 않습니다.

none

div_1

div_2

div_3

block span block block

04-02_display.html

display

none

화면에 보이지 않습니다.

none

div_1

div_2

div_3

block span block block

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04-02_display.html</title>
<!--
	# display 속성
	- 태그 영역의 표현 방식을 지정.
	- none   : 해당 요소를 화면에 표시하지 않음.
	  block  : block 특성을 가지는 요소를 지정.
	  inline : inline 특성을 가지는 요소로 지정.
	  inline-block : inline-block 특성을 가지는 요소로 지정.
-->
<style type="text/css">
.none {
	display: none;
}

.inline {
	border: 1px solid blue;
	display: inline;
	margin: 20px; /* inline 속성이라 좌/우에만 반영됨  */
	background-color: skyblue;
}

.block {
	border: 1px solid red;
	display: block;
	
}

.inline_block {
	border: 1px solid purple;
	display: inline-block; /* inline-block 속성이지만 위/아래에도 margin이 반영됨 */
	margin: 20px;
}
</style>
</head>
<body>
	<h2>display</h2>
	<br>
	<span> none </span>
	<div class="none">
		화면에 보이지 않습니다.
	</div>
	<span> none </span>	
	<hr>
	<div class="inline"> div_1 </div>
	<div class="inline"> div_2 </div>
	<div class="inline"> div_3 </div>
	<hr>
	<span> block </span>
	<span class="block"> span block </span>
	<span> block </span>
	<hr>
	<div class="inline_block"> div_1 </div>
	<div class="inline_block"> div_2 </div>
	<div class="inline_block"> div_3 </div>	
</body>
</html>