On.
Position
웹 문서 안의 요소를 원하는 위치에 배치할 때 사용하는 속성 중 하나.
1. Position 속성
position속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절 할 수 있다.
위치는 속성 top, bottom, left, right를 사용하여 원하는 px 또는 %등으로 조정한다.
▪️ top : 위쪽부터 떨어져 있는 정도
▪️ bottom : 아래부터 떨어져 있는 정도
▪️ right : 오른쪽부터 떨어져 있는 정도
▪️ left : 왼쪽부터 떨어져 있는 정도position: static
요소를 문서의 흐름에 맞추어 배치한다.
- 속성 top, bottom, left, right을 사용할 수 없고, float속성을 사용하여 좌우 배치가 가능하다.
relative
나열된 순서대로 배치되는 것은 static과 유사하지만속성 top, bottom, left, right 사용이 가능하다.
- 주로 자식 component에게 지정되는 속성
- 자식 컴포넌트는 부모 컴포넌트로부터 지정한 top, bottom, left, right만큼 위치한다.
absolute
문서의 흐름과 상관없이 위치 좌표를 지정해 원하는 곳에 요소를 배치할 수 있다.
- absolute 속성 사용 시, 반드시 부모 요소가 relative로 지정되어 있어야 한다.
fixed
문서의 흐름과 상관없이 위치 좌표를 지정할 수 있지만 부모요소 기준이 아닌 윈도우 창을 기준으로 위치가 결정된다.
- 한 번 배치되면 fixed 속성값 이름처럼 브라우저 창을 스크롤하더라도 움직이지 않고 고정되어 표시된다.
✔︎ Essential tip
- position으로 원하는 요소를 중앙에 위치시킬때, 요소의 크기만큼 margin-left : -"해당요소 width의 1/2의 값을 지정해 확실히 맞추기.
Off.
프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥
Communication : any