position (transform/position)

 

레이아웃의 핵심 Position

• 위치를 조절 할 수 있는 Position속성
• position속성의 다양한 옵션
• transform속성 알아보기

position속성의 다양한 옵션들 다루어보기

• relative
• absolute
• relative + absolute의 조합형태
• absolute로 가운데 정렬하기
• absolute로 확장 레이아웃 구현

---

 

 

 

<transform>

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

 

transform 은 정중앙이 기준점이며, 다른 요소

에 영향을 주지 않는 독립적인 별도의 프로퍼티!

 

 

 

 

조미료 느낌으로 다른 요소에 영향을 주지 않게 아주 약간의 수정만을 필요로 할때!  프로퍼티 값의 순서도 중요하다..

 

 

레이아웃을 transform으로 잡으면 안된다.

정말 양념느낌으로 최소로 활용하자. (아마도)

그리고 translate 값에 퍼센티지(본인자체가 기준임) 로 넣을 수 있다!!

 

transform: translateX/translateY <-이게 관건!

 

 

 

 

position 속성의 다양한 옵션들 다루어보기- 위치(자유도가 조금 더 높다)

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

• relative
• absolute
• relative + absolute의 조합형태
• absolute로 가운데 정렬하기
• absolute로 확장 레이아웃 구현

 

 

기본값 position: static;

position:relative 는 주변 환경에 따라 위치가 달라질수 있다. (딱 저 요소만(레이어) 위에 떠있다고 생각하면 됨. 아래바닥에 지분 있음 )

또한 100%는 자기자신의 100%만큼 이동이 아니라 부모요소의 100%만큼의 이동이다.

 

 

 

 

 

위의 두 캡쳐를 잘보자. 

absolute값은 뷰포트 기준이다.고정된 형태는 아니다. 스크롤에는 고정되지 않는다.  (absolute는 아래바닥에 지분이 없다..)

부모요소를 떠나서 자유롭게 배치가 가능하다. 자유도가 높다. 이러기위해선

기준점을 재설정해야한다.

 

 

position: absolute 의 기준점은 뷰포트라 left: 0/ top:0 은 저 위치. 부모요소를 그냥 벗어나서 둥둥 떠다닌다.

창의크기를 움직여도 따라다닌다. 스크롤이 같이 되어버리고 스크롤내려도 위치를 고정하려면 position : fixed!

 

 

 

부모요소에 position:relative를 넣어주면 자식요소의 position의 기준점을 부모요소로 하겠다는것. 상대적인 절대 위치를 지정할 수 있다.

 

 

(중심축을 바꿀때는 trnsform을 이용하자.)

 

---