1. CSS 선택자

1️⃣ 속성 선택자

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

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

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

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

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

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

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

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-endrow-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;

0개의 댓글

Powered by GraphCDN, the GraphQL CDN