📌 웹카페 만들면서 배우는 css

/* appMain 안에 class 속성 값에 __enTitle이라는 부분 문자열을 포함하는 요소를 선택 */
.appMain [class*="__enTitle"]

🧷 띄어쓰기 유무에 따라 사용되는 CSS 선택자의 차이에 따라 선택되는 요소의 범위

• 띄어쓰기로 구분된 선택자 (각 태그가 독립적인 요소로 선택됨):
  

  • 선택자 간에 띄어쓰기가 있는 경우, 각 선택자는 독립적으로 해석된다.
    이는 선택자들을 계층적으로 해석하는 것을 의미한다.
    
    ex) h1 .container .item은
    "h1 태그 내부에 있는 .container 클래스 내부에 있는 .item 클래스"
    를 선택합니다.
    이 경우, .item 클래스는 .container 클래스의 하위 요소로만 선택

• 띄어쓰기 없이 연결된 선택자 (여러 태그가 함께 포함된 요소를 선택함):
  

  • 선택자 간에 띄어쓰기가 없는 경우, 모든 선택자를 함께 포함한 요소를 선택한다.
    이는 선택자들을 조합하여 하나의 선택자로 해석하는 것을 의미한다.
    
    ex) h1.container.item은
    "h1 태그에 동시에 .container 클래스와 .item 클래스가 모두 적용된 요소"를 선택한다.
    이 경우, .container 클래스와 .item 클래스가 동시에 적용된 요소만 선택

---

🧷 align-content 와 justify-content 차이점

접기/펼치기 - align-content 와 justify-content는 모두 Flexbox 레이아웃에서 사용되는 속성이다. 이 두 속성은 각각 수직 방향(세로)과 수평 방향(가로)에서 아이템들을 정렬하는 데에 사용되지만 동작 방식과 적용 대상의 차이가 있다.

• align-content (교차축에 대한 정렬) 속성은 Flex 컨테이너 내부에서 플렉스 아이템들의 수직 정렬을 설정
  이 속성은 다수의 줄(플렉스 라인)이 있는 경우에만 동작
  ⚠️ 주로 flex-wrap 속성이 wrap으로 설정된 경우에 영향을 미칩니다.
  수직 방향 ⬇️ 으로 아이템들을 정렬하는 속성으로 사용

• justify-content (주축에 대한 정렬) 속성은 Flex 컨테이너 내부에서 플렉스 아이템들의 수평 정렬을 설정
  이 속성은 주로 한 줄에 모든 플렉스 아이템이 위치할 때 사용주축에 대한 설정
  수평 방향 ➡️ 으로 아이템들을 정렬하는 속성으로 사용

따라서, align-content는 수직 방향에서 여러 줄을 가지는 Flex 컨테이너의 아이템 정렬에 사용되고, justify-content는 수평 방향에서 단일 줄의 Flex 컨테이너의 아이템 정렬에 사용됩니다.

---

🧷 align-items: center; 와 align-content: center; 차이점

접기/펼치기 - 모두 Flexbox 레이아웃에서 수직(세로) 방향에서 아이템을 가운데 정렬하는 속성이지만 그들의 동작 방식과 적용 대상의 차이점이 있다.

• align-items 속성은 Flex 컨테이너 내부의 모든 플렉스 아이템을 수직 방향에서 가운데로 정렬 / 주로 한 줄에 모든 플렉스 아이템이 위치할 때 사용.
  각 줄에 있는 플렉스 아이템들을 개별적으로 수직 방향에서 가운데로 정렬하는 것이 아니라, 모든 플렉스 아이템을 하나의 그룹으로 간주하여 그룹 전체를 수직 방향에서 가운데로 정렬합니다.

• align-content 속성은 여러 줄(플렉스 라인)을 가지는 Flex 컨테이너에서 플렉스 라인들을 수직 방향에서 가운데로 정렬 / 주로 flex-wrap 속성이 wrap으로 설정된 경우에 영향을 미침
  align-content는 여러 줄의 플렉스 라인들을 감싸는 컨테이너 자체를 수직 방향에서 가운데로 정렬합니다. 따라서, 플렉스 라인들 사이의 공간을 동일하게 분배하며, 여러 줄의 플렉스 아이템들을 가운데로 정렬합니다.
  

align-items: center;는 단일 줄의 플렉스 아이템을 수직 방향에서 가운데로 정렬하고,
align-content: center;는 여러 줄의 플렉스 라인을 수직 방향에서 가운데로 정렬합니다.

---

📖 aspect-ratio

.news__videoContainer {
  margin-top: var(--spacing-sm);
}

.iframeWrapper {
  aspect-ratio: 16 / 9;
}

• 반응형으로 16:9 비율의 iframe을 만들기 위한 CSS
  여기서는 16:9 비율을 설정하고 있으므로, .iframeWrapper 요소는 너비에 비해 세로로 높이가 자동으로 조정

결과적으로, .iframeWrapper 요소는 16:9 비율의 박스를 생성하고, 내부의 iframe은 부모 요소에 맞게 확장되어 반응형으로 보여짐