[멋사 프론트엔드 스쿨]9월 15일 목요일 TIL_CSS Selector 심화, CSS Combinator, Flex

아 시간 진짜 빠르네 벌써 목요일이라니!!

CSS Selector 심화

출처 : 튜토리얼로 배우는 HTML & CSS / 맨 마지막에 있는 body>h1은 직계자식입니다. 위 이미지가 틀린 내용입니다.

1. 속성 선택자

1. 태그[속성이름]
   a[href] {
    font-size:30px ;
   }
2. 태그[속성이름="변수"]
   공백을 포함하지 않기 때문에 클래스(변수)하나만 가진 요소가 선택된다
   a[href="https://developmentbirdfoot.tistory.com/] {
    font-size: 50px;
   }
3. 태그[속성이름~="변수"]
   공백을 포함해 변수를 선택한다
4. 태그[속성^="변수"]
   변수로 시작하는 태그를 선택한다
5. 태그[속성$="변수"]
   변수로 끝나는 요소를 선택한다
6. 태그[속성*="변수"]
   *~= 과 다른 점은 ~은 단어를 기준으로 ~은 문자열을 기준으로 선택한다
   ex) [app] ~는app만 선택, *은 appple apps도 선택
7. 태그[속성|="변수"]
   변수이거나 변수로 시작하면서 뒤에 바로 '-'하이픈 기호가 있는 태그를 선택한다

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

<ul>
 <li class="속성">1</li> <!--.foo:first-child-->
 <li class="속성">2</li>
 <li class="속성">3</li> <!--.foo:nth-child(3)-->
 <li class="속성">4</li>
 <li class="속성">5</li> <!--.foo:last-child-->
</ul>

1. 속성:nth-child(odd)
   홀수번째 자식 엘리먼트
2. 속성:nth-child(even)
   짝수번째 자식 엘리먼트
3. 속성:nth-child(n)
   n번째 자식 엘리먼트 (0,1,2,3,4....)
4. 속성:nth-child(3n)
   3번째 자식마다 (0,3,6,9,12....)
5. 속성:nth-child(3n+1) (1,4,7,10,13)

a:visited 방문한 적이 있는 링크를 선택한다

(!!?? 사생활 침해의 우려로 브라우저에서 차단된다)

 

https://developer.mozilla.org/ko/docs/Web/CSS/:active

:active - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/:enabled

:enabled - CSS: Cascading Style Sheets | MDN

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

:hover 요소에 마우스를 갖다대면 적용된다

:active 요소를 실행할 때(버튼,링크)

:focus 요소에 포커스가 있을 때

:checked 라디오, 체크박스, 옵션 요소 선택했을 때

 

3. 가상 요소 선택자

::before 요소의 첫번째 자식

::after 요소의 마지막 자식

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

 

가상 클래스 선택자와 가상요소 선택자의 차이

• 가상클래스 선택자는 콜론이 하나 : 가상 요소 선택자는 콜론이 2개 ::
  간혹 가상 요소 선택자가 1개인 경우는 레거시 브라우저 호환을 위해
• 가상 요소 선택자는 마크업 없는 요소를 삽입
  브라우저,OS 스크린리더에 따라 가상 요소 선택자를 읽을수도 있고 안 읽을수도 있다

https://flukeout.github.io/# level11부터

CSS Diner

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

CSS Combinator

1. Descendant combinator 자손 콤비네이터
   공백으로 나타냄
2. Child combinator 자식 콤비네이터
   > 를 사용
3. Adjacent sibling combinator 인접 형제 콤비네이터
   +를 사용 전방 선택자 직후 나오는 후방 형제 선택자만 선택된다
4. General sibling combinator 일반 형제 콤비네이터
   ~ 앞 요소 이후 나오는 모든 뒤 요소를 선택

Flex

만능의 플렉스

row: axis 주축 방향

row-reverse: 거꾸로

.container {
  display: flex;
  flex-direction : row;
}

.container {
  display: flex;
  flex-direction : row-reverse;
}

column: 열 방향

column-reverse: 열 방향 역으로

 

.container {
  display: flex;
  flex-direction : column;
}

.container {
  display: flex;
  flex-direction : column-reverse;
}

justify-content

Axis,Cross-Axis

align-items,align-content

flex-wrap

flex-flow

 

https://flexngrid.com/

flexngrid

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

 

숙달의 기준은 최소 10번은 해보는 것