20210526 CSS05 : 배치(position, stack order, z-index) 정렬(flex), 전환(transition), 변환(transform), perspective

CSS05

배치

position 속성

• 요소의 위치 지정 기준
• 기본값 : static (기준 없음)
• 가능한 값
  • relative (요소 자신이 있었던 위치를 기준)
    • 주의) 배치전 자리는 시각적으로 비어 있음 (자리를 차지함)
  • absolute (위치 상 부모 요소를 기준)
    • 이전에 있던 자리를 차지 하지 않음
    • 부모를 특정하게 지정하고 싶으면 position: relative를 통해 기준을 정해줘야 함
      • absolute를 사용한 요소 기준으로 position: relative를 사용한 조상요소를 처음으로 만날때 그 조상요소가 기준이 됨 (모두 찾지 못하면 최종적으론 뷰포트 기준이 됨)
  • fixed (뷰포트를 기준으로 고정되어 있음)
  • sticky (스크롤 영역 기준)
• 같이 사용하는 속성 (위치 값을 위한 속성)
  • top, bottom, left, right, z-index
  • 요소의 각 방향별 거리 지정
  • 모두 음수 사용 가능
    • 기본 값 : auto (브라우저가 계산)
    • 단위 px, em, rem ...

요소 쌓임 순서 (Stack order)

• 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 (layer 느낌)

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
   • (일단 z-index가 있더라도 position이 없으면 우선순위에서 밀림, 그래서 주로 relative를 사용해서 position 값을 넣어서 우선순위를 높여줌)
2. 1번 조건을 만족 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1, 2번 조건도 만족하는 경우, HTML 구조에서 태그가 나중에 쓰여진 것일 수록 위에 쌓임

z-index 속성

• 요소의 쌓임 정도를 지정
• 기본값 : auto (부모 요소와 동일한 쌓임 정도)
• 가능한 값 : 숫자 (숫자가 높을 수록 위에 쌓임, 음수 사용도 가능한데 보통 -1을 씀)
• 쌓임 순서에 따라서 z-index는 position 속성의 유무에 영향을 받음

position으로 인한 요소의 display 변경

• position 속성의 값으로 absolute, fixed 가 지정된 요소는 display 속성이 block으로 변경됨

span {
  width: 100px;
  height: 100px;
  background-color: orange;
  /* display: block; */
  position: absolute;
}

flex (플렉스 정렬)

• 1차원 레이아웃 (수직, 수평)
• Flex Container : display: flex 속성이 들어 있는 요소
• Flex Items : Flex Container의 자식 요소들

Flex Container에 작성하는 속성들

display: flex

• Flex Container의 화면 출력 특성
• 지정 가능한 값
  • flex : 블록 요소 처럼 사용하는 Flex Container 정의
  • inline-flex : 인라인 요소 처럼 사용하는 Flex Container 정의

flex-direction

• 주 축을 설정 (수직 정렬, 수평 정렬)
• 기본값 : row (행 축, 좌->우 차곡차곡)
• 가능한 값
  • row-reverse (행 축, 우->좌 차곡차곡)
  • column (열 축, 위->아래 차곡차곡)
  • column-reverse (열축, 아래->위 차곡차곡)
• flex-direction으로 설정한 row이나 column의 방향이 Main-axis 가 되고 , 그 방향의 교차축이 Cross-axis가 됨
• 쌓기 시작할수 있는 점을 start(시작점)
• 쌓이는 것이 끝날수 있는 점을 end(끝점)

flex-wrap

• Flex Items 묶음 (줄 바꿈)여부
  • Items가 많아져서 Flex Container를 넘칠때 어떻게 할 것인가?
• 기본값 : nowrap (묶음 없음, 줄바꿈 없음, items가 찌그러짐)
• 가능한 값
  • warp (여러 줄로 묶음, items의 모양을 유지한체 다음줄로 넘어감)
  • wrap-reverse (wrap의 반대 방향으로 묶음)

justify-content (수평 정렬)

• 주축의 정렬 방법 (row인 경우 -> 수평)
• 기본값 : flex-start (Flex Items를 시작점으로 정렬)
• 가능한 값
  • flex-end (Flex Items를 시작점으로 정렬)
  • center (Flex Items를 가운데 정렬)
  • space-between (각 Flex Item 사이를 균등하게 정렬)
  • space-around (각 Flex Item의 외부 여백을 균등하게 정렬)

align-content (수직정렬, 여러줄)

