[Day 13] CSS Combinator & Flex

Combinator

 

CSS에서 선택자를 단독으로 사용하는 게 아니라

여러 개를 결합하는 쓰는 경우가 있는데, 이렇게 사용하는 선택자를 Combinator라고 한다.

 

컴비네이터의 종류로는

 

1. 자손(Descendant) 컴비네이터: 공백

2. 자식(Child) 컴비네이터: >

3. 인접 형제(Adjacent sibling)  컴비네이터: +

4. 일반 형제(General sibling) 컴비네이터: ~

 

 

아래 예시를 통해 퀵하게 익혀보자!

/*섹션 아래에 있는 모든 ul 태그*/
section ul {
    text-shadow: none;
} 

/*섹션 바래 아래에 있는 ul 태그*/
section > ul {
    text-shadow: none;
}


/*h1 바로 옆에 있는는 ul 태그만*/
h1 + ul {
    color: red;
}

/*h1 이후에 나오는 모든 ul 태그*/
h1 ~ ul {
   color:red;
}

 

 

 

---

Flex   flex-wrap

 

CSS 가운데 정렬을 할 때 처음에 배웠었던 플렉스...!

이전에 margin, position, float 등등의 배치 방법에 배우고나서

flex로 넘어가게 되니 감회가 새로웠다!

 

이번 포스팅에서는 플렉스 중에서도 잘 모르고 쓸줄 몰랐던 flex-wrap에 대해 다룰 것이다.

 

flex-wrap은 플렉스 컨테이너가 아이템을 한 줄에 다 정렬하기가 넘칠 때

자동적으로 줄바꿈을 해주는 속성이다.

어떻게 줄바꿈을 해줄지에 대해서는

 

nowrap (디폴트)

wrap

wrap-reverse

 

밸류가 있다.

 

wrap 설정 시

아이템의 가로 합이 콘테이너의 가로 크기를 넘어갈 때 다음 줄로 넘어간다.

출처: mdn

 

플렉스로 실습해본 것들!

See the Pen flex by Dahee Jo (@daheejo) on CodePen.

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.