PoiemaWeb CSS3 Section

기본

position⭐

값	설명	좌표 프로퍼티 사용 가능
static (default)	부모 요소 내에 위→아래, 왼→오 방향으로 배치	X
relative	static과 동일하게 작동 아무것도 적용하지 않은 원래 자신의 위치를 기준으로 이동	O
absolute	static이 아닌 가장 가까운 부모 요소를 기준으로 위치를 정함 block 레벨 요소라도 width값이 content의 크기에 맞춰짐 부모 요소를 벗어날 수 있음	O
fixed	viewport를 기준으로 위치함 → 스크롤해도 이동하지 않음 block 레벨 요소라도 width값이 content의 크기에 맞춰짐	O

z-index

기본적으로 나중에 쓰여진 요소가 위에 덮여져서 렌더링 되지만 z-index프로퍼티를 이용하여 그 순서를 조정할 수 있음

• 값이 클 수록 더 위에 렌더링
• static이 아닌 요소에만 적용 가능

overflow

자식 요소가 영역을 벗어날 때 부모 요소에 해당 프로퍼티를 설정 어떻게 처리할 것인지 명시

• visible(default) : 자식 요소가 영역을 벗어나도 표시
• hidden : 영역을 벗어나는 부분을 표시하지 않음
• scroll : 영역을 벗어나는 부분이 없어도 스크롤을 표시 → 현재 대부분 auto와 동일하게 작동
• auto : 영역을 벗어난 부분이 있을 때만 스크롤 표시

overflow-x, overflow-y

특정 방향에 대해서만 명시하고 싶다면 해당 프로퍼티에 위 값을 적용하여 선언

---

2D Transform

좌표를 지정하듯이 요소의 위치를 정의함

transform: transform_func1 transform_func2 transform_func3 ...;

transform 프로퍼티 값으로 적용할 transform function들을 나열
주로 트랜지션으로 애니메이션을 구현할 때 거의 필수적으로 사용 (이외의 경우에도 사용가능)

transform-origin

아래 transform function을 적용할 때 기준이 되는 점을 설정 할 수 있음
기본 값은 요소의 정중앙 50% 50%
설정 값으로 %, px, top left, bottom right를 적용할 수 있음
직접 값을 적용할 경우 기준은 top과 left에 대해 적용

/* 아래 두 선언은 동일함 */
transform-origin : 0 0;
transform-origin : top left;

transform function

• translate(x,y) : 일반적인 위치 단위 사용
• scale(x,y) : 0과 양수
• skew(x-angle, y-angle) : 각도
• rotate(angle) : 각도

---

Flexbox layout⭐

요소들을 정렬시키고자 할때 편리
부모요소에

display:flex;

/*만약 부모 요소(지금 이 선언을 하는 요소)가 inline 요소라면*/
display:inline-flex;

를 선언하여 flexbox를 사용할 수 있음
이때 부모 요소를 flexbox container, 자식요소들을 flexbox item이라고 부름

Flexbox container 프로퍼티

자식 요소인 item을 어떻게 배치 할 것인지
중요한 것은 여기서 수평, 수직이라는 말은 flex-direction값에 의존함

• flex-direction : item들을 배치할 방향

  • row / row-reverse : 가로
  • col / col-reverse : 세로

• flex-wrap : item들을 몇 줄에 걸쳐 표현할 것인지

  • nowrap : 한 줄에 모두 표시, item들의 크기 조정 → 그래도 넘칠 경우 overflow 지정
  • wrap, wrap-reverse : 여러 줄로 나누어 표시, 왼→오는 일정

• justify-content : item의 수평 정렬 방법(순서 조정X)

  • flex-start / flex-end / flex-center : 왼쪽/오른쪽/가운데 정렬, 공간X
  • space-between / space-around : item 사이사이 공간을 넣어 균등하게 정렬, between의 경우 item 사이에만 균등한 공간이 적용됨

• align-items : item의 cross-axis 정렬 방법

  • stretch : flexbox container에 꽉 차는 높이를 가짐
  • flex-start / flex-end / flex-center : 위/아래/가운데 정렬
  • base-line : 을 기준으로 정렬 예시

• align-content : item줄의 cross-axis 정렬 방법

  • stretch : 각 줄 아래(이후)에 공간을 두어 균등하게 정렬
  • flex-start / flex-end / flex-center : 위/아래/가운데 정렬, 공간X
  • space-between / space-around : item 사이사이 공간을 넣어 균등하게 정렬, between의 경우 item 사이에만 균등한 공간이 적용됨

  ❗ align-items 과 align-content 의 차이
  같은 기능을 하는 것은 맞음, 둘 다 flex-direction의 cross-axis 에 대해 동작

  • align-items의 경우 각 줄의 cross-axis에 대한 item들의 정렬 방식을 결정하고
  • align-content의 경우 각 줄이 flexbox container에 대해 어떠한 정렬 방식을 가질 것인지를 결정, 그래서 한 줄인 flex-wrap:nowrap; 이 선언되어 있다면 의미가 없음, justify-content와 동일한 기능이라고 생각하면 될 듯

Flexbox item 프로퍼티

float, clear, vertical-align 프로퍼티를 적용할 수 없음

• order : default는 0, 기본적으로는 추가된 순서에 따르지만 해당 값으로 순서를 정해줄 수 있음, 음수도 가능

• flex-grow : default는 0, 기본적으로는 모든 요소가 동일한 너비를 가지게 되는데 이를 이용하여 다른 요소의 몇 배인지를 지정해줄 수 있음

• flex-shrink : default는 1, 기본적으로는 container에 맞추기 위해 모든 요소의 너비가 축소되게 되는데 이를 0으로 바꿔주면서 축소를 취소할 수 있음(원래 너비 유지)

• flex-basis : default는 auto, 너비를 px, %, rem등의 단위로 지정할 수 있게함 flex-basis:350px;

위 flex-로 시작하는 프로퍼티의 shorthand로 flex를 사용할 수 있지만 따로 사용하는 것을 권장함

• align-self : align-items와 동일한 역할을하고 동일한 프로퍼티 값을 가지지만 align-items보다 우선시되어 적용

+) flexbox를 실습해볼 수 있는 간단한 게임
https://flexboxfroggy.com/#ko