[CSS] display / float 복습 또 복습

display

- block / inline / inline-block / none

 

div, ul, ol, li, h1... -> block: 너비와 높이 지정 가능, 아래쪽으로 배치됨 (얘는 한칸을 다 쓰고, 얘한테 크기를 줄 수 있다)

a, span, select, ... -> inline: 너비와 높이 지정안됨, 옆으로 배치됨 (얘는 지 크기만큼만 가지고, 내가 따로 크기 못줌)

 

inline-block: 너비와 높이 지정가능, 옆으로 배치됨, 글자처럼 취급

* 요소사이 공간이 생김

 

block 요소의 중앙정렬 -> 해당요소 스타일 추가 margin: 0 auto

inline 요소의 중앙정렬 -> 해당요소의 부모요소에게 스타일 추가 text-align: center

 

---

 

float

left / right

clear

left / right / both

 

div::after {

        content :"";

        display: block;

        clear: both;

}

.clearboth::after {

        content :"";

        display: block;

        clear: both;

}

 

<div>

       <div>floatdiv1</div>

       <div>floatdiv2</div>

</div>