HTML & CSS
[HTML][CSS] display 속성 - block, inline, inline-block
권군이
2020. 12. 21. 14:57
1. block 속성
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>div의 default 속성은 block
block 속성: 가로,세로 크기 지정가능
나란히 배치 X , 밑으로 내려간다.
#box1{ width: 100px; height: 100px;background: rgb(151, 151, 241);}
#box2{ width: 100px; height: 100px; background: rgb(248, 178, 178);}
2. inline 속성
위 css코드에서 diplay: inline; 을 box에 추가하여 div를 inline속성을 바꾼다.
inline 속성: 가로,세로 크기 지정불가능
나란히 배치 O , 가로로 배치
#box1{ width: 100px; height: 100px;background: rgb(151, 151, 241); display: inline;}
#box2{ width: 100px; height: 100px; background: rgb(248, 178, 178); display: inline;}
> 가로,세로 크기를 지정해주었지만 inline 속성이기때문에 적용이 안됨.
글자크기만큼 사이즈 잡힘.
3. inline-block
이번엔 display: inline-block; 으로 div를 inline-block속성으로 바꾼다.
inline-block 속성: 가로,세로 크기 지정가능
나란히 배치O
#box1{ width: 100px; height: 100px;background: rgb(151, 151, 241); display: inline-block;}
#box2{ width: 100px; height: 100px; background: rgb(248, 178, 178); display: inline-block;}
> 가로,세로 크기 적용 O , 나란히 배치 O