[CSS] display, float 속성

< display >

<style>
    div {
    	display: none | block | inline | inline-block ;
    }
</style>

- 엘리먼트가 화면에 출력되는 방식을 조정한다.

- inline : 줄 바꿈 없이 연속으로 이어짐. ex) span

- block : 줄 바꿈 있음. ex) div

- none : 화면에서 숨기고 면적도 차지하지 않게 함.

- inline-block : 줄 바꿈없이 margin 등 속성을 적용하게 하기 위함

 

 

< float >

<style>
    div {
    	float: left | right | none ;
    }
</style>

- 박스를 화면의 어느 위치에 배치할 것인가를 설정

- left : 그림이나 박스가 왼쪽에 배치되고, 글씨는 박스의 오른쪽으로 흐른다.

- right : 그림이나 박스가 오른쪽에 배치되고, 글씨는 박스의 왼쪽으로 흐른다.

- none : 그림이나 박스가 왼쪽에 배치되고, 글씨는 첫 줄만 박스의 오른쪽으로 흐른다.

 

 

< clear >

<style>
    div {
    	float: left | right | none ;
        clear: left | right | both | none;
    }
</style>

- float 속성값 초기화하기 위해서 사용

- left, right : 왼쪽 혹은 오른쪽 float 속성값 취소

- both : 양쪽 float 속성값 취소

- none : clear 없는 것과 동일