9.15 TIL (selector, combinator, flex)

Selector

태그[속성이름]

[속성이름]에 해당되는 속성을 가진 태그를 모두 선택.

a[href] {
	font-size: 10px;
}

태그[속성이름="변수"]

속성이름의 속성값이 변수와 일치하는 태그를 선택.

a[href="http://www.paullab.co.kr"] {
    font-size: 32px;
}

태그[속성이름~="변수"]

속성이름의 속성값 중에 변수를 하나의 완전한 단어로 포함하는 태그를 선택

a[class~="weniv"] {
    color: black;
}

태그[속성이름^="변수"]

속성의 속성값이 변수로 시작하는 태그를 선택

a[class^="weniv"] {
    color: black;
}

태그[속성이름$="변수"]

속성의 속성값이 변수로 끝나는 요소 선택

a[class$="kr" 또는 ".pdf, .png"] {
    color: black;
}

태그[속성이름*="변수"]

속성의 속성값이 변수를 포함하는 요소 선택

a[class*="weniv"] {
    color: black;
}

~=와 *=의 차이는 *=는 값을 포함하기만 하면 되지만, ~=는 완전한 단어여야 한다.

태그[속성이름|="변수"]

속성의 속성값이 변수 이거나 변수로 시작하면서 하이픈(-)기호가 있는 태그를 선택

a[href|="http"]{
    color: black;
}

가상 클래스 선택자

:first-child
:last-child
:nth-child(n)
:nth-child(even,odd)
:hover
:active
:focus 클릭이나 탭과 같은 폼컨트롤시 적용
:checked

가상 요소 선택자

존재하지 않는 가상요소를 생성한다.

::before
::after
::selection

Combinator

자손 콤비네이터

• 공백을 통해 나타낸다.

자식 콤비네이터

• '>' 를 사용하여 나타낸다.

인접형제 콤비네이터

• +를 통해 나타낸다. 같은 부모를 가지는 요소.
• +를 기준으로 전방 선택자 직후에 나오는 후방 형제 선택자를 선택한다.

일반 형제 콤비네이터

• ~를 통해 나타낸다.
• ~를 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택!!

Flex

• 블록레벨 요소의 성질을 가지며, 주로 부모의 속성을 통해 자식들을 컨트롤.
• flex는 자신의 직계자식 까지만 영향을 미친다.

주축과 정렬방향을 알아야 정리를 할 수 있겠다.

flex-start, center, flex-end

flex-direction

• row : 주축을 행 방향으로!!
  
• row-reverse : 시작점을 역전시킨다.
  
• column : 주축을 열 방향으로.
  
• column-reverse : 주축을 열방향으로. start지점이 역전된다.

justify-content

주축을 기준으로 배열의 위치를 조정하거나, 간격을 설정할 수 있다.

.container {
  display: flex;
  /* justify-content: flex-start; */
  /* justify-content: flex-end; */
	/* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
}

교차축

주축이 있으면 교차축도 있어야지요.

align-items, align-content

• align-items : 교차축을 기준으로 이동한다.
• align-content : 교차축의 아이템들이 여러줄일 경우 사용 가능. 두 줄의 flex-wrap:wrap인 상태에서 사용해야 한다.
  

flex-wrap

flex-container는 자동으로 줄바꿈을 해주지 않는다.
그래서 자식요소를 감싸서 줄바꿈을 도와주는 것이 바로 flex-wrap이다.

flex-flow

flex-direction과 flex-wrap을 같이 사용하기 위한 단축속성~

flex-item에 사용하는 속성들

container의 상태에 따라 item의 레이아웃을 결정하는 속성들이다.

flex-basis

item의 크기를 지정. width,height와 다른 점은 axis방향에 따라 달라지고 유연한 크기이다.
기본값은 auto이고 width, height값은 무시됨.

flex-grow

basis 값에서 더 늘어나도 되는지 지정하는 값으로 남은 여백을 할당.
flex-grow 값에 따라 비율로 공간의 크기를 할당받는다.
flex-grow:0 을 주게되면 여백 공간이 아니라 전체 공간을 분할한다.

곧 grid도 배울텐데 ㅎㅎㅎ
flex는 1차원 배열
grid는 2차원 배열로 생각해보기!!