float
요소를 좌우 방향으로 띄움 (수평 정렬)
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
none | 요소 띄움 | none |
left | 왼쪽으로 띄움 | |
right | 오른쪽으로 띄움 |
단순 띄움
사진 left에 위치
👉 여백에 글자를 흐르게 하고 싶을 때
👉 clear : left; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다.
사진을 right에 위치
👉 여백에 글자를 흐르게 하고 싶을 때
👉 clear : right; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다.
수평 정렬
각 요소에
float속성이 적용되면 차례로 '정렬'됩니다.
Left 정렬
👉 왼쪽에서 1부터 시작한다.
👉 clear : left; 를 이용해서 요소가 겹치는 문제를 해결할 수 있다. => 수직으로 쌓인다.
Right 정렬
👉 오른쪽에서 1부터 시작한다.
👉 clear : right; 를 이용해서 요소가 겹치는 문제를 해결할 수 있다. => 수직으로 쌓인다.
# clear : both; 를 쓰자!
👉
clear: both;는float가left든right든 둘 다 사용이 가능하다.
float 해제
float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야 함.
- 형제요소에
clear: (left,right,both)추가하여 해제 - 부모요소에
overflow: (hidden,auto)추가하여 해제 - 부모요소에
clearfix클래스 추가하여 해제 (추천!)
👉 1번 방법은 다음 형제 요소가 존재할 때 사용이 가능하다. 다음 형제 요소가 없는 경우에는 2번이나 3번 방법으로 사용하는데 2번보다 3번을 추천.
3. 부모요소에 clearfix 클래스 추가하여 해제
- HTML
<div class="clearfix"> <div class="float-box">1</div> <div class="float-box">2</div> <div class="float-box">3</div> <div class="float-box">4</div> </div> <div class="new-box"></div>
- CSS
.clearfix::after { content: ""; clear: both; display: block; }
.float-box { width: 100px; height: 100px; background: orange; margin: 10px; float: left; }
.new-box { width: 250px; height: 250px; background: red; }
👉 float: left;를 추가하면 수평으로 왼쪽부터 정렬
👉 HTML 에 <div class="new-box"></div> 추가하고, CSS에 .new-box {...} 를 추가했을 때
👉 HTML 에 <div class="clearfix"></div> 추가하고, CSS에 .clearfix {...} 를 추가했을 때 => 해제 가능
display
float속성이 추가된 요소는display속성의 값이 대부분 'block'으로 수정된다.
- HTML
<span>1</span>
<span>2</span>
<span>3</span>- CSS
span{
width: 100px;
height: 100px;
margin: 10px;
background: tomato;
float: right;
}👉 <span>태그 는 인라인 태그이기 때문에 아래와 같이 나타날 수 있다.
👉 <span>태그 에 float:right; 속성을 추가하면 자동으로 블록 태그가 된다.
※ 따로 display: block;을 설정해 줄 필요가 없다.
clear
float속성이 적용되지 않도록 중간에 해제할 때 지정 (해제)
- 속성 값
| 값 | 의미 | 기본 값 |
|---|---|---|
| none | 요소 띄움 해제를 안하는 것 | none |
| left | 왼쪽 띄움 해제 | |
| right | 오른쪽 띄움 해제 | |
| both | 양쪽(왼쪽,오른쪽)모두 띄움 해제 |
👉 대부분 clear:both; 를 많이 쓴다.
position
요소의 위치 지정 방법의 유형(기준)을 설정. 기준이 매우 중요
- 속성 값
| 값 | 의미 | 기본 값 |
|---|---|---|
| static | 유형(기준) 없음/배치 불가능 | static |
| ★ relative | 요소 자신을 기준으로 배치 | |
| ★ absolute | 위치 상 부모 요소를 기준으로 배치 | |
| fixed | 브라우저(뷰포트)를 기준으로 배치 | |
| sticky | 스크롤 영역 기준으로 배치 |
top
값이 아니라 속성이다. 요소의
position기준에 맞는위쪽에서의 거리 (위치) 를 지정
| 값 | 의미 | 기본 값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정,음수 값 허용 |
bottom
값이 아니라 속성이다. 요소의
position기준에 맞는아래쪽에서의 거리 (위치) 를 지정
| 값 | 의미 | 기본 값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정,음수 값 허용 |
left
값이 아니라 속성이다. 요소의
position기준에 맞는왼쪽에서의 거리 (위치) 를 지정
| 값 | 의미 | 기본 값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정,음수 값 허용 |
right
값이 아니라 속성이다. 요소의
position기준에 맞는오른쪽에서의 거리 (위치) 를 지정
| 값 | 의미 | 기본 값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정,음수 값 허용 |
👉 top, left, right, bottom은 position이 지정되어 있을 때만 사용이 가능하다.
1. position: relative
👉 자기 자신 이 원래 있었던 위치를 기준으로 움직인다.
※ 주변에 영향을 줄 수 있으므로 주의해서 써야한다.
2. position: absolute
👉 위치 상의 부모 요소를 기준으로 움직인다.
※ 부모 요소에 position 속성이 존재해야 한다. position 속성의 값은 상관 없지만 주로 속성 값으로 relative를 삼는다.
※ position 속성이 없으면 뷰포트를 부모 요소로 삼는다.
3. position: fixed
👉 브라우져(뷰포트)를 기준으로 움직인다.
※ 쇼핑몰 배너, 광고에 많이 쓰임. 뷰포트의 크기가 변하여도 설정한 위치에 계속 존재.
4. position: sticky
👉 스크롤 되는 영역을 기준으로 배치.