• 교차 축의 여러줄 정렬 방법 (row인 경우 -> 수직)
  • 여러 줄이어야 align-content가 작동함, 그래서 flex-wrap: wrap;이 필요함
  • 또한 빈 공백이 있어야하고, 실제로 두줄이 이상이 되어야 정렬이 가능함
  • 조건이 까다로워서 별로 안씀
• 기본값 : stretch (Flex Items를 시작점으로 정렬)
  • (height가 auto 이면 요소들을 늘려서 flex container를 채울수 있게함, height 값이 있으면 그 모양에 맞게 하지만 남는 여백은 줄에 그대로 남겨 flex container를 채움)
• 가능한 값
  • flex-start (Flex Items를 시작점으로 정렬)
  • flex-end (Flex Items를 끝점으로 정렬)
  • center (Flex Items를 가운데 정렬)
  • space-between (각 Flex Item 사이를 균등하게 정렬)
  • space-around (각 Flex Item의 외부 여백을 균등하게 정렬)

See the Pen poePXEy by RaccoonCode96 (@raccooncode96) on CodePen.

align-items (수직정렬, 한줄)

• 교차 축의 한줄 정렬 방법
• 기본값 : stretch (flex items를 교차 축으로 늘림)
• 가능한 값
  • flex-start (Flex Items를 각 줄의 시작점으로 정렬)
  • flex-end (Flex Items를 각 줄의 끝점으로 정렬)
  • center (Flex Items를 각줄의 가운데 정렬)
  • baseline (Flex Items를 각줄의 문자 기준선에 정렬)

See the Pen bGqRmev by RaccoonCode96 (@raccooncode96) on CodePen.

정리) 요소 정가운데 정렬

• display: flex, justify-content: center, align-items: center

Flex Items에 작성하는 속성들

order

• Flex Item의 순서
• 기본값 : 0 (순서 없음, 각각의 item이 모두 0인 상태)
• 가능한 값 : 숫자 (item별로 order값을 작성해서 요소의 순서를 정해줌, 숫자가 작을 수록 먼저 정렬)

flex-grow (남은 여백을 요소들이 차지하는 비율)

• Flex Item의 증가 주축 너비 비율
  • 요소들이 차지하는 부분을 제외한 나머지를 어떻게 차지 할 것인가 인데 계산하기 편하게 ->
  • 0인 요소가 차지하는 너비를 제외한 container 나머지를 0이 아닌 숫자를 가진 요소들이 차지하는 비율로 생각하는게 좋다.
• 기본값 : 0 (증가 비율 없음)
• 가능한 값 : 숫자 (증가 비율)

flex-shrink(item이 찌그러 지는 비율)

• Flex Item의 감소 주축 너비 비율
• 기본값 : 1 (Flex Container 너비에 따라 item의 너비가 감소 비율 적용)
• 가능한 값 : 숫자 (감소 비율)
• 박스가 작아지는 경우 item도 찌그러지는데 flex-shrink: 0 을 넣으면 item의 형태를 유지한체 container만 작아짐

flex-basis (flex-grow 영역 비율 계산시 제외되는 부분)

• Flex Item의 공간 배분 전 기본 너비
  • (flex-basis: flex-grow로 item의 비율 계산시 item에서 비율에서 계산하지 않는 영역을 말함)
• 기본값 : auto
  • auto는 제외할 부분이 content 사이즈와 같음
  • 요소의 content 너비를 flex-grow 를 통한 비율 배분때 고려하지 않고 남은 부분만으로 비율로 배분함
  • -> 결국엔 content가 Container에서 item간의 비율에 영향을 준다는 뜻
• 가능한 값 : 단위 (px, em, rem...)
  • 0 : content의 영향 없이 Container에서 item간의 비율이 flex-grow로 따라 간다.

transition (전환)

• 요소의 전환 (시작과 끝) 효과를 지정하는 단축 속성
• 단축 속성
  • trasition: 속성명(Property) 지속시간(Duration, 필수) 타이밍함수(Timing-function) 대기시간(Delay);
  • 지속시간 필수로 작성 해야함
  • 쉼표 , 를 통해서 여러 속성들을 단축 속성으로 작성 할 수 있음
  • 단축속성에 시간이 두개가 존재시 첫번째가 지속시간(duration), 두번째가 대기시간(delay)

div {
  tansition: width 0.5s, background-color 2s;
}

• 개별 속성
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

transition-property

• 전환 효과를 사용할 속성 이름을 지정
• 기본값 : all (모든 속성에 적용)
• 가능한 값 : 속성이름 (전환 효과를 사용할 속성 이름 명시)
  • 디테일하게 속성 별로 전환효과를 주고 싶을 때, 변화 시키는 속성을 적으면 됨

