[CSS] CSS 중급(Selector, Flex-box)

CSS 중급

Select

기본 선택자

• 전체 선택자

  모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.

  구문: * ns|* *|*

  예제: *은 문서 내의 모든 요소와 일치합니다.

• 유형 선택자

  주어진 노드 이름을 가진 모든 요소를 선택합니다.

  구문: elementname

  예제: input은 모든 <input>요소와 일치합니다.

• 클래스 선택자

  주어진 class 특성을 가진 모든 요소를 선택합니다.

  구문: .classname

  예제: .index는 “index” 클래스를 가진 모든 요소와 일치합니다.

• ID 선택자

  id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.

  구문: #idname

  예제: #toc는 “toc” ID를 가진 요소와 일치합니다.

• 특성 선택자

  주어진 특성을 가진 모든 요소를 선택합니다.

  구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

  예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.

그룹 선택자

• 선택자 목록

  ,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다. 구문: A, B 예제: div, span은 모든 <span> 과 <div>요소와 일치합니다.

결합자

• 후손 결합자

  ` ` (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. 구문: A B 예제: div span은 <div> 요소 안에 위치하는 모든 <span>요소와 일치합니다.

• 자식 결합자

  > 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.

  구문: A > B

  예제: ul > li는 <ul> 요소 바로 아래에 위치하는 모든 <li> 요소와 일치합니다.

• 일반 형제 결합자

  ~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.

  구문: A ~ B

  예제: p ~ span은 <p>요소를 뒤따르는 모든 <span>요소와 일치합니다.

• 인접 형제 결합자

  + 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.

  구문: A + B

  예제: h2 + p는 <h2>바로 뒤에 위치하는 <p> 요소와 일치합니다.

Flexbox

CSS의 꽃이라 불리는 Flexible Box module, 일명 flexbox는 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계됐다.

- flexbox의 두 개의 축

​ 수평

- container에 적용 가능한 속성값

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

- item에 적용 가능한 속성값

• order
• flex-grow
• flex-shrink
• flex
• align-self

참고 사이트

mdn css selector 문서

mdn css flexbox 문서

드림코딩 유튜브

CSS Tricks for Flexbox