CSS - 속성(띄움(정렬), 위치)

float

; 요소를 좌우 방향으로 띄움(수평 정렬)

none : 요소 띄움 없음.

left : 왼쪽으로 띄움.

right : 오른쪽으로 띄움.

**float 해제 방법

1. float 속성의 형제 요소에 clear: (left, right, both) 추가하여 해제.

2. float 속성이 추가된 요소의 부모요소에 overflow 속성 추가.

3. float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가.(추천!!!!)

부모요소에 미리 지정된 clearfix 클래스 추가

float - display 수정

; float 속성이 추가된 요소는 display 속성의 값이 "대부분" block 으로 수정됨.

*flex, inline-flex 제외.

 

clear

; float 속성이 적용되지 않도록 지정(해제).

*clear: none, left, right, both.

-

position

; 요소의 위치 지정 방법의 유형(기준)을 설정.

static : 유형(기준) 없음 / 배치 불가능.

relative : 요소 자신을 기준으로 배치.

absolute : 위치 상 부모 요소를 기준으로 배치.

fixed : 브라우저(뷰포트)를 기준으로 배치.

sticky : 스크롤 영역 기준으로 배치.

 

top, bottom, left, right

; 요소의 position 기준에 맞는 지점에서의 거리(위치)를 지정

auto : 브라우저가 계산

단위 : px, em, cm 등 단위로 지정.

% : 부모(위치상의 부모(조상)) 요소의 가로 너비의 비율로 지정, 음수 값 허용.

 

relative

; 요소 자신을 기준으로 배치.

absolute

; 위치 상 부모 요소를 기준으로 배치.

부모 요소에 position: xxx 이 정의되어 있어야 함

fixed

; 브라우저(뷰포트)를 기준으로 배치. *배너나 팝업 광고에 사용

sticky

; 스크롤 영역 기준으로 배치.

요소 쌓임 순서(stack order)

; 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(상위)를 결정(Z축).

1. static 을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임.

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

3. position 속성의 값이 있고 z-index 속성의 숫자 값이 같다면 'HTML'의 마지막 코드일 수록 위에 쌓임.

display 수정

; absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block 으로 수점됨.