#19 - CSS 기초 - 정렬

정렬 속성 설명

속성 예시

/*-------float-------*/
.class1{
    float : left;
}
/*-------clear-------*/
.class2{
    clear : both;
}
/*-------위치-------*/
.class3{
	position : absolute;
    top : 20px;
    left : 20px;
    bottom : 20px;
    right : 20px;
}

속성 설명

속성	의미	값
float	요소를 띄움. 수평 정렬할 때 주로 사용. float right일 경우 첫번째 요소가 가장 오른쪽으로 배치 됨 float를 해제하기 위해 두가지 방법을 사용. 최 하단 참고	none, left, right
clear	형제 요소에 적용하여 float 속성을 지움	none, left, right, both
position	요소 배치 기준을 설정 1. static : 기준 없음. 배치가 불가능2. relative : 자신이 기준3. absolute : 부모 요소가 기준. 부모에도 position이 입력 되어야 작동.4. fixed : 브라우저 기준5. sticky : 스크롤 영역 기준. top/left/right/bottom 중 1개 이상은 설정이 되어있어야 하며, 익스플로러는 지원하지 않음	static,  relative, absolute, fixed, sticky
top	position 위를 기준으로 얼마나 움직일지 설정	숫자+단위
left	position 왼쪽를 기준으로 얼마나 움직일지 설정
bottom	position 아래를 기준으로 얼마나 움직일지 설정
right	position 오른쪽를 기준으로 얼마나 움직일지 설정

float를 해제하는 방법

/* float 부모 요소에서 float 해제 */
/* clearfix 자식 요소는 모두 float이 적용되어 있어야 함*/
.clearfix::after{
    content : "";
    clear : both;
    display : block;
}

/* float 형제 요소에서 float 해제 */
.class{
    clear : both;
}

 

요소가 쌓여 있을 경우 우선순위

1. z-index가 높은 요소
2. position이 입력 된 요소
3. 코드 상 마지막에 입력 된 요소