콘텐츠
- HTML로 표 만들기
- 1 단계
- 2 단계
- 3 단계
- 4 단계
- 5 단계
- 달력 사용자 지정
- 1 단계
- 2 단계
- thead calendar {
- 3 단계
- 일 달력,
- td calendar {
- 4 단계
- td span calendar {
웹 페이지 레이아웃을 작성할 때 테이블이 선호되지 않았지만 HTML 캘린더 코딩에는 여전히 잘 작동합니다. 달력은 예를 들어 요일로 명명 된 열이있는 날짜 그리드로 구성되면 테이블 형식 데이터를 표시합니다. 추가 CSS 코드는 이름과 숫자가있는 지루한 그리드를 캘린더처럼 만듭니다. 달력의 이벤트에는 날짜 수와 이벤트 모두에 대해 공백이 필요하기 때문에 CSS를 사용하여 두 정보를 모두 읽을 수있는 방식으로 날짜 형식을 지정해야합니다.
HTML로 표 만들기
1 단계
달력을 구성 할 테이블을 만듭니다. 이 표에는 요일별로 하나씩 7 개의 셀이있는 머리글이 필요합니다. 또한 일반 테이블 셀의 6 개 행을 만들어야합니다. 메모장이나 코드 편집기를 사용하여 발췌 부분을 복사하여 웹 페이지에 붙여 넣습니다.
| 일요일 | 월요일 | 화요일 | 수요일 | 목요일 | 금요일 | 토요일 |
|---|
이 코드는 테이블과 제목을 생성합니다. 웹 사이트가 다른 페이지의 테이블을 사용하는 경우 테이블은 "calendar"라는 식별 이름을 사용합니다.
2 단계
""태그 아래에 한 쌍의 body 태그를 추가합니다.
3 단계
다음 코드를 복사하여 "
" 여섯 번:이 코드는 7 개의 셀이있는 각 행을 생성하므로 6 개를 추가하면 달력에 연중 모든 달에 필요한 모든 데이터 공간이 포함됩니다.
4 단계
표시하려는 달에 따라 달력에 날짜를 추가하십시오. 실제 달력을 참조하고 날짜를 건너 뛰거나 반복하지 않도록주의하십시오. 나중에 숫자를 사용자 정의 할 수 있도록 각 날짜를 ""태그로 묶습니다.
5 단계
관련 날짜가 포함 된 셀의 이벤트를 확인합니다. 이벤트는 ""태그 밖에 있지만 ""태그 안에 있어야합니다.
’:
할로윈 파티!
등록 마지막 날입니다.
달력 사용자 지정
1 단계
"
개요는 선택 사항이지만 현재 웹 페이지의 표에 테두리를 추가하는 가장 적절한 방법입니다.
2 단계
글자 색상과 배경 색상으로 표 제목을 사용자 지정합니다.
thead calendar {
색상 : #ffffff; 배경색 : 진한 파란색; 글꼴 두께 : 굵게; }
16 진수 코드 또는 색상 이름을 사용할 수 있습니다. 이 제목은 남색 배경에 흰색 텍스트를 표시합니다.
3 단계
표 셀을 기준으로 채우기, 테두리, 너비 및 위치 :
일 달력,
td calendar {
패딩 : 20px; 테두리 : 1px 단색 검정; 너비 : 100px; 위치 : 상대; }
상대 배치를 사용하면 프로그래머가 나중에 테이블 셀 모서리에 숫자 형식으로 날짜를 배치 할 수 있습니다. 날짜에 추가 할 수있는 텍스트의 양을 제한하므로 높이를 설정하지 마십시오.
4 단계
채우기, 배경색 및 절대 위치를 사용하여 숫자를 만듭니다.
td span calendar {
글꼴 두께 : 굵게; 위치 : 절대; 하단 : 0; 오른쪽 : 0; 디스플레이 : 블록; 패딩 : 5px; 배경색 : #eeeeee; }
""태그가 웹 페이지에서 상자 역할을하도록하려면 "display : block"을 포함해야합니다. 그렇지 않으면 해당 태그를 채울 수 없습니다. 이 샘플 코드는 각 날짜 공간의 왼쪽 아래 모서리에 희미한 회색 상자를 만들어 날짜 번호를 표시합니다.