[CSS in depth] part2 Positioning
- 고정 위치
- 상하좌우 네 가지 속성으로 위치 적용(view port 기준)
- 위치를 적용함으로써 크기를 암시할 수 있음
-
Fixed Positioning과 동일하나 포함된 블럭이 다르다.
-
가장 가까운 조상 요소를 기준으로 위치가 결정됨
-
부모 요소의 위치가 지정 되지 않은 경우 위치가 지정된 요소를 찾을 때까지 계속해서 위로 올라감
-
만약에 위치가 지정된 요소를 찾지 못하면 initial containing block를 기준으로 위치가 적용됨
-
버튼을 'X'으로 나타낼 때 주의할 점 => 화면 리더기가 읽을 수 있도록 해야함
-
aria label https://www.w3schools.com/accessibility/accessibility_screen_readers.php
-
menu, tooltips, info boxes
- 마찬가지로 상하좌우 값 세팅
- 네거티브 밸류 세팅 가능
- 원래 위치를 기준으로 움직임
- 그러므로 left, right 혹은 top, bottom을 동시에 사용할 수는 없다
- 동시에 사용하면 한쪽 value가 (right, bottom) 무시됨
- 이 포지셔닝만 단독으로 사용하는 경우는 잘 없고, 주로 내부에 absolute 포지션 요소를 가지고 있는 block으로 사용함
- 라벨 부분은 항상 보이는 부분
- 드롭 다운 메뉴 : absolute position(보이고 안보이고는 display로 조정)
- 참고: 지금은 hover하면 열리도록 했지만 이것은 최고로 좋은 방법은 아님(JS를 통해 class를 부여하거나 라이브러리를 사용할 수 있다)
- 드롭다운의 label에 화살표를 표시하자(hover하면 열린다는 표시)
- 두꺼운 border로 삼각형 만들기
- transparent를 변경하는 방식으로 화살표를 그림 (border-color: black transparent transparent;): down arrow
- 장점: 이미지를 사용하지 않으니 소스를 요청하지 않는다.
https://css-tricks.com/examples/ShapesOfCSS/
재미있으니 방문
- document flow에서 제외 되었기 때문에 stacking도 컨트롤 해줘야함
- 두개의 요소가 오버랩되는 문제
- 브라우저가 페이지를 렌더링 하는 방식, stacking에 대해서
- 브라우저는 HTML을 파싱해서 DOM으로 만든다
- 이때 render tree라는 것을 같이 만든다.
- https://web.dev/critical-rendering-path-render-tree-construction/
- render tree: 엘리먼트의 시각적인 모양과 위치를 나타냄, paint 순서를 결정하는 역할
- position을 적용하지 않으면 순서대로 그려짐(나중에 그려진것이 이전것을 덮음)
- position을 적용한 요소는 가장 나중에 그림
- 여기서는 modal과 dropdown이 나중에 그려지게 됨
- stacking control
- code 위치 변경
- modal이 더 위에 오게 하려면 dropdown보다 나중에 그려지게 하거나(코드 위치 변경)
- 보통 라이브러리에서 쓰는 방식 => fixed position에는 적절한 방식
- z-index
-
code 위치 변경으로 바꾸는 것이 적절하지 않은 absolute(상위 요소에 따라 달라지므로), relative(문서 흐름에 따라 달라지므로) position에 사용
-
숫자가 높을수록 더 앞에 표시됨
-
position이 적용된 요소에만 적용할 수 있음
-
stacking contexts를 사용하게 됨
-
stacking contexts란?
-
요소 혹은 요소 그룹(브라우저에 의해 함께 그려지는)으로 구성됨
-
한 요소가 root가 됨
-
z-index를 지정하면 그 요소가 새로운 stacking context의 root가 됨
-
하위 요소는 그 stack context의 일부가 됨
-
예시에서 "nested"가 z-index가 100인데도 two box보다 뒤에있는 이유는 "nested"가 속한 stacking context안에서 작동하기 때문
-
stacking context를 생성하는 properties
- opacity(below 1)
- transform
- filter
-
z-index는 한곳에 모아두는 것이 좋다
-
positioning을 사용할수록 복잡도가 늘어남 => document flow를 깨기보다 그것을 잘 활용하라는 뜻
-
the browser will take care of a lot of edge-cases for you
- 비교적 새로 도입된 포지셔닝
- relative & fixed의 하이브리드
- 지금은 거의 모든 주요 브라우저에서 지원됨
- fixed와 다른 것: 가장 가까운 블록을 기준으로 삼는 것