display 속성

display

HTML 요소가 배치되는 방식을 지정하는 속성 중 하나
설정 가능한 값은 아래와 같음
- none 요소를 보이지 않게 설정(영역도 차지하지 않음)
- block 기본적으로 가로 영역을 모두 채우며, width, height 속성을 지정 가능
- inline 컨텐츠만큼 영역을 차지하며, width와 height를 지정 불가
- inline-block block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시 inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치 block 처럼 내부 속성인 width, height 등과 같은 속성을 지정 가능

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div { border: 3px solid #000; margin: 5px; }
		.div-1 { display: none; }
		.div-2 { display: block; width: 300px; }
		.div-3 { display: inline; width: 200px; }
		.div-4 { display: inline-block; width: 200px; }
	</style>
</head>
<body>
	<div class="div-1">display none</div>
	<div class="div-2">display block</div>
	<div class="div-3">display inline</div>
	<div class="div-4">display inline-block</div>
</body>
</html>

Untitled