속성 - 띄움(정렬), 위

float

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

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

요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됩니다.

단순 해제

clear: left(or right or both);

수평 정렬

각 요소에 float 속성을 적용되면 차례로 '정렬'됩니다.

float을 사용하고 다음열로 넘길때는 해제를 하는 clear를 사용한 후에 사용해야함

 

float 해제

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

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

2. 부모요소에 overflow: (hidden, auto) 추가하여 해제

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

3. 부모요소에 clearfix 클래스 추가하여 해제(추천!)

   float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가

   clearfix 자식요소는 무조건 float이 있는 요소들만 포함되어야 함

   example

   <div class="parent clearfix">

       <div class="child"></div>

       <div class="child"></div>   

   </div>

 

   .clearfix::after{

       content: "";

       clear: both;

       display: block; /* or 'table' */

    }

    .child {

       float: left;

    }

 

float - display 수정

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

 

clear : 해제

값	의미	기본값
none	요소 띄움 허용	none
left	왼쪽 띄움 해제
right	오른쪽 띄움 해제
both	양쪽 모두 띄움 해제

 

position

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

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

부모 요소에 position: relative;를 사용하면 부모요소 지정 가능

fixed는 scroll 이나 화면 크기 변해도 고정된 위치

 

요소 쌓임 순서(stack order)

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

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

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

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

position > z-index > HTML 마지막 코드

 

display 수정

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

 

출처. heropy.blog/