[CSS] 위치 속성(position, float, clear)

위치 속성

 

1. position
2. float
3. clear

   

요소를 기본 흐름에서 벗어나 원하는 곳에 배치하기 위한 속성이다. 이 속성들은 요소의 위치에 관여한다고 해서 위치 속성이라고 한다.  

 

속성	속성값
position	static, relative, absolute, fixed, sticky
float	none, left, right
clear	lfet, right, both

 
 

---

1. position 속성 ⭐

 

• HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용한다.
• position의 속성은 선택된 태그의 상태를 2차원 또는 3차원으로 지정한다. 여기에 맞춰 레이어가 생기고 좌표 기준점이 달라진다.
• 2차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, top/ right/ bottom/ left 속성을 사용할 수 없으며, 자식의 높이가 부모의 높이에 영향을 미친다.
• 반면 3차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며, top/ right/ bottom/ left 속성을 사용할 수 있으면, 자식의 높이가 부모의 높이에 영향을 줄 수 없다.
• 3차원 요소를 갖는 속성의 속성값은 모두 z축을 갖는다. z축은 레이어 높낮이에 영향을 준다.
   

속성값	설명
static	요소를 기본 흐름에 따라 배치 (기본값)
relative	요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있다. (원래 자리에서 상대적으로 이동)
absolute	요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치한다. 단, 스크롤해도 해당 위치에 고정되어 있다.
fixed	요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치한다. 단, 스크롤해도 해당 위치에 고정되어 있다.
sticky	요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정된다.

position 주요 속성값	차원	부모 자식 간에 발생하는 마진 병합 현상	top, right, bottom, left 적용	자식의 높이 값이 부모에게 미치는 영향	z-index 적용
static	2차원	O	X	O	X
fixed	3차원	X	O	X	O
relative	2, 3차원	O	O	O	O
absolute	3차원	X	O	X	O

 

3차원이 항상 2차원보다 위에 배치되는 건 아니다. 2차원과 3차원 간에 발생하는 레이어가 겹치는 현상은 형제간에 발생하며 그 순서에 따라 전혀 더른 결과가 나타난다.

 

---

 

1) static (기본값)

 
아무런 변화가 없다. 좌표 속성을 사용할 수 없으며 위치 속성을 사용하지 않았을 때와 같다. 위치 속성을 사용하지 않을 때와 같다면 왜 이런 값이 존재할까? 왜냐하면 기본값이기 때문이다. 

 

• 부모 자식 마진 병합 현상
• top, right, bottom, left와 함께 사용할 수 없음: 변화 없음
• 부모의 높이에 영향을 준다. 
  • 부모 높이가 0인 상태지만 자식의 높이만큼 부모의 공간이 벌어져 자식 높이로 바뀜
     

 

---

2) relative

 

- 요소를 좌표 속성에 따라 배치할 수 있다.

- 기본 위치를 기준으로 설정만큼 이동한다.

- 원래 자리에서 이동✅

 

속성명	설명
top	위쪽 기준으로 좌푯값 지정
right	오른쪽 기준으로 좌푯값 지정
bottom	아래쪽 기준으로 좌푯값 지정
left	왼쪽 기준으로 좌푯값 지정

 

• 2, 3 차원 특징 모두 갖는다.
• 부모 자식 마진 병합 현상
• top, right, bottom, left 적용
• 부모가 높이를 갖고 있지 않으면 자식의 높이가 부모에게 여향

 

좌표 속성에 따라 요소를 배치하는 원리를 이해하려면 좌표계를 알아야 한다. 좌표계는 요소가 웹 브라우저에 표시될 때 x, y, z 축에 따라 요소가 배치되는 개념이다. 좌표계에는 항상 좌표의 기준이 되는 기준점이 존재하는데, 기준점은 쉼표로 구분해 x, y, x축을 순서대로 나열한 (0, 0, 0) 형태로 작성한다.
 
 

---

3) absolute

 
- relative와 마찬가지로 요소가 기본 흐름에서 벗어나 좌표 속성에 따라 배치된다. 다만, 기준점이 다르다. relative일 때는 기준점이 요소의 왼쪽 위 모서리지만, absolute일 때는 웹 브라우저의 왼쪽 위 모서리이다.

- 절대좌표를 이용해서 위치를 설정한다.

- 최상위 부모인 body 기준으로 이동한다.

✅ 가장 근접한 부모 중에 static이 아닌 부모의 기준에서 지정한 값대로 옮겨간다. 만약 부모를 다른 요소로 지정하고 싶다면 기본값을 relative로 변경시켜 준다.

 

• 부모 자식 마진 병합 현상 x
• top, right, bottom, left 적용(부모의 position에 따라 기준 달라짐)
• 부모가 높이를 갖고 있지 않을 경우 자식의 높이가 부모에게 영향 x

 

 

---

 

4) fixed

 
fixed로 지정하면 해당 요소는 지정된 위치에 고정된다. 웹 브라우저를 스크롤하더라도 항상 같은 위치에 있음을 확인할 수 있다.

• 부모 자식 마진 병합 x
• top, right, bottom, left 적용
• margin-top은 최초 박스가 생성된 지점을 기준으로 좌표 설정
• top은 브라우저를 기준
• 부모가 높이를 갖고 있지 않더라도 자식의 높이가 부모에게 영향을 주지 않는다.
   
   

---

 

5) sticky

 
스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동한다. 기존 코드에서 요소의 position 속성값을 sticky로 바꾸고, 좌표 속성은 top 속성값만 0으로 지정한다.
 

---

 

6) z-index 

 

- position 속성으로 배치한 요소의 z 축 위치를 조정할 때 사

-  z-index 속성은 레이어 높낮이를 조정하는 데 사용하며 3차원 요소를 갖는 fixed, relative, absolute 속성값과 함께 사용할 수 있다.

-  z-index 속성의 속성값에는 정수를 쓸 수 있고 숫자가 클수록 상위 레이어로 이동한다.

- 브라우저는 z- index 속성 값이 낮은 요소를 먼저 그리고, 속성값이 높은 요소를 나중에 그리기 때문이다. 그래서 속성 값이 큰 요소가 작은 요소를 덮는다. 예를 들면, z-index: 1; 이 z-index: 0; 보다 위에 그려진다.

 

 

 

---

2. float 속성

 
 
- 요소를 화면에 배치하는 또 다른 방법
- 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용
 

속성값	설명
none	float 속성을 적용하지 않는다.
left	대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치
right	대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치

 
 

---

3. clear 속성

 
- clear 속성은 float 속성을 해제할 때 사용하는 속성이다.

- float과 clear는 공생 관계 

- float 속성에서 문제가 발생하는 원인은 float 속성이 대상 요소의 다음 요소에 영향을 주기 때문이다. 따라서 영향을 주지 않도록 float 속성을 해제해야 한다.
 

속성값	설명
left	float 속성의 left 값을 해제
right	float 속성의 right 값을 해제
both	float 속성의 left와 right 값 모두 해제

 

---

 

4. overflow 속성

 

- 내용이 태그 요소의 크기보다 클 때 설정할 수 있다.
 

이용방법)

hidden과 scroll 속성값을 이용해서 넘치는 내용을 가리거나, 스크롤을 이용할 수 있다.
 
ex) overflow: hidden, overflow: scroll