|
스타일시트 강좌 - 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>
▼ 그럼 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>
▼ 다음은 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' 카테고리의 다른 글
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
|---|---|
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
