표준화된 디자인 솔루션 - 마크업 언어 및 스타일 핸드북 웹 표준 솔루션 마크업 및 스타일 핸드북 1부: 마크업 구문에서 시작하는 마크업 살펴보기 Chapter2 악의 형상? 테이블을 사용하는 것이 언제 죄악이 되었는지 알고 계셨나요? 실제로 웹 표준을 기반으로 웹 페이지를 작성하는 것에 대한 가장 큰 신화는 "더 이상 테이블을 사용하지 마세요!"라는 것입니다. 전염병은 봉인되어 먼지가 많은 캐비닛에 던져져 인터넷 초창기부터 전해 내려오는 골동품으로 보존되어야 합니다. 그런 혐오감은 어쩌면 처음에는 아주 간단합니다. 많은 사람들이 중첩된 표와 빈칸 채우기 GIF 이미지의 전통적인 레이아웃을 버리고 유연하고 구조화된 CSS 레이아웃으로 전환하는 것의 이점을 자신있게 홍보할 것입니다. 상황에 관계없이 모든 테이블을 고집스럽게 제거하기 시작합니다. 이 책의 뒷부분에서 CSS 레이아웃 방법과 이를 통해 얻을 수 있는 모든 이점을 살펴보겠습니다. 올바른 맥락에서, 즉 데이터 목록에 레이블을 지정할 때 테이블을 사용하는 방법을 살펴보겠습니다. 그게 바로 테이블입니다. 🎜> 목록 데이터에 라벨을 지정할 때 테이블 태그를 사용하지 않을 이유가 전혀 없습니다. 다음은 몇 가지 예입니다.
달력
스프레드시트
차트
시간 일정 이러한 예와 기타 많은 경우에는 데이터를 테이블처럼 보이게 하기 위해 매우 복잡하고 엄격한 CSS 효과를 사용해야 합니다. 아마도 영리한 CSS 플로트를 사용하고 모든 항목을 배치한 후에 얻을 수 있는 결과를 상상할 수 있을 것입니다. CSS 없이는 모든 정보를 정확하게 읽는 것이 아마도 불가능한 작업이 될 것이라는 점은 말할 것도 없고, 호환되지 않고 모순되는 결과가 나옵니다. 실제로 테이블을 두려워할 필요는 없습니다. 테이블을 원래 목적에 맞게 사용해야 합니다.
모두를 위한 양식 양식이 비난받는 이유 중 하나는 주의해서 사용하지 않으면 사용성 결함이 있기 때문입니다. 예를 들어 스크린 리더는 내용을 올바르게 읽는 데 어려움을 겪습니다. 화면 장치는 레이아웃에 사용되는 테이블로 인해 중단되는 경우가 많지만, 동시에 CSS를 사용하여 향후 스타일을 위한 유연한 구조를 만드는 몇 가지 간단한 방법이 있습니다. 3- 1의 간단한 예, 이것은 아메리칸 리그의 리그 기록입니다:
그림 3-1: 일반적인 데이터 테이블 예아마도 이것은 Red Sox 팬들에게 매우 우울할 것입니다. 통계 데이터 , 그러나 그림 3-1은 목록 데이터의 완벽한 예입니다. 3개의 테이블 헤더(연도, 상대, 시즌 기록(w-l))가 있고 그 위에 4년간의 데이터가 있습니다. 이 데이터 테이블을 표시하는 방법은 매우 직관적입니다.
Boston Red Sox World Series Championships< ; /p>
연도
< align="center">상대편
시즌 기록(승-패)< ; /td>
1918
시카고 컵스
1916
브루클린 로빈스
91-63
1915
필라델피아 필리스
;
101-50
1912
요크 자이언츠
105-47
이런 방식으로 표시되는 결과는 다음과 같습니다. 그림 3-1과 매우 유사하지만 이를 바탕으로 몇 가지 개선 사항을 추가할 수 있습니다. 먼저, 보다 의미 있는
태그를 사용하여 "Boston Red Sox World Series Championships"를 저장할 수 있습니다.< ;caption> ; 태그는 일반적으로 테이블의 제목이나 테이블 데이터에 대한 설명을 저장하는 데 사용되는
태그 뒤에 와야 합니다. 표의 테마를 지정하고 다른 방법으로 페이지의 내용을 아는 사람에게 도움이 될 수도 있습니다. 처음에 있는 단락을 삭제하고 올바른 <캡션>을 추가해 보겠습니다.
보스턴 레드삭스 월드 시리즈 챔피언십
연도< /b>
상대편
< b>시즌 기록(W-L)
1918
75-51
1916
브루클린 로빈스
91-63
1915
필라델피아 필리스
101-50
뉴욕 자이언츠
105-47
중요한 상황, 标题必须快速传达后side资料主题,根据默认设置,大多数可视化浏览器将
标签内的文字居中显示는 表格的最上面,当然,我们稍后에 있습니다 CSS를 사용하는 방법은 무엇입니까? ,正好让我们之后的修改工是变得轻松简单.
#p# 加上摘要 另外,我们也能为
表格的表头 지금 建立数据表格时,善用表头是件很重要的工작품.재标记密格格时,我们可以发挥标签의 창작,而不是使用落标题一样. 可视化浏览器或许会以粗体居中的效果显示
标签中的内容,但是我们依然可以用
같은 방식으로, 현재
内的 一般资料及进行区别. 除显示效果的优势外,使用示例表格中的表头是最上面的那一行: 연도,상대 및 시즌 기록(W-L).我们来把刚才的显示效果标签替换成正确的表头标签:
보스턴 레드삭스 월드 시리즈 챔피언십
<번째>연도 상대 시즌 기록(W-L)
1918 /td>
시카고 컵스
75-51
< td>1916
브루클린 로빈스
91-63
1915
필라델피아 필리스
101-50
< ;tr>
1912
뉴욕 자이언츠
105-47
태그를 사용하여 헤더 셀을 표시하는 것은 그림 3-1과 동일한 효과를 갖습니다. 데이터 콘텐츠 외부의 헤더를 강조 표시하기 위해 추가 표시 효과 태그를 사용할 필요가 없습니다.
기본 설정에 따라 대부분의 시각적 브라우저는
태그의 내용을 굵게 중앙에 표시하므로 사용자는 헤더와 표 내용의 차이를 쉽게 구분할 수 있습니다.
태그와 상대적으로 독립적이므로 데이터 내용과 다른 스타일을 테이블 헤더에 추가할 수 있습니다. 다음에서 테이블 헤더 태그 사용의 다른 이점에 대해 계속 논의하겠습니다. .
#p# 헤더와 데이터의 관계
헤더 속성을 사용하여 헤더를 해당
의 데이터와 연결할 수 있습니다. 이 속성을 사용하면 스크린 리더는 평소처럼 각 열을 왼쪽에서 오른쪽으로 읽는 대신 테이블 내용을 더 논리적으로 읽을 수 있습니다. >사용 방법을 보여주기 위해 계속해서 Red Sox 레코드 테이블을 사용합니다. 먼저 <테이블의 각 <번째>에 고유 ID를 추가해야 합니다. 올바른 헤더입니다. 다음과 같이 각 헤더에 ID를 추가하는 것은 매우 간단합니다.
보스턴 레드삭스 월드 시리즈 챔피언십
연도
상대
시즌 기록(승-패)
< ;tr>
1918
시카고 컵스
75-51
;/ tr>
1915
필라델피아 필리스
101-50
1912
뉴욕 자이언츠
105-47< /td>
각 헤더 ID에 대해 짧고 설명이 포함된 이름을 선택한 다음 각 데이터에 적절한 헤더 속성을 셀에 추가합니다. 콘텐츠가 올바른 헤더 ID와 일치하도록 합니다.
Boston Red Sox World 시리즈 챔피언십
연도
상대
시즌 기록(W-L)
< td headers="year"> 1918
시카고 컵스
75-51
1916
브루클린 로빈스< ;/td>
91-63
1915
필라델피아 필리스
101-50
1912
뉴욕 자이언츠
105-47
테이블 헤더와 콘텐츠 간의 대응 관계를 설정한 후 스크린 리더는 "연도: 1918, 상대: 시카고 컵스, 시즌 기록(W-L): 75-51"과 같이 테이블의 각 행을 읽는 것이 가능합니다. 각 셀의 내용을 왼쪽에서 오른쪽으로 읽는 것과 비교하면, 각
에 고유한 ID를 부여하면 이 식별 기반을 사용하여 특별한 CSS 규칙을 설정할 수 있으며 이에 대해서는 이 글의 마지막 부분에서 설명합니다. 장.
#p#
abbr 속성을 활용하세요 이전 예시에서는 헤더의 '시즌기록(W-L)'이 너무 길어서 스피치로 발음하기 힘들다고 느끼실 수도 있습니다 이때 abbr 속성을 추가하면 시각적 브라우저의 <번째> 셀에 원본 텍스트를 유지하면서 발음 내용을 줄일 수 있습니다. <표 요약 =" 이 표는 보스턴 레드삭스 월드 시리즈의 모든 우승을 기록한 차트입니다.">
보스턴 레드삭스 월드 시리즈 챔피언십
연도
상대
시즌 기록(승-패)
1918
시카고 컵스
< td>75-51
1916
브루클린 로빈스
;
91-63
1915
필라델피아 필리스< /td>
101-50
1912
< ;td> ;뉴욕 자이언츠
105-47
abbr="기록을 추가했습니다. "를 선택하면 스크린 리더는 헤더의 짧은 버전을 사용하여 "Record"를 읽습니다. >여기서 테이블 관련 태그 세 개도 언급하고 싶습니다. 이 태그는 테이블 구조에 대해 보다 정확한 의미를 제공할 뿐만 아니라 테이블 구조에 대한 추가 태그도 제공합니다. HTML4.01 사양에서 이러한 태그에 대한 W3C 설명을 인용하세요(http:// m.sbmmt.com/):인용문:
thead, tfoot 및 tbody 태그를 사용하여 테이블 행을 테이블 머리글, 테이블 바닥글 및 무제한의 테이블 본문으로 나눌 수 있습니다. . 이 분류 방법을 사용하면 브라우저가 표 본문을 독립적으로 스크롤하는 기능을 지원할 수 있습니다. 따라서 이 분류 방법을 사용하면 긴 표를 인쇄할 때 머리글과 바닥글이 반복될 수도 있습니다. 또한 독립 테이블 본문을 지원하는 브라우저 사용자가 테이블 콘텐츠, 특히 긴 테이블을 더 쉽게 읽을 수 있도록 할 수 있으므로 브라우저 및 기타 장치가 로드될 수 있습니다. 내용을 먼저 표시하고 테이블 행 분류 방식으로 테이블을 표시합니다.
... 테이블 헤더 콘텐츠...
...테이블 바닥글 콘텐츠...
...테이블 데이터 행...
...테이블 데이터 행 ...
...테이블 데이터 행...
< ;/table>
머리글과 바닥글 데이터는 및 태그로 둘러싸여 있으며 앞서 말했듯이 이러한 태그는 테이블의 정확한 의미에 대한 추가 정보를 제공할 뿐만 아니라 , CSS용 스타일 앵커도 제공할 수 있으므로 각
에 대해 너무 많은 클래스를 디자인할 필요 없이 이러한 특정 콘텐츠에 대한 CSS 규칙을 설정할 수 있습니다. 예를 들어 데이터 블록(표시됨)만 제공하려는 경우
)를 사용하면 다른 블록과 다른 배경색을 설정합니다. 그런 다음 목표를 달성하려면 다음 CSS 부분만 작성하면 됩니다. tbody { background-color: grey ; } tbody 태그가 없으면 회색 배경을 추가하려는 각
태그에 클래스 속성을 추가해야 합니다. 의미 있는 표시 방법은 나중에 CSS 설정으로 사용할 수 있습니다. 스타일 설정이 매우 쉬워졌습니다.
#p#
테이블은 악마인가? 테이블 태그를 본래의 목적에 맞게 사용한다면, 테이블은 당연히 "아니다!"라는 대답이 나올 것 같습니다. 복잡하고 중첩된 레이아웃을 만드는 데 도움이 되지만 테이블은 필요한 좋은 구조를 제공합니다. 완벽한 테이블 기술을 만드는 데 필요한 모든 것을 설명하는 데 책 전체를 쓸 수는 없으므로 여기에서 멈추겠습니다. 이제 간단하고 사용 가능하며 CSS로 쉽게 수정할 수 있는 간단한 테이블을 만드는 방법을 알아보기 시작했습니다. 스타일에 관해 이야기하자면, 몇 가지 다른 CSS 기술을 사용하여 이전 예를 수정해 보겠습니다. 기술의 확장 이전 장과 마찬가지로 유연한 의미론적 구조의 마크업을 기반으로 하고, CSS를 사용하여 몇 가지 스타일을 추가합니다 우선 살펴보겠습니다. 간단한 테두리 기술, 예제에 한 줄 테두리를 만든 다음 표 제목과 머리글에 고유한 스타일을 추가합니다. 테두리 만들기 테두리에 이미 3D 효과가 있습니다. 기본 속성이 지겹나요? 일반적으로 테이블 태그에 border="1"을 추가하면 그림 3-1과 비슷한 효과가 나타납니다. CSS를 사용하는 깔끔한 방법 먼저 각 <번째>
셀의 양쪽(오른쪽과 아래쪽)에 1픽셀 테두리를 추가합니다. th, td { border- right: 1px solid #999; border-bottom: 1px solid #999; } 양쪽에만 테두리를 추가하는 것은 테두리를 만드는 동안 어디에서나 동일한 너비의 테두리를 만드는 것입니다. 대부분은 팝업됩니다. 핵심은 브라우저가 이를 올바르게 표시할 수 있다는 것입니다. 모든 면에 테두리를 추가하면 나중에 셀을 정렬할 때 테두리의 위쪽과 왼쪽이 겹칠 것입니다. 하나만 사용하는 방법 테두리 규칙은 어린이다운 효과를 얻기 위한 방법입니다. 그림 3-2의 전체 테이블에는 테두리를 완성하기 위해 위쪽과 왼쪽 테두리만 누락된 것을 알 수 있습니다.
요소에 스타일 추가 동일한 border-top 및 border-left 속성 , td { border-right: 1px solid #999; border-bottom: 1px solid #999; }
그림 3-2: 양쪽에 td와 측면 라인이 있는 테이블 예시
그림 3-3 측면 라인을 채운 후의 테이블 예시
#p#
간격 제거 이제 표가 완성되었습니다. 하지만 테두리 사이의 간격은 어떻습니까? 안타깝게도 대부분의 브라우저에서는 편집기에서 약간의 외부 패치를 설정합니다. 기본적으로 이러한 성가신 간격이 노출됩니다. 우리가 할 수 있는 일은 테이블 요소에 border-collapse 속성을 추가하여 이러한 간격을 제거하고 원하는 스타일을 얻는 것입니다.
border-collapse에 축소 속성을 추가하면 다음과 같이 정확한 한 줄 테두리 스타일이 구현되는 것을 볼 수 있습니다. 그림 3-4
그림 3-4: border-collapse 속성을 사용한 후의 테이블 예시 Mac용 IE 버전을 지원하지 않습니다
Mac용 Internet Explorer를 제외하고 다른 브라우저에서는 다음과 같은 축약형 CSS를 지원합니다: table { border-collapse:collapse; } th, td { border: 1px solid # 999; } 어떤 방법을 사용할지는 물론 귀하에게 달려 있습니다. 여전히 Mac용 IE를 사용하는 사람들이 있으며, 이 대체 방법을 사용하면 가장자리가 일부 중복되는 것을 보게 될 것입니다. 이 점에 신경 쓰지 않는다면 다음을 사용하십시오. 엄밀히 말하면 이것은 단지 디스플레이 문제일 뿐이며 테이블 기능에는 전혀 영향을 미치지 않습니다. 저는 Mac 매니아를 버릴 수 없기 때문에 (그만한 가치가 있는 웹 디자이너라면 누구나 이렇듯 해야 합니다.) 앞으로의 예에서는 Mac용 IE에서 올바르게 표시될 수 있는 버전을 계속 사용할 것입니다. 공간을 확장하세요 이제 우리 손에 완벽한 테이블이 생겼는데, 조금 비좁아 보입니다. 그래도... th, td 규칙에 약간의 인라인을 추가하여 숨쉴 수 있는 공간을 제공하겠습니다(그림 3-5) table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse:collapse; } th, td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; } 그림 3-5: 10픽셀 내부 패치가 있는 테이블 예시 알고 계셨나요? 내부 패치를 설정하기 위한 단일 값(예: 이전 예의 10px)을 사용하려면 요소의 네 측면 모두에 동일한 설정 값을 추가해야 하며 시계 방향 순서(상단, 오른쪽, 하단, 왼쪽)를 따를 수도 있습니다. 각 측면에 대한 설정을 별도로 지정합니다. 내부 패치를 10px 5px 2px 10px로 설정하면 상단에 10px 내부 패치, 오른쪽에 5px 내부 패치, 하단에 2px 내부 패치가 추가됩니다. 또 다른 단축키: 상단과 하단의 설정 값이 같고 왼쪽과 오른쪽의 설정 값도 동일하다면 마찬가지로 각각 한 번만 설정하면 되며, padding: 10px 5px 로 설정하면 위쪽과 아래쪽에 10px 내부 패치가 추가되고, 왼쪽과 오른쪽에 5px 내부 패치가 추가됩니다. 🎜> 그림 3-6: 내부 패치를 시계 방향으로 설정하고 외부 경계 순서를 설정
#p#
미터 헤더의 표시 효과 조정미터 헤더에 배경색을 쉽게 추가하고 다양한 글꼴을 선택하여 미터 헤더를 더 명확하게 만들 수 있습니다. 줄에 굵게 표시된 내용을 직접 설정하는 대신
태그를 사용하므로 다른 태그를 추가하지 않고도 헤더 내용에 대한 스타일을 직접 설정할 수 있습니다. 이전에도 제목 아래에 추가했습니다. 또한 제목 내용을 강조하기 위해 다양한 글꼴과 색상(물론 빨간색)을 사용합니다(그림 3-7)
그림 3-7: 스타일이 지정된 제목 및 < 테이블 헤더에 배경 이미지 추가 지금은 테이블의 <번째> 요소에 회색 배경을 추가했지만 실제로는 한 단계 더 나아가 타일식 배경 이미지를 사용할 수 있습니다. 그리드에 아름다운 효과를 생성합니다. 예를 들어 상세한 회색 줄무늬를 사용하여 Mac OS에서 다양한 창 스타일을 시뮬레이션할 수 있습니다(익숙한 기타 그리기 도구). 이 예에서는 다음과 같은 효과를 생성해 보겠습니다. 2픽셀의 회색과 2픽셀의 흰색을 번갈아 사용하므로 그림의 높이가 4픽셀이면 됩니다. 너비가 달라도 문제가 되지 않습니다. 왜냐하면 원하는 줄무늬 효과를 만들기 위해 <번째> 대역폭을 절약하기 위해 너비를 1픽셀로만 만듭니다. (그림 3-8)
그림 3-8: 1X4 픽셀 스트라이프 이미지(확대) CSS
지금 수정해야 할 유일한 것은 배경색을 방금 만든 작은 이미지의 경로로 변경하는 것입니다. 그렇지 않으면 기본 설정에 따라 배경 이미지가 지정됩니다. 테이블 { border-top: 1px solid #999; border-left: 1px solid #999; 글꼴 계열: Arial, sans-serif; 색상: #993333; padding-bottom: 6px; }th, td { padding: 10px; border- 오른쪽: 1px 솔리드 #999; 테두리 하단: 1px 솔리드 #999; } 번째 { 글꼴 계열: Verdana, sans -serif; 배경: url(th_stripe. gif); }
그림 3-9는 이 스타일을 적용한 후의 표입니다. 헤더 부분에 줄무늬 배경이 있으므로 다른 타일 배경 이미지도 실험해 보아야 합니다. 헤더나 정보에 가장 어울리는 효과를 만드는 방법을 시도해 볼 수 있습니다. 그림 3-9: 테이블 헤더에 타일 배경을 사용한 예
#p#
ID에 대한 아이콘 지정 이 장의 시작 부분에서 테이블의 각 <번째>에 고유 ID를 추가했던 것을 기억하시나요? 이 id는 비시각적 브라우저 사용자가 테이블의 내용을 이해할 수 있도록 데이터 목록의 headers 속성과 일치합니다. 이제 이 id의 기능을 다른 곳에서 사용할 수 있습니다. 즉, 각 < th> 아이콘. 아이콘 경로는 CSS 파일에 완전히 기록되므로 레이블 부분을 수정하지 않고도 웹사이트 재구성 및 업데이트 시 쉽게 교체할 수 있습니다. 아이콘 Photoshop을 사용하여 예의 각 테이블 헤더에 사용되는 세 가지 고유한 아이콘을 만들었습니다. 연도, 상대 및 시즌 기록(W-L) 그림 3-10에서는 그림 3을 보여줍니다. -10 hotoshop에서 제작한 3개의 헤더 아이콘 CSS 에 CSS를 추가하는 것은 어렵지 않습니다. 각 마다 고유한 ID를 공식화하여 직접 사용할 수 있기 때문입니다. 올바른 아이콘을 지정하려면 배경 속성을 사용하세요. table { border-top: 1px solid #999; border-left: 1px solid #999; } caption { 글꼴 계열: Arial, sans-serif; 색상: #993333; padding-bottom: 6px; } th, td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; } 번째 { 글꼴 계열: Verdana, sans-serif; } #연도 { padding-left: 26px; background: #ccc url(icon_year.gif) no-repeat 10px 50%; } #oppont { padding-left: 26px; 배경: #ccc url(icon_opp.gif) 반복 없음 10px 50%; } #record { 왼쪽 패딩: 26px; 배경: #ccc url( icon_rec.gif) no-repeat 10px 50%; } 배경 스타일을 정의하기 위해 약어를 사용한다는 점에 유의하세요. th의 정의에서 background:#ccc 규칙을 제외합니다. 각 헤더의 아이콘 이름 옆에 배치하면 아이콘이 우리가 지정한 회색 배경에 "앉게" 됩니다. 또한 텍스트가 아이콘을 가리지 않도록 각 헤더 콘텐츠의 왼쪽에 아이콘을 위한 충분한 공간을 남겨 둡니다. . 위로 올라가면 그림 3-11이 우리가 원하는 효과입니다. 그림 3-11: 각 <번째>에 대한 고유한 아이콘을 구성하는 효과 축약된 구문을 사용하면 확실한 이점이 있습니다. , 다만, background 속성으로 이미지만 정의하고 배경색을 정의하지 않은 경우
에서 이전에 background로 정의한 배경색을 먼저 취소해야 합니다. 규칙을 결합하여 내용을 단순화합니다. 동일한 기능을 구현할 수 있는 또 다른 작성 방법은 각 테이블 헤더(이 경우 배경 이미지, 내부 패치 및 위치)에 반복적으로 나타나는 규칙을 꺼내 에서 동일하기 때문) #연도, #상대, # 내에서 서로 다른 설정 값(즉, 이미지 경로)만 유지합니다. 레코드 정의 테이블 { border-top: 1px solid #999; border-left: 1px solid #999; } caption { 글꼴 계열: Arial, sans-serif; 색상: #993333; 패딩 하단: 6px; } 번째, td { 패딩: 10px; 테두리 오른쪽: 1px #999; 테두리 하단: 1px 솔리드 #999; } 번째 { 글꼴 계열: Verdana, sans-serif; 패딩 왼쪽: 26px; 배경 -색상: #ccc; 배경 반복: 반복 없음; 배경 위치: 10px 50%; } #연도 { 배경 이미지: url(icon_year.gif ); } #oppoint { 배경 이미지: url(icon_opp.gif); } #record { 배경: url(icon_rec.gif); } 이것이 좀 더 간결하지 않나요? 동일한 규칙을 통합하면 매번 반복적으로 정의하고 수정하는 시간과 에너지를 절약할 수 있습니다. 6개이지만 더 큰 스타일 시트의 경우 절약 효과가 상당합니다. 요약 이 장에서 우리는 테이블이 나쁘지 않다는 것을 발견했을 뿐만 아니라 테이블을 이해한 후에도 테이블 데이터에 레이블을 지정하는 데 매우 적합하고 여전히 사용하기 쉽다는 사실을 발견했습니다. 또한 몇 가지 스타일을 추가하면 목록 데이터의 표시를 제어할 수 있어 매우 매력적이라는 사실도 발견했습니다. 더 이상 테이블 사용이 걱정됩니다.
아마도 이것은 Red Sox 팬들에게 매우 우울할 것입니다. 통계 데이터 , 그러나 그림 3-1은 목록 데이터의 완벽한 예입니다. 3개의 테이블 헤더(연도, 상대, 시즌 기록(w-l))가 있고 그 위에 4년간의 데이터가 있습니다. 
그림 3-6: 내부 패치를 시계 방향으로 설정하고 외부 경계 순서를 설정 
그림 3-7: 스타일이 지정된 제목 및 < 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
