/* appMain 안에 class 속성 값에 __enTitle이라는 부분 문자열을 포함하는 요소를 선택 */
.appMain [class*="__enTitle"]
띄어쓰기로 구분된 선택자 (각 태그가 독립적인 요소로 선택됨):
h1 .container .item
은h1
태그 내부에 있는 .container
클래스 내부에 있는 .item
클래스".item
클래스는 .container
클래스의 하위 요소로만 선택띄어쓰기 없이 연결된 선택자 (여러 태그가 함께 포함된 요소를 선택함):
h1.container.item
은h1
태그에 동시에 .container
클래스와 .item
클래스가 모두 적용된 요소"를 선택한다..container
클래스와 .item
클래스가 동시에 적용된 요소만 선택align-content (교차축에 대한 정렬) 속성은 Flex 컨테이너 내부에서 플렉스 아이템들의 수직 정렬을 설정
이 속성은 다수의 줄(플렉스 라인)이 있는 경우에만 동작
⚠️ 주로 flex-wrap 속성이 wrap으로 설정된 경우에 영향을 미칩니다.
수직 방향 ⬇️ 으로 아이템들을 정렬하는 속성으로 사용
justify-content (주축에 대한 정렬) 속성은 Flex 컨테이너 내부에서 플렉스 아이템들의 수평 정렬을 설정
이 속성은 주로 한 줄에 모든 플렉스 아이템이 위치할 때 사용주축에 대한 설정
수평 방향 ➡️ 으로 아이템들을 정렬하는 속성으로 사용
따라서, align-content는 수직 방향에서 여러 줄을 가지는 Flex 컨테이너의 아이템 정렬에 사용되고, justify-content는 수평 방향에서 단일 줄의 Flex 컨테이너의 아이템 정렬에 사용됩니다.
align-items 속성은 Flex 컨테이너 내부의 모든 플렉스 아이템을 수직 방향에서 가운데로 정렬 / 주로 한 줄에 모든 플렉스 아이템이 위치할 때 사용.
각 줄에 있는 플렉스 아이템들을 개별적으로 수직 방향에서 가운데로 정렬하는 것이 아니라, 모든 플렉스 아이템을 하나의 그룹으로 간주하여 그룹 전체를 수직 방향에서 가운데로 정렬합니다.
align-content 속성은 여러 줄(플렉스 라인)을 가지는 Flex 컨테이너에서 플렉스 라인들을 수직 방향에서 가운데로 정렬 / 주로 flex-wrap 속성이 wrap으로 설정된 경우에 영향을 미침
align-content는 여러 줄의 플렉스 라인들을 감싸는 컨테이너 자체를 수직 방향에서 가운데로 정렬합니다. 따라서, 플렉스 라인들 사이의 공간을 동일하게 분배하며, 여러 줄의 플렉스 아이템들을 가운데로 정렬합니다.
align-items: center;는 단일 줄의 플렉스 아이템을 수직 방향에서 가운데로 정렬하고,
align-content: center;는 여러 줄의 플렉스 라인을 수직 방향에서 가운데로 정렬합니다.
.news__videoContainer {
margin-top: var(--spacing-sm);
}
.iframeWrapper {
aspect-ratio: 16 / 9;
}
결과적으로, .iframeWrapper 요소는 16:9 비율의 박스를 생성하고, 내부의 iframe은 부모 요소에 맞게 확장되어 반응형으로 보여짐