스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기

스타일시트 CSS

스타일시트 강좌 - CSS display 속성, 태그의 inline block 속성 바꾸기

 

환경: Eclipse Mars, CSS3

 

display 속성은 요소들을 표시하는 방법에 대해 정의합니다. 대표적인 값이 inline 과 block 입니다. inline span 태그와 같은 특성을 가집니다. inline 의 특성은 태그들끼리 자동 줄 바꿈이 되지 않고 크기를 지정할 수가 없습니다. block 은 div 태그와 같습니다. 태그들끼리 자동 줄 바꿈이 되고 width, height 크기를 지정할 수가 있습니다. 이렇게 display 속성을 이용해서 태그의 속성을 바꿔 버릴 수가 있습니다.

 

display 의 속성에 쓰이는 값은 4가지가 있습니다. inline block, none, inline-block 이 있습니다. block 은 줄 바꿈이 되고 inline 은 되지 않게 만듭니다. 그리고 inline-block 은 두 가지 특성을 동시에 가지는 값입니다.

 

¤ none : 태그를 사라지게 합니다.

¤ block : div 처럼 블록 지정으로 자동 줄 바꿈과 크기를 지정할 수 있도록 합니다.

¤ inline : span 처럼 줄 바꿈이 되지 않고 크기를 지정할 수 없습니다.

¤ inline-block : 혼합된 형태로 크기는 지정할 수 있으되 줄 바꿈이 되지 않습니다.

 

아래 샘플처럼 display 를 설정하지 않으면 div span 은 원래 가지고 있는 특성대로 결과 화면처럼 배치가 됩니다. div 는 줄바꿈이 되고 span 은 줄 바꿈이 되지 않으며 지정한 크기 값도 적용이 안됩니다. 

<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 200px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
	}
	#div1 {background-color: #F9F249;}
	#div2 {background-color: #69F354;}
	#div3 {background-color: #36FFFF;}
	
	span {
		width: 200px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
	}
	#span1 {background-color: #F9F249; padding: 5px;}
	#span2 {background-color: #69F354;}
	#span3 {background-color: #36FFFF;}
</style>
</head>
<body>
	<div id="div1">div 1</div>
	<div id="div2">div 2</div>
	<div id="div3">div 3</div>
	<span id="span1">span 1</span>
	<span id="span2">span 2</span>
	<span id="span3">span 3</span>
</body>
</html>

 

스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기


그럼 div span 의 특성을 바꿔 볼까요. 아래 샘플은 div span 처럼, span div 처럼 바꾼 것입니다. div inline 을 설정하면 span 처럼 되는 것이죠. span 도 마찬가지입니다. 위의 샘플과 정반대가 되었죠.

<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 200px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
		display: inline;
	}
	#div1 {background-color: #F9F249;}
	#div2 {background-color: #69F354;}
	#div3 {background-color: #36FFFF;}
	
	span {
		width: 200px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
		display: block
	}
	#span1 {background-color: #F9F249; padding: 5px;}
	#span2 {background-color: #69F354;}
	#span3 {background-color: #36FFFF;}
</style>
</head>
<body>
	<div id="div1">display: inline div 1</div>
	<div id="div2">display: inline div 2</div>
	<div id="div3">display: inline div 3</div>
	<span id="span1">display: block span 1</span>
	<span id="span2">display: block span 2</span>
	<span id="span3">display: block span 3</span>
</body>
</html>

스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기

 

다음은 display 속성의 값 중 inline block 값 외에 두 개로 합쳐 진 inline-block 을 적용해 보겠습니다. 두 특성이 같이 들어가 있기 때문에 block 의 특징인 여백과 크기를 지정할 수가 있습니다. 그러나 inline 특징 때문에 여러 요소들끼리 자동 줄바꿈은 되지 않습니다. 아래 샘플처럼 span 태그에 inline-block 를 적용하니 박스의 크기는 반영이 되었는데 줄 바꿈이 되지 않아서 옆으로 배열 되었네요.

<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	span {
		width: 150px; height: 40px;
		border: 1px solid; padding: 5px;
		display: inline-block
	}
	#span1 {background-color: #F9F249;}
	#span2 {background-color: #69F354;}
	#span3 {background-color: #36FFFF;}
</style>
</head>
<body>
	<span id="span1">display: inline-block span 1</span>
	<span id="span2">display: inline-block span 2</span>
	<span id="span3">display: inline-block span 3</span>
</body>
</html>

스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기

Posted by 녹두장군