[11일차] border-collapse / table / ::before / ::after / transition

1. 표 만들기 / table

행(tr)과 열(td 또는 th)로 구성

<table>은 데이터를 행과 열로 정리할 때 쓰는 구조화 태그입니다.
웹디자인에서 일정, 리스트, 통계 등 다양한 데이터 표현에 필수입니다.

---

■ 외곽선 겹치기 border-collapse:collaps

기본 값

border-collapse:collaps 설정 후

내용없이 공백 사용 가능 <td></td>

---

2. ::before / ::after

before = 앞 / after = 뒤

꼭 ! content: 를 사용해야하며, 공백으로라도 " "; 둬야합니다.

---

display: block 할 경우

---

3. transition

UI 요소(버튼, 페이지 등)가 한 상태에서 다른 상태로 전환될 때 사용되는 애니메이션 또는 시각적 효과.

예: 버튼을 클릭하면 색이 바뀌거나, 페이지가 페이드아웃되고 다음 페이지가 들어오는 효과 등.

---

문제 풀기

🔗 CodePen 트랜지션 예제 v1 만들기 1: https://codepen.io/jangka44/pen/VXbrrX
🔗 CodePen 트랜지션 예제 v1 만들기 2: https://codepen.io/jangka44/pen/RMVjxB
🔗 CodePen 트랜지션 예제 v1 만들기 3: https://codepen.io/jangka44/pen/PRmOQX
🔗 CodePen 트랜지션 예제 v1 만들기 4: https://codepen.io/jangka44/pen/geWXeZ

---

🔗 (▼너비가 늘어나는데 3초, 줄어드는데 1초가 걸리게 해주세요▼)
🔗 CodePen 문제: https://codepen.io/jangka44/pen/RwwRpJr

---

🔗 (▼토글 사이드 바 만들기 작업 3▼)
🔗 CodePen 문제: https://codepen.io/jangka44/pen/OJMOvVR