2021.05.27(Thu.) <CSS로 틀 만들기, Flex>

1. CSS의 셀렉터

• , (쉼표)는 각 태그들을 구분하여 전부 선택한다.
• id와 class를 선택할 때는 각각 # 과. (온점)을 사용하고 다른 기호들로 연결되지 않아 있으면 두 개를 동시에 만족시키는 부분을 선택한다.
• 띄어쓰기로 구분된 엘리먼드들은 '후손'을 말한다.
• +는 같은 계층일 때 뒤에 올 + 해준 태그의 요소 하나만을 선택한다.
• ~는 같은 계층일때 뒤에 올 ~ 해준 태그의 요소 전부를 선택한다.
• 엘리먼트[속성]를 넣어서 특정 태그들 중에 속성이 동일한 것만 선택할 수 있다.
• p와 자식 엘리먼트(2n + 1)를 쓰면 '홀수'번 째 자식 엘리멘트만 선택할 수 있다.
  • 나머지 응용도 가능하다! 후손을 쓴다던지 말이다.
• nth-last-child는 모든 자식 요소들 중에 앞에서부터 n번째 위치한 자식 요소를 말한다.

2. 후손 셀렉터와 자식 셀렉터

• 후손 셀렉터 : 태그의 아래에 있는 모든 아래의 요소들을 선택한다. (가장 포괄적 요소 아래의 '공백 있어욧!' 이 요소를 선택한다.')
• 자식 셀렉터 : 태그 바로 아래 오는 태그. (부모가 될 요소 > 자식이 되는 이 요소를 선택한다.')

3. Flex

• 자식 박스의 방향과 크기를 정해줄 수 있는 유동적인 방식으로 레이아웃을 잡는 방법.
• flex는 '자손' 셀렉터만 적용된다! (자식은 바로 직계고, 후손은 그냥 그 아래 쭉인데,
  　자식은 누군지 알지만, 후손은 모르는 것처럼 flex는 자식 한태만 영향을 준다)
• flex-direction 속성은 자식에 적자.
• 왼쪽부터 차례대로 수평으로 자식 박스를 배치한다.
  • 원래는 수평(row) 방향이다. 하지만, column으로 수직방향으로도 정렬이 가능하다.
• flex: 0 1 auto;로 기본값이 설정되고, 따로 지정해 줄 수 있다.

4. grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

• flex를 기본값으로 잡았다면,
  　이 각 속성들도 flex: <grow>(0) <shink> (1)<basis>(auto)와 같으며 마찬가지로, 따로 지정도 가능하다.
• 이들은 상대 크기를 가지고 있어서 자식 박스들의 비율에 따라 크기가 달라진다!
• 즉, 하나만 바꿔도 모든 자식 박스가 다 바뀐다는 말씀.
  　하지만 상대적인 비율은 넘을 수 없기 때문에, 정렬에 용의 하다!
  ! 주의 : grow와 shrink를 함께 수정하지는 않는다. 비율로 크기를 지정하기 때문에,
  　grow를 변경하고 나면, shrink로 다시 줄인다? 그럼 결과가 뭐가 나올지 잘 예측이 안 되기 때문이다!

5. basis(기본 크기)의 자세한 설명

• grow와 shrink로 조절하려고 하는 기본적인 전체 박스의 레이아웃의 크기를 말한다.
• width보다 먼저 적용된다.
• 만약 자식 박스에 콘텐츠를 추가되는 기능이 있어서 엄청나게 많아지면? width로 설정 시, 겹쳐진다던지 원하는 그림이 나오지 않을 것이다.
  　이때, flex-basis로 비율을 계속 유지한 채로 추가할 수 있다!

6. 콘텐츠 정렬

• flex-direction: column; : 위에서 아래로(-reverse 밑으로 내려서 가능, column 없으면 기본값으로 row)
• justify-content : 중심값을 기준으로 정렬(일명, 수평 정렬)
  • flex-start; : 맨 앞(왼쪽)으로 정렬
  • center; : 중앙으로 정렬(수평 기준)
  • space-between; : 자식 박스의 수평을 맞춰놓고 사이 간격을 띄어서 정렬
  • flex-end; : 맨 뒤(오른쪽)로 정렬
  • space-around : 같은 길이로 띄어줌
• align-items : 중심값을 반대 기준으로 정렬(일명, 수직정렬)
  • start; : 맨 앞(최상단)으로 정렬
  • center; : 중앙으로 정렬(수직기준)
  • stretch; : 수평으로 가득 차게 정렬
  • end; : 맨 뒤(최하단)로 정렬
  • baseline : 중심점을 잡아준다. 그곳을 기준으로 잡아준다.

7. CSS에 유용한 메서드

• flex-nowrap : 줄 넘어가도 밑으로 안 내려가고 계속 나온다!
• (클래스나 id) hover : 마우스 올렸을 때 뭔가 된다.

CSS에 사용하는 메서드나 태그들을 좀 외워도 좋을 것 같다. 찾아 쓰면 되지만 조금 아쉽다.
Gti 사용법을 조금 더 숙지하면 좋을것 같다. 할 수는 있지만, 아직 조금 두렵다ㅋㅋ