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

float ( 요소를 좌우 방량으로 띄우는 속성 (수평정렬))

  - none, left, right 3개의 값이 있다.

 

 

float : right;

오른쪽 부터 쌓이는 기능 . left는 반대

 

 

왼쪽이 div로만 설정하였을 경우 오른쪽은 float속성을 넣었을 경우

 

float을 설정하였으면 해제가 필요하다.

div 문장을 따로 설정하면 float 해제되고 오른쪽 그림처럼 그림과 띄워져서 출력이 될거 같지만 그냥 한줄 띄워지고 출력이된다(왼쪽). 그럴경우 clear 속성을 사용하여 float을 left로 설정하였으면 clear:left를 사용하여 해제를 해줘야 한다.

 

 

 

float은 자리를 차지하고 있지 않다.(clear: both) left right 둘다 해제 하는 기능

 

box 클래스를 설정하여 추가하였는데 밑으로 내려간것이 아니라 겹쳐 보이는걸 확인 -> clear:left 필요 !!

 

 

필수!!

1. 해제하려면 다음 요소에 clear 함수를 사용해야됨 (다음요소가 필요) 그래서 번거럽다.

2. 부모요소에 overflow 따로 구역을 만들어 구역을 나눈다.

3. 가상요소 ::after   -> 끝나는 부분에 가상요소를 추가하는 기능 

끝부분에 요소를 만들고 clear로 해제를 시킨다음에 block으로 구역을 처리하여 다음 라인에 바로 사용할 수 있게끔 설정

 

 

float - display 수정 ( float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정된다.)

 

 

 

 

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

부모 parent 클래스에 dashed 모양의 그레이색상의 div를 추가하고 자식에서 position : absolute를 설정하면 부모를 기준으로 배치가 될거 같지만 컴퓨터는 포지션이 없어서 누가 부모인지 모르니 결국에는 마지막 root인 html로 결정이 된다. 그래서 부모가 되는 class에 position : relative (꼭 relative는 아니여도 됨)를 설정해줘서 부모자리를 찾아서 그 class 기준으로 배치를 하게 된다.

 

4개의 속성 (position이 지정이 되어있을 경우)

top (요소의 position 기준에 맞는 위쪽 에서의 거리를 설정) , 음수값도 허용

bottom ( 요소의 position 기준에 맞는 '아래쪽' ) 

left ( 왼쪽에서의 거리를 설정 )

right ( 오른쪽에서의 거리를 설정 )

 

 

position - relative 

 

2번이 이동을 했는데도 3번이 안올라가는걸 확인 할 수 있다. -> relative는 원래 위치는 움직이지 않고 겉모습만 움직인걸로 알면 된다. 요소는 아직 1번과 3번 사이에 존재

relative는 주변의 영향을 주기 때문에 absolute를 쓰는걸 추천. 

 

 

 

position - absolute 

 

2번 밑으로 3번이 없어진걸 확인 -> absoute (부모 기준으로 자리를 이동할 준비가 됬다) 포지션을 씀에 따라 2번이 공중으로 붕 뜬거라고 생각하면 된다. 

 

 

position-fixed 

 브라우저의 기준으로 하기 때문에 스크롤을 내려도 브라우저의 기준으로 설정이되어 위치가 변하지 않는다.

 마치 쇼핑몰에서 쇼핑함이나 광고같은 기능.

 

 

 

position-sticky

 스크롤 영역 기준으로 배치

 

 

 

position의 특징

float과 동일한 결과.