css selector 심화

*: 전체
^ : 시작,반대
$ : 끝

div[class]{
	font-size: 10px;
    }
/* class 가지고 있는 모든 div 선택*/

a[href]{
	font-size: 10px;
    }
/* 링크 attribute로 가지고 있는 a태그 선택*/
   

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

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

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

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

속성의 attribute 값이 변수를 포함하는 태그 선택

위 두가지는 무슨 차이점이 있을까?
~= 는 완전한 단어로 포함되어야한다
*는 그냥 값을 포함하고 있으면 된다

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

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

a[href^="http"]{
	color: red;
}

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

속성의 attribute 값이 변수로 끝나는 태그 선택

a[href$="png"]{
	color: orange;
}

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

속성의 attr값이 변수 이거나, 변수로 시작하면서 뒤에 바로 -(하이픈) 기호 있는 태그 선택

a[class|="header"]{
    color: black;
}

가상 클래스 선택자(Pseudo class selector)

• 실제로 html에 존재하지 않는 클래스이지만, 마치 클래스가 존재하는 것처럼 작동한다고 하여 가상 클래스 선택자로 부른다.

• .foo:first-child : class="foo"

• .foo:nth-child(3) : class="foo"

• .foo:nth-child(odd) : class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 모두 선택합니다.

• .foo:nth-child(even) : class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 모두 선택합니다.

• .foo:nth-child(n) : class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 모두 선택합니다. n은 0부터 1씩 증가합니다. (0, 1, 2, 3, 4, 5 … )

• .foo:nth-child(3n) : class="foo"인 엘리먼트 중 3번째 자식마다 모두 선택합니다. (3x0, 3x1, 3x2, 3x3, 3x4, 3x5 … )

• .foo:nth-child(3n+1) : class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 모두 선택합니다. (3x0+1, 3x1+1, 3x2+1, 3x3+1, 3x4+1, 3x5+1 … )

nth-child 시리즈는 여백 조절할때 자주 쓴다고 한다.

• a:visited : 방문한 적이 있는 링크를 선택. but 개인정보 차원에서 문제가 많음

부정 가상 선택자와 같은 최신에 채택된 선택자도 있다.

li:not(.classname){
	color: red;
   }

상호작용을 위한 가상클래스

• :hover

• :active
  사용자가 요소를 실행할때 (버튼을 누르거나 링크 클릭할때) 적용

• :focus
  요소에 포커스가 있을때 적용된다. 클릭할 수 있는 요소나 폼 컨트롤(input.select등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스 가능

• :checked
  선택한 상태의 라디오,체크박스,옵션 요소

가상 클래스 선택자: 클래스가 없는데 있는것처럼 처리 (콜론1개)
가상 요소 선택자: 요소가 없는데 있는것처럼 처리 (콜론2개)

가상 요소 선택자

• ::before
  요소의 맨 첫번째 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성합니다.

• ::after
  요소의 맨 마지막 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성합니다.

p::after{
	content: "만원"
}

• ::selection
  사용자가 선택하여 하이라이트 된 상태의 텍스트를 선택합니다.

가상 요소 선택자는 마크업에 없는 요소를 삽입
가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입

css combinator

* 자손 콤비네이터

하위 선택자는 선택자 사이를 공백을 사용하여 나타냄.
section 태그 안에있는 모든 ul 태그 가르킴.

section ul {
    text-shadow: none;
}

* 자식 콤비네이터>

하위 선택자는 선택자 사이를 > 사용하여 나타냄
앞 요소의 자식인 바로 하위 요소 선택

section > ul {
    text-shadow: none;
}

자손은 자식을 포괄하는 의미.

* 인접 형제 콤비네이터+

인접 형제 콤비네이터는 선택자 사이를 + 사용하여 나타낸다.
+기준으로 전방 선택자 직후에 나오는 후방 형제 선택자 선택

h1 + ul {
    color: red;
}

* 일반 형제 콤비네이터~

선택자 사이에 ~ 사용한다.~ 기준으로 앞 요소 이후에 나오는 모든 뒤 형제 요소 선택

https://flukeout.github.io/
접시게임 해보기

Flex

드디어 갓-플렉스

• 내부 디스플레이 타입(grid도)
  1차원 배열은 flex 먼저 고려해보기
  2차원 배열은 grid 먼저 고려해보기

• block레벨 요소의 성질을 가지며, 주로 부모의 속성을 통해 자식들을 컨트롤 한다. 이때 부모를 flex-container. 자식들은 flex-item

• flex는 자신의 직계자식까지만 영향을 미친다.

display: inline-flex
인라인 요소로 차지하게 하는 플렉스

flex-container는 기본적으로 주축(axis) 가지고, 왼쪽에서 오른쪽 향함
시작점 flex-start. 끝점을 flex-end

flex-direction : 사용할 주축과 정렬 방향 결정하기

row: 주축을 행 방향으로 (기본값)

• row-reverse : 주축을 행 방향으로 하되 축의 시작점을 역전
  즉, flex-direction : row 였을때의 flex-start가 flex-end로 변경됨

column : 주축을 열 방향으로

• column-reverse : 주축을 열 방향으로 하되 축의 시작점을 역전
  즉, flex-direction : column 이었을때의 flex-start가 flex-end로 변경된다
  

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: cross-axis 기준으로 이동
align-content: 컨테이너의 cross-axis 축의 아이템들이 여러줄일때 사용 가능. 두줄의 flex-wrap: wrap 상태에서 사용해야함

.container {
  display: flex;
	/* align-items: stretch; (기본값) */ 
  /* align-items: center; */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
}

• flex-wrap
  flex-item 넓이 합이 컨테이너보다 클 경우 자식요소를 줄바꿈하는 기능이다.

• flex-flow
  flex-direction과 flex-wrap은 같이 사용하는 일이 많기 때문에 flex-flow 속성을 통해 단축하여 사용 가능함

.container {
  display: flex;
	flex-flow: wrap column; 
	/* flex-wrap: wrap; flex-direction: column; 과 동일합니다. */
}

flex-item에 사용하는속성

(이해 못함...)

• flex-basis
  flex-item의 크기 지정. width, height와 다른점은 axis 방향에 따라 달라진다는 것 그리고 내부의 컨텐츠에 따른 유연한 크기
  flex-basis 값이 적용되어 있다면 width, height 값은 무시됨
  
• flex-grow
  flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 flex-container의 남은 여백을 할당하도록 합니다.

1)flex-grow  : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받습니다.

2) flex-grow  : 2 →  특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간을 할당받습니다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라집니다.

• flex-shrink
  다음 시간에..