transition-duration

• 전환 효과의 지속시간을 지정
• 기본값 : 0s (전환 효과 없음)
• 가능한 값 : 시간 (지속시간 s 를 지정)

transition-timing-function

• 전환 효과의 타이밍(Easing) 함수를 지정
• 기본값 : ease (느리게-빠르게-느리게, cubic-bezier(0.25,0.1,0.25,1))
• 가능한 값
  • linear (일정하게, cubic-bezier(0,0,1,1))
  • ease-in (느리게-빠르게, cubic-bezier(0.42,0,1,1))
  • ease-out (빠르게-느리게, cubic-bezier(0,0,0.58,1))
  • ease-in-out (느리게-빠르게-느리게, cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n) 자신만의 값을 정의(0~1)
  • steps(n) n번 분할된 애니메이션

transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
• 기본값 : 0s 대기시간 없음
• 가능한 값 : 시간 대기시간을 지정

transform (변환)

• 요소의 변환 효과
• transform: 변환함수1 변환함수2 변환함수3 ...;
• transform: 원근법 이동 크기(scale) 회전(rotate) 기울임;
• 함수의 종류: 2D 변환 함수, 3D 변환 함수

2D 변환 함수 (값)

이동 관련 함수 (translate)

• 단위 : px
  • translate(x, y) : 이동(x축, y축) (값 하나만 들어오면 x,y 둘다 같은 값)
  • translateX(x) : 이동(x축)
  • translateY(y) : 이동(y축)

크기 관련 함수 (scale)

• 단위 : 없음 (배수)
  • scale(x, y) : 크기(x축, y축) (값 하나만 들어오면 x,y 둘다 같은 값)
  • scaleX(x) : 크기(x축)
  • scaleY(y) : 크기(y축)

회전 관련 함수 (rotate, skew)

• 단위 : deg

  • rotate(degree) : 회전(각도)
  • skew(x, y): 기울임(x축, y축)
  • skewX(x): 기울임(x축)
  • skewY(y): 기울임(y축)

• 2차원 변환 효과 : matrix(n,n,n,n,n,n)

3D 변환 함수 (값)

이동 관련 함수

• 단위 : px
  • translateZ(z) : 이동(z축)
  • translate3d(x,y,z) : 이동(x축,y축,x축)

크기 관련 함수

• 단위 : 없음 (배수)
  • scaleZ(z) : 크기(z축)
  • scale3d(x,y,z) : 크기(x축,y축,x축)
• 단위 : px
  • perspective(n) : 원근법 (거리)
    • 3d회전 함수와 같이써야 입체 처럼 보임
    • 항상 perspective가 먼저 작성 되어야 함
    • 값이 작을수록 가까이에서 보듯 원근 왜곡이 심해짐
    • 원근 기준은 원래 요소가 있던 정가운데가 눈의 위치임

회전 관련 함수

• 단위 : deg

  • rotateX(x) : 회전(x축)
  • rotateY(y) : 회전(y축)
  • rotateZ(z) : 회전(z축)
  • rotate3d(x,y,z,a) : 회전(x축, y축, z축, 각도)

• 3차원 변환 효과 : matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) (16개 값)

See the Pen mdWwvOw by RaccoonCode96 (@raccooncode96) on CodePen.

perspective 속성 (함수 아님)

• 하위 요소를 관찰하는 원근 거리를 지정
  • 가능한 값 : 단위 px, em, rem ...

perspective 속성 vs 함수

• 원근감을 띄는 요소는 속성을 지정한 부모의 자식 또는 함수를 지정한 본인 요소

속성/함수	적용 대상	기준점 설정
perspective: 600px;	관찰 대상의 부모가 기준점	perspective-origin
transform: perspective(600px);	관찰 대상이 기준점	transform-origin

• 부모 요소에 perspective 속성을 지정하는 것을 권장함 (요소자체에 함수를 사용하는 것 보다)

backface-visibility

• 3D 변환으로 회전된 요소의 뒷면 숨김 여부
• 기본값 : visible (뒷면 보임)
  • 요소의 앞면이 뒤집어진 뒷면이 보임
• 가능한 값 : hidden (뒷면 숨김)
  • 뒷면으로 돌렸을 때 요소 자체가 안보임(투명)
• 활용예시 ) 회전하여 뒷면으로 돌아갔을때 안보이게 하고 다른 것을 보이는 액션을 사용 할수 있음