태그[속성]
: 해당하는 속성을 가진 모든 태그를 선택
태그[속성="변수"]
: 속성의 값이 변수와 동일한 태그 선택
태그[속성~="변수"]
: 속성의 값이 변수를 포함하는 태그 선택 (단어 기준)
태그[속성^="변수"]
: 속성의 값이 변수로 시작하는 태그 선택
태그[속성$="변수"]
: 속성의 값이 변수로 끝나는 태그 선택
태그[속성*="변수"]
: 속성의 값이 변수를 포함하는 태그 선택 (문자열 기준)
~=
와*=
의 차이점?
~=
는 단어 기준으로 선택,*=
은 문자열 기준으로 선택함
abcd를 찾는다고 했을 때,~=
는 단어 기준으로 선택하기 때문에 abcde나 abcdef와 같은 것들을 같다고 판단하지 않는다. 그러나*=
는 문자열 기준으로 선택하기 때문에 abcd, abcde, abcdef 등 abcd라는 글자가 있기만 하면 선택하게 된다.
:hover
:마우스를 요소 위로 올렸을 때 작동되는 가상 클래스
:active
요소를 누르거나 클릭할 때 작동되는 가상 클래스
:focus
요소에 포커싱되어 있을 때 작동되는 가상 클래스
input과 같은 form control에서 사용됨
종류: ::after
, ::before
마크업을 사용하지 않고 콘텐츠를 삽입하는 방법으로 쓸 수 있음
VoiceOver에서 읽히기도 하고 읽히지 않기도 함
정렬 방향을 지정하는 속성
종류
row
: 요소들이 가로 방향으로 배치row-reverse
: 요소들이 가로 방향으로 역순 배치column
: 요소들이 세로 방향으로 배치column-reverse
: 요소들이 세로 방향으로 역순 배치종류
flex-start
: 앞에서부터 정렬flex-end
: 끝에서부터 정렬center
: 중앙 정렬space-between
: 아이템들 사이에 동일한 간격 부여space-around
: 아이템들 주위에 동일한 간격 부여💡
flex-end
와row-reverse
의 차이점
flex-end
: 정렬이 끝으로 된 것일뿐 순서에 영향을 미치지 않는다row-reverse
: 원래 입력한 것의 반대로 뒤집히며 순서에 영향을 미침 (입력한 순서대로 끝에서부터 시작)
container를 빠져나가는 아이템들을 정렬하는 방법
종류
nowrap
: 부모의 너비보다 더 큰 요소들을 부모 요소에 맞게 한 줄로 맞춤wrap
: 부모를 빠져나가는 요소들을 줄 바꿈 처리로 정렬wrap-reverse
: wrap으로 정렬된 요소를 뒤집어서 나타냄세로축 기준으로 정렬
한 줄일 때 중앙 정렬 용도로 사용 (flex-wrap: wrap 상태)
종류
stretch
: 아이템들이 세로 방향으로 부모 높이에 맞게 늘어남flex-start
: 시작점으로 정렬flex-end
: 끝으로 정렬center
: 가운데로 정렬세로축을 기준으로 정렬하나 여러 줄일 때 사용 (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;