[UIUX] 5-2

- align-content

flex된 container에 자식박스가 매우 많을 경우, 자식박스가 여러 줄로 형성된다. (flex-wrap)
이 때 한 줄을 하나의 content라고 표현한다.

align-content는 content를 각각 세로로 정렬하고,
요소 사이에 / 주위에 / 고르게 동일한 간격을 주어 배치한다.

• align-content : flex-start;
  : 여러 줄을 컨테이너의 top위치에 배치한다.

• align-content : flex-end;
  : 여러 줄을 컨테이너의 bottom위치에 배치한다.

• align-content : center;
  : 여러 줄을 컨테이너의 middle위치에 배치한다.

• align-content : space-between;
  : 여러 줄들의 양 옆에 동일한 간격을 주어 배치한다.

• align-content : space-evenly;
  : 여러 줄 사이에 동일한 간격을 주어 배치한다.

• align-content : stretch;
  : 여러 줄들을 컨테이너에 맞도록 늘린다.
  단, 자식박스의 height속성이 선언되지 않아야 한다.

자식박스 적용 속성

★★아래 속성들은 부모박스에 flex가 적용되어 있어야만 사용가능하며,
반드시 자식박스에 적용해야한다.★★

1. order : 순서변경속성 (단위x)

order를 통해 flex 안쪽의 자식요소들의 순서를 바꿀 수 있다.
기본값은 0으로, 작을수록 나열순서가 앞쪽이 된다.
ex) 박스 1,2,3,4 중 2를 맨 뒤로 보내려면, 모두 order가 0이니깐 박스 2에 order:1이상의 수; 를 입력하면 제일 오른쪽으로 이동한다.

2. align-self

자식박스를 개별적으로 세로정렬할 때 사용하는 속성
align-items에 적용하는 속성값들을 모두 똑같이 사용하지만, 값을 지정한 해당 태그에만 적용된다.

-align-self: flex-start;
: 기본값. 해당 요소를 container의 top위치로 정렬한다.

-align-self: flex-end;
: 해당 요소를 container의 bottom위치로 정렬한다.

-align-self: center;
: 해당 요소를 container의 middle위치로 정렬한다.

-align-self: baseline;
: 해당 요소를 container의 시작위치에 정렬한다.
(= flex-start와 동일한 결과값)

-align-self: stretch;
: 해당 요소를 container의 높이나 넓이에 맞춰 늘린다.

반응형을 만들 때 주로 사용하는 가변단위

• % : 어떤 영역에서 어떤 비율만큼을 차지하는 단위
• vw, vh : viewpoint width, height의 약자로, 보이는 화면을 기준으로 백분율(%)하여 보여준다.
• vmin, vmax : viewpoint 최대, 최소 넓이를 설정하는 단위로, 보여지는 화면을 기준으로 가로/세로 중 더 짧은/긴 쪽을 00%만큼 나눠서 채운다.
• fr : 컨텐츠를 차지하는 비율.
  1fr이고, 컨텐츠가 3개라면 부모박스를 1:1:1로 채운다.
  첫번째 컨텐츠가 2fr이고, 나머지 컨텐츠가 1fr이라면 2:1:1이 된다.

- overflow

overflow속성은 내부요소가 부모박스의 범위를 벗어날 때 어떻게 처리할 것인지를 결정하는 속성이다.

★- overflow: hidden;★
: 영역을 벗어나는 부분을 숨긴다. 단 부모박스의 높이가 지정되지 않은경우, 자식요소만큼 부모박스가 늘어난다.

• overflow: scroll;
  : 영역을 벗어나는 부분을 스크롤바를 만들어 보여준다.
  가로세로 모두 스크롤바를 만드는게 기본값이다.
  overflow-x/y: scroll; 로 가로축/세로축의 스크롤을 나타내고, overflow-x/y: hidden; 으로 나타내지 않을 스크로를 숨겨준다.
  (hidden만 단독 사용 X)

• overflow: visible;
  : 기본값. 부모영역을 벗어나더라도 보여줌.

★- overflow: auto;★
: 부모영역에서 자식요소가 넘치면 스크롤바를 만들고, 넘치지않으면 스크롤바를 만들지않는다.

• overflow: initial;
  : 기본값으로 설정함.(= visible과 동일한 결과값)

• overflow: inherit;
  : 부모요소의 속성을 상속받는다.

- list-style : 목록 스타일 속성

목록 스타일은 목록태그의 스타일을 지정하는 속성으로,
불릿이나 순자의 형태를 변경할 수 있다.

1. list-style-type : 불릿이나 순자 모양 변경
   (ul)

• disc : 기본값. ●

• circle : ○

• square : ■

• none : 불릿X, 메뉴만들 때 사용 (거의 이거만 사용)

  (ol)

• demical : 기본값 / 1,2,3

• demical-leading-zero : 01,02,03

• lower-roman : i,ii,iii

• upper-roman : I,II,III

• lower-alpha / lower-latin : a,b,c

• upper-alpha / upper-latin : A,B,C

2. list-style-position : 들여쓰기와 내어쓰기

• inside : 안쪽으로 들여쓰기
• outside : 기본값. 바깥쪽으로 내어쓰기

3. life-style
   : 1번과 2번을 한 번에 선언할 때 사용하며, 두 속성은 공백으로 구분한다.
   ex. list-style: square inside;
   -> ■ 들여쓰기