TIL 04.13

1. CSS 선택자

1️⃣ 속성 선택자

• 태그[속성]
  : 해당하는 속성을 가진 모든 태그를 선택

• 태그[속성="변수"]
  : 속성의 값이 변수와 동일한 태그 선택

• 태그[속성~="변수"]
  : 속성의 값이 변수를 포함하는 태그 선택 (단어 기준)

• 태그[속성^="변수"]
  : 속성의 값이 변수로 시작하는 태그 선택

• 태그[속성$="변수"]
  : 속성의 값이 변수로 끝나는 태그 선택

• 태그[속성*="변수"]
  : 속성의 값이 변수를 포함하는 태그 선택 (문자열 기준)

  ~=와 *=의 차이점?
  ~=는 단어 기준으로 선택, *=은 문자열 기준으로 선택함
  abcd를 찾는다고 했을 때, ~=는 단어 기준으로 선택하기 때문에 abcde나 abcdef와 같은 것들을 같다고 판단하지 않는다. 그러나 *=는 문자열 기준으로 선택하기 때문에 abcd, abcde, abcdef 등 abcd라는 글자가 있기만 하면 선택하게 된다.

2️⃣ 가상 클래스 선택자

:hover
:마우스를 요소 위로 올렸을 때 작동되는 가상 클래스

:active
요소를 누르거나 클릭할 때 작동되는 가상 클래스

:focus
요소에 포커싱되어 있을 때 작동되는 가상 클래스
input과 같은 form control에서 사용됨

3️⃣ 가상 요소 선택자

종류: ::after, ::before
마크업을 사용하지 않고 콘텐츠를 삽입하는 방법으로 쓸 수 있음
VoiceOver에서 읽히기도 하고 읽히지 않기도 함

---

2. flex

1️⃣ flex-direction

정렬 방향을 지정하는 속성
종류

• row: 요소들이 가로 방향으로 배치
• row-reverse: 요소들이 가로 방향으로 역순 배치
• column: 요소들이 세로 방향으로 배치
• column-reverse: 요소들이 세로 방향으로 역순 배치

2️⃣ justify-content

종류

• flex-start: 앞에서부터 정렬
• flex-end: 끝에서부터 정렬
• center: 중앙 정렬
• space-between: 아이템들 사이에 동일한 간격 부여
• space-around: 아이템들 주위에 동일한 간격 부여

💡 flex-end와 row-reverse의 차이점

• flex-end: 정렬이 끝으로 된 것일뿐 순서에 영향을 미치지 않는다
• row-reverse: 원래 입력한 것의 반대로 뒤집히며 순서에 영향을 미침 (입력한 순서대로 끝에서부터 시작)
  

3️⃣ flex-wrap

container를 빠져나가는 아이템들을 정렬하는 방법
종류

• nowrap: 부모의 너비보다 더 큰 요소들을 부모 요소에 맞게 한 줄로 맞춤
• wrap: 부모를 빠져나가는 요소들을 줄 바꿈 처리로 정렬
• wrap-reverse: wrap으로 정렬된 요소를 뒤집어서 나타냄

4️⃣ align-items / align-content

align-items

세로축 기준으로 정렬
한 줄일 때 중앙 정렬 용도로 사용 (flex-wrap: wrap 상태)

종류

• stretch: 아이템들이 세로 방향으로 부모 높이에 맞게 늘어남
• flex-start: 시작점으로 정렬
• flex-end: 끝으로 정렬
• center: 가운데로 정렬

align-content

세로축을 기준으로 정렬하나 여러 줄일 때 사용 (flex-wrap: wrap 상태에서 사용)

종류

• stretch: 아이템들이 세로 방향으로 부모 높이에 맞게 늘어남
• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly (IE 지원 X)

✔️ 가운데 정렬 공식

display: flex;
justify-content: center;
align-items: center;