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-startflex-endcenterspace-betweenspace-aroundspace-evenly(IE 지원 X)
✔️ 가운데 정렬 공식
display: flex;
justify-content: center;
align-items: center;