1. float
요소를 좌우 방향으로 띄움(수평 정렬)
cf. 최근 flexbox가 대체
속성값 의미
none 요소 띄움 없음 [기본값]
left 왼쪽
right 오른쪽
display 수정
float: 방향;
=> 요소는 위에서 아래로 쌓이는 개념
but 신문처럼 요소를 두고 주변에 글씨가 흐르길 바라면 float 사용
.picture{
float:left; // 왼쪽으로 해당 그림이 붙고 그 옆으로 글씨가 흐른다
}
만약 기사의 일부를 새로운 단락으로 만들고 싶으면 <br>말고 위치상 바꾸고 싶을 때
clear: left; 를 사용하면 된다
clear는 float를 해체하는 역할(즉 사진의 옆으로 움직이는 게 아니라 화면에서 방향을 선택할 수 있게 한다)
수평정렬
float을 쓰기 전에는 위에서 아래로 쌓인다
float을 쓰면 옆으로!
박스 세개
box{
float : left; // 모든 박스에게 left로 붙는 속성이 들어가니까
float: right; // 모든 박스가 오른쪽부터 붙기 시작한다
}
정렬 해제
float: left였으면 clear: left;
float: right였으면 clear: right;
clear: both는 양쪽 모두 해제 가능
float은 그 다음에 나올 요소에게도 fl영향을 미칠 수 있기 때문에 그 다음 요소에서 clear를 쓰면 된다
[float 해제 ]
float 속성이 적용된 요소의 주위올 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함
1. 형제 요소에 clear: leaft, right, both를 사용
.float-left{
float: left; //여기까지 영향
}
.next{
clear: both; // 여기부터는 영향 X
}
2. 부모 요소에서 해제 (1)
float 속성이 추가된 요소의 부모 요소에 overflow 속성 추가
div class = "parent"
div class = "child"
div class = "child"
.parent{
overflow: hidden; } // 여기서 모두 해제. 즉 parent의 영향이 미치는 곳에서만 사용하겠다는 의미
// 문제: 관련 없는 속성을 사용하는 것은 편법!
.child{
float: left;
}
3. 부모 요소에서 해제 (2) [추천!]
div class = "parent"
div class = "child"
div class = "child"
// 가상요소 추가해서 줄바꿈, clear
/div
div class = "new" // float의 영향을 피해야 하므로 parent 밖에 있어야 한다
//여기에 아래 after를 이용해서 가상 요소 추가 : 그 안에서는 float를 어떻게 쓰더라도 parent 다음부터는 clear가 된다
/div
.parent :: after{ // parent의 내부의 뒤쪽에 추가하는 가상 요소
content : "";
clear: both; // 가상요소에 clear 적용
display: block; // 줄바꿈이 되어야 하니까 (after되는 것들은 원래 inline 속성)
}
(2) display 수정
float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨
단 flex, inline-flex일 때만 변하지 않는다
2. clear
float 속성이 적용되지 않도록 지정(해제)
속성값 의미 기본값
none 요소 띄움 허용 none
left 왼쪽 해제
right 오른쪽 해제
both 양쪽 모두 띄움 해제
3. position, top, bottom, left, right
요소의 위치 지정 방법의 유형(기준)을 설정
- 직접 배치하는 건 아니고 배치하는 기준을 설정
속성값 의미
static 기준 없음. 배치 불가능 [기본값]
relative 요소 자신을 기준으로 배치
absolute 위치 상 부모 요소를 기준으로 배치
fixed 브라우저(뷰포트)를 기주능로 배치
sticky 스크롤 영역을 기준으로 배치
.parent {
position: relative; //
}
.child{
position: absolute; // 부모를 기준으로 배치되기 시작한다
top: 50px; // 부모 요소 안에서 위에서 50, 왼쪽에서 100
left: 100px;
}
아래 속성은 position이 지정되어야 사용할 수 있다
(1) top, bottom
요소의 position 기준에 맞는 '위쪽', '아래쪽'에서의 거리(위치)를 설정
값 의미 기본값
auto 브라우저가 계산
단위 px, em,cm 등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용
(2) left, right
요소의 position 기준에 맞는 '위쪽', '아래쪽'에서의 거리(위치)를 설정
값 의미 기본값
auto 브라우저가 계산
단위 px, em,cm 등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정, 음수 값 허용
4. position 속성값
(1)relative
자기 자신을 기준으로 한다
이에 따라서 위치를 바꾸더라도 다른 요소들은 위치가 바뀌지 않다
relative의 경우에는 자신을 기준으로 하고 있기 때문에 자신의 원래 위치를 기준으로 하고 있음
그러므로 주변 형제 요소의 영향을 받는다
그러므로 relative보다는 absolute를 추천
(2)absolute
위치 상의 부모 요소를 기준으로 한다
그러므로 다음 형제요소에 영향을 미친다
부모요소를 기준으로 배치를 하기 때문에
만약 부모요소에 position이 없으면 조상요소까지 올라갈 수 있다
만약에 조상요소도 position이 없으면 body 태그에 있는지 확인하고
없으면 html태그를 확인하고 그것도 없으면 window태그(뷰포트)까지 올라가서 position을 확인한다
그러므로 뷰포트를 부모요소로 해서 위치를 잡게 된다
// 다시 말해 자식 요소에 absolute를 썼으면 부모 요소에 relative를 꼭 넣어주어야 한다
(3)fixed
만약 명시적으로 뷰포트를 기준으로 하고 싶으면 fixed를 쓰면 된다
=> 이는 height가 높아서 스크롤을 하게 되더라도 사라지는 것이 아니라 뷰포트에 붙어있다
position: fixed;
(4)sticky
스크롤 영역 기준으로 배치
.box{
position: sticky;
top: 0 // 스크롤 영역의 0에 있는 것 (top처럼 어떤 속성이 있어야 한다)
}
// IE 지원 불가
// 스크롤의 영역의 특정한 위치에 배치를 하는 것
- 부모 요소에서 벗어날 수 없고
- sticky로 top:0에 h1을 넣는다 : 부모 요소의 위에 h1을 붙인다
- 뷰포트 전체에 고정하는 거 같지만 뷰포트가 아니라 부모 요소에 붙이는 것!
overflow 속성: 밖으로 흘러나가는 것을 auto값을 줘서 알아서 스크롤 내리는 것
cf. 에밋 문법
.section>h1{Title $}*8
클래스 이름/ h1태그 / 안 내용이 Title 1~8
5. position 특징
(1) 요소 쌓임 순서
요소 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지 (더 위에 쌓이는지)를 결정 (z축)
- ppt에서 맨밑으로 보내기 등 순서와 같다고 생각하면 된다
1) static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임 : 값은 무관 (relative, fixed, sticky, absolute)
2) position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임 [z-index는 position이 있어야 쓸 수 있다]
3) position 속성의 값이 있고 z-index 속성의 숫자 값이 같다면 "html"의 마지막 코드일수록 위에 쌓임
(2) display 수정
absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