16일. CSS(7) - position (static, absolute, fixed, relative, sticky), transition: 1s, 100vh vs 100%

flex 개념이 딱! 박혀있는 상태에서 grid(격자형)를 배워야 한다. 

-> 써보고 익숙해지기

 

static  > relative > absolute (많이 쓰이는 순서) 

flex 

grid

multicolumn

총 6가지

 

격자형으로 다양하게 :) 제공해준다. (= 어려울 수도 있다ㅋㅋㅋ)

지금까지는 테이블을 가지고 놀았는데,

grid는 박스로 -> 편한데 복잡하다. (grid는 4개를 가지고 논다) 

---

// flex를 먼저 익숙해지자. 

 

[static]

 

블록

position: static;

블록일 경우 -> 밑으로 (형 다음이 아우), 형이 커지면 아래로 더 밀려나고 

인라인일 경우 -> 옆으로 (형 옆이 아우)

 

-> relative, absolute로 바꿀 수 있다. 

 

[absoulte]

- 형과는 상관없이 절대 위치

아무리 화면을 줄이고 늘려도 '절대위치'로서 계속 저기에 있당

뭘 기준으로 300 300일까? 

-> 문서 끝에서의 기준 (문서 왼쪽 상단에서의)

 

• 요즘 많이 쓰는건, fixed

-> 문서 위에 유리창에 포스트잇 붙인 것과도 같은 개념

absolute는 문서 위에 포스트잇 붙인 개념 

이렇게 아무리 창을 줄여도 죽어도 저기에 위치해있다. 

 

cf) .float-content에 opacity 넣어서 저렇게 투명도 된 것 (다시 1로 바꾸면 완전한 아무아색으로 나옴)

 

Q. static으로 하면 left, top 해도 안 먹음 

 

 

 

[relative]

내 화면에서도 보이기 (난 가로로... 됨)

 

relative 기준점 - 내가 원래 있었던 위치

 

 

 

 

움직이게 하는거 (근데 높이를 안바꾸면서 내려오게 하려면?)

transition: 1s;

-> 되게 느리게 :) 내려온당 (저기 개발자 도구에서 height를 다르게 해보면)

 

1번만! 했을 때는 -> 이렇게 위치.

그런데 저 민트색을 튕기고? 싶어한다면 -> 고정된게 아니라 문서 전체를 기반으로 해야 

 

만약 1,2 하면 -> 회색을 벗어난 위치에에 가있음 (홈페이지 왼쪽 상단 기준으로 left top 된 거) 

 

그래서 3! 등장

지정된 영역에서 놀게 해주려면 ~~ 

부모에 relative > 자식에 absolute

 

absoulte의 원점이 relative가 된 것

부모 relative "나 따라와~~" 

 

그래서 부모 relative의 위치가 바뀌면 아래 abouslte 해준 애들도 같이! 움직이게 된다~~ (31일자 보충) ㅎㅎ

---

sticky

 

cf) wepkit - 실험적, 테스트버전 -> 특정 브라우저에서만 사용 가능한 것

 

 

cf) 

개발자라면 firefox 잘 써야합니다~ 

오~ 뭔가 미국에서 일하는 것 같은 기분이 든다 ☆

 

ㅡㅡㅡㅡ

 

요즘 웹페이지보면 헤더 부분이 고정되는 사이트들이 있다.

형, 동생이 둘 다  static 방식이었지. 차례대로 위 아래이거나, 옆에 위치하는 자리들이었는데 

-> 근데 형이 abosoute 혹은 fixed 되어버리면  그 자리가 빠지는 것. 붕 떠버린다. 빠져서 절대위치에 간다. 

    absolute, fixed 쓰면 난 겹쳐도 괜찮아!라는 것

 

   cf) relative를 쓴다면? 

   -> 동생들이 올라가지 않는다. 

-> 대신에 sticky는 고정! 기능이 있다는게 차이점~~ 

원래는 blue가 형이었는데 말이지.... 

헤더가 위에 있는건 괜찮은데, 

동생이 가려지는게 싫다. (동생이 위로 올라가서 가려졌음)

 

-> 

• sticky (동생이 겹쳐지지 않으면서, 헤더가 고정됨) 

 

---

 

고정길이 -> px, cm.... 

가변길이 -> %, em, rem, ex 

 

요즘 'v'가 새롭게 등장했다. 

 

vh는 높이와 관련된 것

 

높이의 100% 

-> height:100%

    문서의 높이만큼을 차지하는 것을 의미 (abosloute 좌표 시스템과 비슷)

-> height:100vh 

    화면을 기준으로 하는 100%

 

그림

 

vmain

vmax

 

em

rem

- 잘만 쓰면 좋은데 ... 수치 계산하느라 실이 더 많으셨다고. 근데 잘만 쓰면 좋다... 경험을 우선 해보라고 하심! (특히 반응형)

이렇게 폰트만 줄어드는 것보다 같이~ 줄어들게 하고 싶을 때  

어느 박스에서는 지역방송ㅋㅋㅋ 하고 싶을 때~ 

지역 방송이 em인듯

 

// 

 

 

grid를 가도 될지 flex 테스트 하신다고 함!!