🎨 [ CSS 핵심 개념 정리 ]

---

🧩 [ Table 관련 태그 ]

태그	의미	설명
<tr>	🧱 행(row)	표의 한 줄(가로) 추가
<th>	🏷️ 제목셀(header)	표의 제목 셀(굵게+가운데 정렬)
<td>	📦 데이터셀(cell)	표의 일반 데이터 영역
colspan	🔗 열 병합	여러 열을 하나로 합침

---

🧭 [ 다양한 선택자들 ]

👬 [ 형제 선택자 ]

형제 관계의 자식 요소 중 특정 순서나 타입을 선택할 때 사용

선택자	설명
:nth-child(n)	형제 중 n번째 자식 선택
:nth-of-type(odd)	형제 중 홀수 번째 선택
:nth-of-type(even)	형제 중 짝수 번째 선택

.basicTable td:nth-child(1) {
    background-color: aqua;
}

✅ .basicTable 안의 td 중 첫 번째 열에 배경색 적용

---

⚙️ [ 속성 선택자 ]

특정 속성을 가진 요소를 선택할 때 사용

형태	설명
선택자[속성명]	해당 속성을 가진 요소 선택
선택자[속성명="값"]	속성값이 일치하는 요소 선택

.basicTable td[colspan] {
    text-align: center;
}

✅ colspan 속성을 가진 td의 텍스트를 가운데 정렬

---

🧱 [ overflow ]

하위 요소의 내용이 상위 요소 영역을 초과했을 때의 처리 방식

속성값	설명
visible	기본값, 넘친 내용이 그대로 표시됨
hidden	넘친 내용이 잘리고 숨겨짐
scroll	항상 스크롤바 표시
auto	넘칠 때만 스크롤바 표시
overflow-x, overflow-y	각각 가로/세로 스크롤 제어

---

🖼️ [ object-fit ]

이미지나 비디오를 지정한 크기 요소 안에 맞추는 방법

속성값	설명
fill	비율 무시, 요소 크기에 맞게 강제 채움
contain	비율 유지, 공백이 생길 수 있음
cover	비율 유지, 요소를 꽉 채움(잘릴 수 있음)
none	원본 크기 그대로 표시(잘릴 수 있음)

---

🌄 [ background (배경 속성) ]

속성	설명
background-image: url(경로)	배경 이미지 지정
background-repeat: repeat	기본값, 빈 공간 자동 채움
background-repeat: no-repeat	반복 없이 한 번만 표시
background-size: contain	비율 유지, 여백 생길 수 있음
background-size: cover	비율 유지, 여백 없이 채움(잘릴 수 있음)
background-attachment: fixed	배경 고정 (스크롤 시 이미지 고정)

---

🧪 [ 실습 예시 ]

✅ overflow, object-fit, background 속성은 웹 디자인의 시각적 완성도를 높이는 핵심 요소이다.

---