CSS

[ CSS ] Grid

🔴 Why Grid? ⚪ 격자 무늬로 동일한 상하좌우 간격을 두고 아이템을 배치하고 싶을 때, flex를 사용하면 개별적으로 설정해줘야 하는 요소들이 너무 많으며, 아이템을 추가할 때마다 css를 추가해줘야 하는 번거로움이 있다. 🟠 CSS Grid Basic Concepts .father { display: grid; grid-template-columns: 250px 250px 250px; grid-template-rows: 100px 50px 300px; column-gap: 5px; row-gap: 10px; } 🟡 Grid Template Areas .grid { display: grid; grid-template-columns: auto 200px; grid-template-rows: 100p..

[ CSS ] Flexbox

🔴 Wrapper 속성 display: flex; flex-direction: row | column | row-reverse | column-reverse; justify-content: flex-start; align-items: flex-start; /* 한 줄인 아이템의 수직 정렬 */ align-content: flex-start; /* 두 줄 이상인 아이템의 수직 정렬 */ /* flex는 기본적으로 아이템을 한 줄에 배치시킨다. */ /* 아이템들이 한 줄에 들어가기 어려우면 크기를 변경시킨다. */ flex-wrap: nowrap | wrap; /* wrap 속성 적용 시, 아이템의 크기를 유지한다. */ 🟠 Child 속성 /* 수직 방향으로 하나의 child만 가운데 정렬 */ alig..

[ CSS ] CSS 고급 선택자

연결 선택자 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 하위 선택자 ◻️ 부모 요소에 포함된 하위 요소를 모두 선택한다. ◻️ 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { ... } 자식 선택자 ◻️ 하위 선택자와 다르게 자식 요소에만 스타일을 적용한다. section > p { ... } 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 인접 형제 선택자 ◻️ 형제 요소 중에서 첫 번째 동생 요소만 선택한다. h1 + p { coloir: blue; } ◻️ 즉, 무수히 많은 p 중에서 첫 번쨰로 나오는 p만 적용한다. 형제 선택자 ◻️ 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. h1 ~ p { c..