display 스타일 속성은 block element를 inline element로 혹은 inline element를 block element로 변환시켜 준다.
아래의 소스파일과 출력화면을 보면 a 태그 element는 원래 inline형인데 display:block; 라고 스타일 속성을 지정해 block형으로 바꾸었고 div 태그 element는 원래 block element인데 display:inline; 라고 스타일 속성을 지정해 inline형으로 바꾸어 줬다.
또한 display:none; 라고 지정해주면 그 element는 출력화면에 나타나지 않게 된다. 화면만 나타나지 않을 뿐만 아니라 원래 없는 것처럼 영역까지 사라지게 된다.
(예제소스)
<style type="text/css">
/*display는 block, none, inline 세가지를 가지고 있다. */
a {
display:block; /*inline level elem을 block level elem으로 바꾸어 준다.*/
background:red;
}
div {
display:inline; /*위와 반대 역할, block를 inline로 바꾸어 준다.*/
background:yellow;
}
</style>
가로로 출력된다.
width, height 속성을 사용할 수 없다.
상/하 margin과 padding 속성을 사용할 수 없다.
대표적인 Inline 테그인 <span> 도 Block 엘리먼트가 될수있다. span {display: block;} 으로 선언하면 된다.
Display:block
줄바꿈되어 세로로 정렬된다.
width, height 속성을 사용할 수 있다.
상/하 margin과 padding 속성을 사용할 수 있다.
대표적인 block 테그인 <div> 도 inline 엘리먼트가 될수있다. div {display: inline;} 으로 선언하면 된다.
추천 : 