[CSS]속성-정렬, 위치
- float
요소를 좌우 방향으로 띄움(수평 정렬)
값
none 요소 띄움 없음 // 기본 값: none
left 왼쪽으로 띄움
right 오른쪽으로 띄움(우측부터 쌓임)
- float 해제
1. 형제 요소의 다음 다음 형제요소에 적용
float의 흐름을 해제하려면 clear: left // clear: right // clear: both;를 사용하면 된다.
left가 있던 right가 있던 둘다 적용하려면
clear: both;를 사용하면 된다.
2. 부모 요소에서 해제
float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix클래스 추가하여 해제
float이 있는 형제요소에 float이 없는 형제요소가 없으면 적용이 안된다. 주의
- display 수정
float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨 (flex에는 적용하여도 효과없음)
- clear
float 속성이 적용되지 않도록 지정(해제)
값:
none 요소 띄움 허용
left 왼쪽 띄움 해제
right 오른쪽 띄움 해제
both 양쪽 모두 띄움 해제
- position
요소의 위치 지정 방법의 유형을 설정 // 기본 값: static
값:
top, right, bottom, left
static 유형없음
relative 요소 자신을 기준으로 배치
absolute 위치 상 부모 요소를 기준으로 배치
fixed 브라우저(뷰포트)를 기준으로 배치
sticky 스크롤 영역 기준으로 배치
- relative
자기자신을 기준으로 배치가되기 때문에 주변 형제요소에 영향을 준다.
- absolute
위치상의 부모요소를 기준으로 배치된다.
position: absolute; 를 적용하면 아래와 같이 자기 위치에서 띄워진다.
이번에는 top: 50px; // left: 100px; 값을 주고 결과를 확인해 보자
구조적인 부모는 parent 이지만 parent에 포지션값이 없기 때문에 뷰포를 기준으로 위치가 이동하였다.
parent 기준으로 이동을 하고자 한다면 static을 제외한 포지션 값을 parent에 주어야 한다.
포지션 absolute를 사용하였다면 부모요소에 포지션 값이 있는지를 확인해야 한다.
부모요소에 포지션값이 없다면 <body> -> <html> -> <window>(뷰포트)까지 올라가서 부모요소를 검색하고
최상단에서도 포지션값을 찾지 못하면 뷰포트를 기준으로 위치를 이동하게 된다.
부모요소에 포지션 값이 없다면 기계적으로 relative를 추가해도 된다.
- fixed
브라우저를 기준으로 배치된다.
body { height: 3000px;} 적용하도 스크롤을 이동해도 2번박스는 뷰포트에 고정이 되기 때문에 이동하지 않는다.
- sticky
스크롤 영역 기준으로 배치
스크롤되는 영역의 어딘가에 붙여서 사용할 때 사용하면 된다.
sticky를 사용할때는 값(eg. top:0;)을 하나는 입력을 해야한다.
- 요소 쌓임 순서
position > z-index > HTML 마지막 코드
z-index는 position값이 있을 때만 작동한다.
- 디스플레이 수정
float이 부여된 요소와 position: absolute, fixed가 부여된 요소는
display 값이 뭐가 있었던 간에 flex, inline-flex를 제외하고
display가 block으로 변경된다.
#패스트캠퍼스