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
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] audio, video, embed 태그 (0) | 2020.12.23 |
|---|---|
| [HTML][CSS] :first-child, :first-of-type,:nth-child 선택자 (0) | 2020.12.22 |
| [HTML][CSS] 수성아트피아 리페어 페이지 만들기 과제 (0) | 2020.12.19 |
| [HTML][CSS] 리트리버 소개 과제 - float: left; (0) | 2020.12.18 |
| [HTML] 절대경로, 상대경로 - 이미지 경로 표기법 (0) | 2020.12.17 |