[TIL] CSS Selector

CSS Selector 심화

속성 선택자

• 태그[속성이름] : 속성 이름 에 해당되는 속성을 가진 태그를 모두 선택

  a[href] { }

• 태그[속성이름="변수"] : 속성 이름 의 속성값이 변수와 일치하는 태그를 선택

  a[href="https://velog.io/@tnghgks"] { }

• 태그[속성이름~="변수"] : 속성 이름 의 속성값 중에 변수 를 하나의 완전한 단어로 포함하는 태그를 선택

  a[href^="http"] {}

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

  a[href$=".pdf"]{}

• 태그[속성*="변수"] : 속성 의 속성값이 변수 를 포함하는 태그를 선택

  a[href$=".pdf"]{ }		

• 태그[속성|="변수"] : 속성 의 속성값이 변수 이거나 변수 로 시작하면서 뒤에 바로 ‘-’(하이픈) 기호가 있는 태그를 선택

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

실재로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동

• .foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택
• .foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택
• .foo:nth-child(3) : class="foo"인 엘리먼트 중 3번째 자식인 엘리먼트를 선택
• a:visited : 방문한 적이 있는 링크를 선택
  

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

• :hover : 사용자가 마우스를 요소 위에 올렸을 때 적용
• :active : 사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용
• :focus : 요소에 포커스가 있을 때 적용
• :checked : 선택한 상태의 라디오, 체크박스, 옵션 요소를 나타냄

input:checked+label{
  background-color: lightgreen;
}

가상 요소 선택자

가상 요소 선택자는 콜론이 2개(가상 클래스 선택자는 1개),레거시 브라우저 호환을 위한 선택

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

  div::before { }

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

  div::after { }

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

  div::selection { }

---

CSS Combinator

Combinator(복합 선택자, 연결자 혹은 결합자 )

선택자와 선택자를 결합해서 사용하는 선택자를 ‘콤비네이터’라고 함

• 자손(Descendant) 콤비네이터
  • 하위 선택자는 선택자 사이를 공백 을 사용하여 나타냄
  • 앞 요소의 자손을 선택함

  div a { }

• 자식(Child) 콤비네이터
  • 하위 선택자는 선택자 사이를 > 를 사용하여 나타냄
  • 앞 요소의 직계 자식을 선택함

  div a { }

• 인접 형제(Adjacent sibling) 콤비네이터
  • ‘형제’ 란 같은 부모를 가지는 요소
  • 인접 형제 콤비네이터는 선택자 사이를 + 를 사용하여 나타냄
  • 앞 요소 직후에 나오는 형제 선택자를 선택함

  div + ul { }

• 일반 형제(General sibling) 콤비네이터
  • 일반 형제 콤비네이터는 선택자 사이에 ~ 를 사용하여 나타냄
  • ~ 을 기준으로 앞 요소 이후 에 나오는 모든 뒤 요소 를 선택

  div ~ ul { }

---

Flex

flex

display 속성으로, 내부 자식 박스들의 배치에 영향을 미치는 내부 디스플레이 타입

flex-container에 사용하는 속성

• flex-container는 기본적으로 주축(Axis)을 가지며 기본 방향은 왼쪽에서 오른쪽
• 주축(Axis)이 시작하는 시작점을 flex-start, 중간을 center, 끝나는 곳을 flex-end

flex-direction

• flex-container가 사용할 주축과 정렬 방향
  • row : 주축을 행 방향
  • row-reverse : 주축을 행 방향으로 하되 축의 시작점을 역전
  • column : 주축을 열 방향
  • column-reverse : 주축을 열 방향으로 하되 축의 시작점을 역전

justify-content

• 주축(Axis)을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정
• display : flex 를 설정한 뒤에 사용

  justify-content: flex-start; // 주축의 시작점에 쌓아서 정렬
  justify-content: flex-end; // 주축의 끝점에 쌓아서 정렬
  justify-content: center; // 가운데 모여서 정렬
  justify-content: space-between; // 가용범위의 마진을 요소 사이사이 넣어서 정렬
  justify-content: space-around; // 가용범위의 마진을 요소 사이사이 넣고 양끝에도 넣음

Axis 와 Cross-Axis

• flex의 중심축 Axis
• flex의 중심축에 교차되는 축 cross-Axis

align-items, align-content

• align-items : cross-axis 를 기준으로 속성값을 주면 해당 방향으로 정렬
• align-content : cross-axis 축의 아이템들이 여러 줄일 때 사용 가능, 따라서 두 줄의 flex-wrap:wrap 인 상태에서 사용해야 함

.flex_container {
	display: flex;
	align-items: stretch;   // (기본값) 요소들을 container의 높이만큼 늘려서 배치
    align-items: center;   // 교차축의 가운데 정렬
    align-items: flex-start;   // 교차축의 시작점에 쌓아서 정렬
    align-items: flex-end;   // 교차축의 끝점에 쌓아서 정렬
}

flex-wrap

• flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성

.container {
  display: flex;
  flex-wrap: wrap;   // flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치
  flex-wrap: nowrap;   // (기본값) 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치
  flex-wrap: wrap-reverse;   // wrap 속성값과 동일하지만, 시작점과 끝점의 기준을 반대로
}

flex-flow

• flex-flow는 flex-direction, flex-wrap 속성의 단축 속성

.flex_container { // flex-direction만 사용
  flex-flow: row;
  flex-flow: row-reverse;
  flex-flow: column;
  flex-flow: column-reverse;
}
.flex_container { // flex-direction, flex-wrap 같이 사용
  flex-flow: row nowrap;
  flex-flow: column wrap;
  flex-flow: column-reverse wrap-reverse;
}

flex-item 사용하는 속성

flex-basis

• flex-item 의 크기를 정해주는 속성
• flex-basis : auto(기본값)

/* <'width'> 지정 */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

flex-grow

• flex-basis의 값에서 더 늘어나도 되는지 지정하는 값
• flex-grow  : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당
• flex-grow  : 2 →  특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 여백 공간

flex-shrink

• flex-grow 에 반대되는 개념
• 컨테이너의 공간이 줄어들때 flex-basis의 값에서 더 줄어들어도 되는지 지정하는 값
• 0의 값을 사용할 경우 컨테이너의 크기가 줄어도 값은 고정됨, 마이너스 숫자는 사용할 수 없으며 기본값은 1

flex

• flex-basis, flex-grow, flex-shrink 속성의 단축 속성

flex :1 1 300px; /* flex : flex-basis, flex-grow, flex-shrink */

align-self

• 부모의 align-items 속성을 덮어 flex-item 에게 개별적인 align-items 속성을 부여

order

• flex-item 들의 순서를 결정

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2; } // 요소에 각각 줌
main > nav     { width: 200px;  order: 1; }
main > aside   { width: 200px;  order: 3; }