TIL-12, CSS (2)

저번 학습에서 CSS의 기초를 학습했었다.
이번 학습에서는 한 단계 업그레이드해서,
중급(?)을 공부해보자.

CSS tag

span { } , body { }
-> span, body 모두를 선택한다.
(element 이름을 호출)

* { }
-> 모든 element를 선택한다.

section, h1 { }
-> section과 h1을 다중으로 선택한다.

#only { }
-> ID값을 가진 element를 선택한다.
(ID 호출은 '#'을 사용)

.widget { }, .center { }
-> Class값을 가진 element를 선택한다.
(Class 호출은 ' . ' 을 사용)

header h1 { }
-> header의 후손 element를 선택한다.

header > p { }.
-> header의 자식 element를 선택한다.

section + p { }.
-> section의 인접 형제 element를 선택한다.

section ~ p { }
-> section의 형제 element를 선택한다.

기본적으로 반드시 알아둬야 할 Selector들이다.

부모 셀렉터, 자식 셀렉터, 후손 셀렉터

위 그림과 같이, 부모-자식-후손 셀렉터를 구분 지어볼 수 있다.
이 그림을 코드로 나타내면,

  <div class="부모">
    부모 셀렉터
    <div class="자식">
      자식 셀렉터
      <div class="후손">
        후손 셀렉터
      </div>
     </div>
    </div>

위와 같이 나타낼 수 있는데,
이 코드를 인간의 언어로 풀어보자면
부모 셀렉터인 첫번째 div 안으로
자식 셀렉터인 div가 있고, 그 안으로
후손 셀렉터인 div가 있다.

FlexBox

아래 그림과 같이
일반적인 HTML 웹 구조는 위에서 아래로 정렬된다.
하지만, display: flex 를 사용하면 좌에서 우로 정렬되게 된다.

FlexBox를 적용할 땐 아래 태그를 부모 셀렉터에 적용한다.

display: flex
-> flexbox로 출력

flex-direction:
-> 정렬할 방향을 지정한다.

justify-content:
-> flex element를 가로선 상에서 정렬한다.

align-items:
-> flex element를 세로선 상에서 정렬한다.

.parentsFlex{
      display: flex;
      flex-direction: row; // flex 의 기본값
      }
.parentsFlex{
      display: flex;
      flex-direction: column; //flex의 수직형태.
      }

위와 같이 부모 셀렉터에 flex를 적용해주고,
자식 셀렉터에 적용해 부모 셀렉터 안에서 자식 셀렉터를 정렬하는 방법이 있다.

flex-grow / shrink / basis
-> 기본값은 0 / 1 / auto이고, 자식 셀렉터가 부모 셀렉터에서 차지하는 비율을
적용해줄 수 있다.

  #parentSelector {
      display: flex;
      }
      
  .children1 {
      flex: 6 0 0;
      }
      
  .children2.children3 {
      flex: 2 0 0;
      }

위와 같이 flex-grow / shrink /basis는
flex: grow shrink basis 순서로 적용할 수 있으며,
grow를 비율대로 넣어주게 되면,
자식 element가 그림과 같은 비율로 정렬되게 된다.
(grow와 shrink는 충돌이 있기때문에 한 요소만 변경한다.)
(basis는 auto가 defaultd이다.)