🥨 HTML - 테이블을 이용한 달력 만들기

코드 정리

🔎구조

1. 시맨틱하게 나누기

   1. header에 year
   2. main 에 table 6개 , table 6개 를 section 에 감싸줌.

2. 테이블 생성 (6개)

   1. caption 에 month
   2. th에 week
   3. tr 에 day
      또한 SAT부터 1일이라면 이전은 tr태그와 공백을 함께 써주었다.

3. 1~3월과 4~6월 두 부분으로 나누기 위해 밑의 코드를 넣어줌.

<tr>
  <th colspan="7"></th>
</tr>

🔎CSS

1. 가운데 정렬

   1. header태그에 있는 h1의 텍스트를 가운데 정렬 👉 text-align:center;
   2. table 태그의 calendar를 display:inline-block;으로 설정 (직접적으로 설정해줘야하는 듯? table 태그를 둘러싼 wrpper에 적용해보니 inline-block으로 되긴 했으나 inline 처럼 옆으로 가진 않았음)
   3. table 가운데 정렬하기 위해 margin: 0 auto;를 적용

   4. 🌟🌟🌟🌟 이걸 위해 이 글을 작성했다 ㅋㅋ

     th:nth-child(1),td:nth-child(1) {
         color:red;
     }

   일요일에만 빨간색을 어떻게 쓰지? 하다가 다른 회고팀에서 발견한 방법!
   이런 좋은 방법이,,😋