[html/css] display 속성

박스를 배치 하거나 고유의 속성을 바꿔주는
display 속성

 

 

display는 '보여주다'라는 의미로, block 요소와 inline 요소의 특징을 바꿀 때 사용된다.

1. display: block; - 해당 요소를 block 속성으로 바꾼다.
2. display: inline; - 해당 요소를 inline 속성으로 바꾼다.
3. display: inline-block; - 해당 요소를 inline-block 속성으로 바꾼다.
4. display: none; - 해당 요소와 영역을 모두 표현하지 않는다.(숨긴다)

 

html 코드를 아래와 같이 짰을 때, span은 가로로 정렬되고, div는 세로로 정렬되는 것을 볼 수 있다.

<span> span-inline </span>
<span> span-inline </span>
<span> span-inline </span>
<span> span-inline </span>

<div> div-block </div>
<div> div-block </div>
<div> div-block </div>
<div> div-block </div>

span-inline span-inline span-inline span-inline

div-block

div-block

div-block

div-block

 

inline 속성은 너비 높이를 가지지 못한다는 특징을 가지고 있다.

그렇기 때문에 span에 넓이값를 주어도 크기가 변하지 않는다는걸, 백그라운드에 색을 입혀서 확인해 볼 수 있다.

span{
	background-color: green;
	width: 200px;
	height: 100px;
}
div{
	background-color: yellow;
}

 

inline 속성인 span에게 block 속성을 부여하면 넓이를 가지게 된다.

block 속성인 div에게 inline 속성을 부여하면 바로 넓이값을 잃고 글자모양 까지만 넓이를 가지는 것을 볼 수 있다.

span{
	background-color: green;
	width: 200px;
	height: 100px;
	display: block;
}
div{
	background-color: yellow;
	display: inline;
}

 

 

요즘에 안쓰는 곳이 없다는,,,

 

자식박스의 크기가 부모박스를 넘는데, 부모박스의 크기를 넘지 않는다

 

 

박스를 기준으로 양옆으로 여백이 생기기 때문에 box1과 box10 양옆에도 여백이 생기는 것

 

space-around(좌), space-evenly(우)