들어가기 전에

테이블 태그로 만들어야 하는 대표적인 UI로 달력을 꼽을 수 있습니다.

월요일부터 금요일까지 상단 부분이 제목 셀이고, 그 외 날짜 부분이 내용 셀로 이루어져 있기 때문입니다. 

기념일, 휴일, 음력 등 표시해야할 컨텐츠가 많기 때문에, 셀 안에 DIV 요소를 추가하여 실습을 진행하도록 하겠습니다.

제작 가이드

주요 기능

• 기념일, 휴일, 음력, 이전/다음 달 날짜 표시
  
• 오늘 날짜에 해당하는 셀에 보더 및 배경 색 변경

스타일 정보

• 표 전체 너비 : 590px
• 셀 너비 : 동일
• 요일 셀 높이 : 25px
• 날짜 셀 높이 : 80px
• 기념일 텍스트 : 말줄임

주요 태그 및 속성

• HTML
  • table, caption, thead, tbody, th, td
  • (속성 : scope)
• CSS
  • table-layout, border-collapse
  • padding, border, color, text-align, background-color
  • position, margin, vertical-align
  • 말줄임 (overflow, text-overflow, white-space)

참고 링크