[HTML,CSS]Position,Flex,Transform

Starbucks main page 만들기를 통해 알게된 개념 3가지를 정리합니다.

GitHub Repo: Repo Link

Result Page: Page Link

Position

• 배치를 결정하는 속성
  

1. static: 기본값, 기준 없음
2. relative: 이 속성을 사용하게되면, 사용된 요소가 배치의 기준점이 됨
3. absoulte : 위치(배치)상 부모요소 기준

• 위치상 부모요소란?
  ➡ HTML 구조상 부모요소로 바꾸어서 생각하면 편함.
  ➡ 만약 absoulte 를 부여했는데 부모요소에 기준점이 없다면 ViewPort 가 기준이 된다.

z-index 쌓임 순서

요소의 쌓임 순서를 지정하는 속성인 z-index 에 높은값을 주기만 하면 가장 맨 앞으로 나와서 보여지겠구나 하고 생각하면 안된다.

• 요소의 쌓임 순서 판단기준

1. Position 속성 값 여부
2. z-index 숫자 값
3. HTML 의 나중구조

➡ 즉, 9999 같은 수를 부여하기 전에 Position 속성이 있는지 체크해보자!

Flex

💡 Flex 속성이 부여된 요소 = Flex-Container
💡 Flex 속성이 부여된 요소의 자식 = Flex-items

1. Flex-Container 제어
   a. justify-content : 주 축(Main-axis) 정렬방법
   b. align-items : 교차 축(Cross-axis) 정렬방법
   ➡ 주로 주 축은 x축, 교차축은 y축방향으로 사용하긴 하지만, flex-direction 을 이용하면 변경이 가능하다.

2. Flex-items 제어
   a. flex-wrap: container 의 영역보다 더 넓어질 경우 줄바꿈 여부
   b. flex-grow,shrink: 아이템의 증가, 감소 너비 비율 지정

Transform

Trnasform 속성은 예시를 들어서 설명하겠습니다.
CSS 만으로 3D 효과를 주고 싶다면,

1. positon:absoulte 만 선언하여 같은 위치에 겹치도록 배치
2. backspace-visibility:hidden 을 통해 뒷면의 요소를 가리기
3. RotateY(180deg)를 통해 y축 기준 180도 화전시키키
4. perspective 속성을 통해 원근감을 부여하여 마무리