05_CSS_float,position

float
요소를 좌우 방향으로 띄움(수평 정렬)
flex-box라는 대체 개념이 생겨서 많이 퇴색되었다.

 

none : 요소 띄움 없음
left : 왼쪽으로 띄움
right : 오른쪽으로 띄움

float : 방향

>>float을 사용하면 꼭 해제를 사용해야한다.
>>해제를 안하면 요소들이 곂치는 현상이 일어난다.

clear : both << left,right 모두 해제

float 해제
float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데, 이를 방지하기 위함.

1. 형제요소에 clear : (left,right,both)를 사용하여 해제
2. 부모요소에 overflow : (hidden,auto)를 사용하여 해제
3. 부모요소에 clearfix클래스를 추가 (**** 제일 추천 ****)

1번같은경우, 다음 형제요소가 없는경우 다음요소를 추가해야하는 문제가 발생한다.
2번같은 경우, float과 전혀 다른 속성을 이용하는 방법이므로 편법같은 방법이다.

3번을 제일 추천한다.

clearfix

<div class"parent clearfix">
  <div class : "child"></div>
  <div class : "child"></div>
</div>

.clearfix::after {
  content:"";
  clear:both;
  display : block;
}

.child{
float : left;
}

위처럼 미리 묶어놓고 해제를 해버리는 방식!

큰 주의사항이 있다.
clearfix가 있는 태그안에는 무조건 float이 있는 형제요소들만 포함되어야한다.



display 수정
float속성이 추가된 요소는 display속성의 값이 대부분 block으로 수정된다.
flex , inline-flex 는 block으로 변화하지 않는다! 대신 inline,inline-block등 대다수의 값이 바뀐다.

clear
float속성이 적용되지 않도록 지정(해제)
none : 요소띄움 허용
left : 왼쪽띄움 해제
right : 오른쪽 띄움 해제
both : 양쪽 모두 띄움 해제




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

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



top
요소의 position 기준에 맞는 위쪽에서의 거리 설정
auto : 브라우저 계산
단위 : px,em,cm 등 단위
% : 부모요소의 세로너비의 비율로 지정, 음수값 허용

bottom,left,right 또한 위에서 설명한것과 같은 값을 가진다.

>>위 요소를 적용해도 실제위치는 원지점과 같고, 홀로그램처럼 보이는것만 다르게 보여지는 것이다.

abolute
쓰면 붕 떠지는 듯한 느낌
위치상 부모는 html상 부모가 아닌, position = ~~ 으로 설정된 부분의 부모요소를 의미한다.
>>습관적으로 부모요소에 position이 있는걸 확인하고 없으면 습관적으로 relative를 사용할 것

fixed
고정된다 (쇼핑몰의 배너같은 느낌)

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

요소 쌓임 순서(Stack order)
요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지 결정

1. static을 제외한 position 속성의 값이 있을 겨우 가장 위에 쌓임
2. position이 모두 존재한다면, z-index 속성의 숫자 값이 높을수록 위에 쌓임
3. position속성의 값이 있고, z-index 속성 숫자 값이 ㅏㅌ다면,
'HTML'의 마지막 코드일수록 위에 쌓임(나중에 작성한 코드(요소))

z-index는 position이 있는 곳에서만 가능
z-index를 사용하여 순서설정이 가능하다.

 

display 수정
absolute,fixed 속성값이 적용된 요소는 display속성의 값이 대부분 block으로 수정됨.
>>위의 display와 같이 flex,inline-flex등 소수를 제외하고는 block으로 수정됨을 알 수 있다.