[CSS] 배치 - display, position, float

박스의 유형 제어

1) display : block - 블록 박스

항상 새 라인에서 시작 / 블록 박스 내에만 배치 / 옆에 다른 요소 배치 불가능 / width와 height로 크기 조절 / padding, border, margin 조절 가능

2) display : inline - 인라인 박스

새 라인에서 시작 못함. 라인 안(inline)에 있음. / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능 / width와 height로 크기 조절 불가능 / margin-top, margin-bottom 조절 불가능

3) display : inline-block - 인라인 블록 박스

(inline 속성) 새 라인에서 시작 못함. 라인 안에 있음 / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능

(block 속성) width와 height 크기 조절 가능 / padding, border, margin의 조절 가능 

4) display : none - 공간이 없어짐

* visibility : hidden은 공간이 없어지지 않음

 

---

박스의 배치

* normal flow - 웹 페이지에 나타난 순서대로 HTML 태그 배치. position 프로퍼티를 이용하여 normal flow 무시 가능

 

속성값

1) position : static - 디폴트

2) position : relative - 상대 배치. normal flow의 기본 위치에서 left, top, bottom, right 프로퍼티의 값만큼 이동

* left와 right 동시 지정하면 right가 의미없어짐. top과 bottom 동시 지정하면 bottom이 의미없어짐

3) position : absolute - 절대 배치. positioned parent(position 값이 지정된 부모 태그)를 기준으로 배치

positioned parent가 없으면 body를 기준으로

→ 브라우저 크기가 변해도 절대 배치된 태그 위치는 변하지 않는다.

normal flow에서 제외되기 때문에 p 태그랑 겹친다.

* 상위 요소 중 position을 정의하고 있는 요소가 없다면 브라우저 화면을 기준으로 위치를 잡게 된다.

4) position : fixed - Viewport(브라우저에 보이는 영역)를 기준으로 배치

.pos {
	width:200px; height:200px;
	background:peru;
	position:fixed;
	top:50px; left:50px;
}

5) float - 유동 배치.

normal flow에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

- none : 기본값, 원래 상태

- left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함.

- right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함.

* 문서의 흐름에서 제외되지만, 필요한 만큼의 공간은 차지한다.

주황색 박스에 float:right; 적용

파란색 박스에 float:left; 적용

clear - float 요소 이후에 표시되는 요소가 float를 해제하여 float 요소의 아래로 내려가게 할 수 있다.

- none : 기본값, 아래로 이동하지 않음을 나타내는 키워드

- left : float이 left인 요소의 아래로 내려가겠다.

- right : float이 right인 요소의 아래로 내려가겠다.

- both : float이 left 및 right인 요소의 아래로 내려가겠다.

p 태그에 clear:left; 적용

p 태그에 clear:right; 적용