[CSS기초] 7. CSS속성 - 띄움 정렬

7. CSS속성 – 띄움 정렬

7.1. float – 요소를 좌우방향으로 뛰움 (수평정렬으로 많이씀)

값	의미	기본값
none	요소띄움없음	none
left	왼쪽으로 뛰움
right	오른쪽으로 띄움

 

ex) div {            float : right; }

*중간에 float을 해제하기위해서는 clear : both;를쓴다. 멈추자 하는 요소에서 clear를 쓰지 않는다면 요소가 겹치는 문제가 발생할 수도 있다.

* float을 사용할 경우 대부분의 요소가 display : block 으로 바뀌어버린다.

 

7.2. position – 요소의 위치 지정 방법의 유형(기준점)을 설정

값	의미	기본값
static	유형없음/ 배치불가능	static
relative	요소 자신을 기준으로 배치
absolute	위치상 무모 요소를 기준으로 배치
fixed	브라우저(뷰포트) 기준으로 배치
sticky	스크롤 영역 기준으로 배치

*position 값과 함께 top, bottom, left, right 등과 같이 쓰인다.

ex) div {     position : relative;     top: 50px;     bottom : 50px;         }

*요소 쌓임 순서(화면을 기준으로 위에 올라오는 순서 z축이라고 부름)

l  (static을 제외한) position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

l  position이 모두 존재한다면, z-index속성의 숫자 값이 높을수록 위에 쌓임

ex) z-index : 1;

l  position 속성값이 있고 z-index속성의 숫자 값이 같다면, html의 마지막 코드일수록 위에 쌓임 먼저쓰여지면 아래로 내려감

* position이 absolute, fixed값을 가지게 되었다면 적용된 요소는 대부분 display : block;이 된다.

References: heropy.blog