[컴퓨터언어] 웹 표준에 맞는 표 만드는 태그 (HTML공부하기!) - 8

<th>, <tr>, <td> 태그만을 사용해서 표를 만들면 표라고는 할 수는 있지만 '웹 표준에 맞는 표'라고 할 수는 없습니다. 웹 표준에 맞는 태그를 사용해서 표를 만든다는 것은 웹 브라우저와 같이 표를 시각적으로 보여주는 프로그램이 없더라도 표의 구조에 대해 어느 정도 이해할 수 있어야 한다는 의미입니다. 즉, 화면 낭독기와 같이 시각장애인을 위한 프로그램에 맞추어서 사용하려면 꼭 필요한 태그라고 할 수 있습니다. 구글은 세계적인 기업으로 이런 화면 낭독기와 같은 기능을 얼마나 잘 구현할 줄 아는 글이냐에 따라 점수를 다르게 줄 가능성이 높습니다. 이러한 점수는 구글 seo의 결과에 반영될 수 있습니다.

 

웹 표준에 맞는 표를 만드는 태그는 다음과 같습니다.

 

 

[1] <caption>, <figcaption> 태그

1. 제목을 붙이는 태그

2. 차이점 : 중앙 정렬을 하느냐 하지 않느냐, 제목의 위치

[2] <aria-describedby> 태그

1. 표에 대한 설명을 제공할 때 사용

2. 시각장애인을 위한 태그(화면낭독기)

[3] <thead>, <tbody>, <tfoot> 태그

1. 표 구조를 정의하는 태그

2. 각각 표의 제목, 본문, 요약에 해당

3. CSS, 자바스크립트를 이용해 확장 가능

4. 시각장애인을 위한 태그(화면낭독기)

[4] <col>, <colgroup> 태그

1. 열을 묶어서 표 스타일을 지정하는 태그

2. 닫는 태그 없다

3. 둘 태그의 차이점도 없다.

 

 

웹 표준에 맞는 표를 만들기 위해서는 위의 내용만 숙지하셔도 충분합니다. 그럼 이제는 각각의 태그에 대해서 더욱 자세히 알려드리도록 하겠습니다.

 

---

1. <caption>, <figcaption> 태그

표에 제목을 붙일 때 사용하는 태그입니다. 이때의 제목은 '제목 셀'을 의미하는 것이 아니라 말 그대로 표의 위나 아래에 이 표가 무슨 표인지를 알려주는 제목을 말합니다.

<caption> 태그의 경우에는 <table> 태그 바로 뒤에 사용하며, 가운데 정렬이 된 상태로 제목이 작성됩니다. 상대적으로 이해하기 쉬운 <caption> 태그와 달리 <figcaption> 태그의 경우에는 내용이 조금 많습니다. 하나씩 천천히 설명하겠습니다.

<figcaption> 태그의 경우에는 <table> 태그 전에 사용하며, 가운데 정렬이 되지 않으며, 제목의 위치를 설정할 수 있습니다.

제목의 위치를 설정하기 위해서는 <figrue> 태그가 필요합니다. <figure> 태그는 <figcaption> 태그를 한 번 감싼 후에 작성해야 합니다. 그 반대의 순서로 감싸서 사용하는 것도 가능합니다. 만약 <figcaption> 태그가 <figure> 태그보다 앞에 있으면 표 위에 제목이 작성되며, 뒤에 있으면 표 아래에 제목이 작성됩니다.

 

2. <aria-describedby> 태그

표에 대한 설명을 제공하는 태그입니다. id속성을 사용해서 설명 문장을 작성해주고 설명 문장을 표에 연결해주는 역할을 합니다. (id속성은 나중에 설명드릴 예정입니다. 여기서는 문장의 이름이라고 생각하면 되겠습니다.)

이 태그를 사용할 경우 화면낭독기에서 설명 문장을 읽어주기 때문에 시각장애인에게 굉장히 유용한 태그입니다. 또한 이런 화면낭독기와 같은 부분은 구글에서도 중요하게 생각하는 부분입니다.

 

3. <thead>, <tbody>, <tfoot> 태그

표의 구조를 정의하는 태그입니다. 표를 작성하면 어쩔 수 없이 표의 제목, 본문, 요약으로 나뉠 수밖에 없습니다. 태그 순서대로 표의 제목, 표의 본문, 표의 요약에 해당합니다. <tr>, <td> 태그 앞에 작성합니다. 이 태그의 사용목적은 확실합니다. 화면낭독기가 우리가 <thead>, <tbody>, <tfoot> 태그를 이용해서 나 눈부분을 읽어주기 위해 사용합니다. 역시나 시각장애인을 위한 태그라고 보시면 됩니다.

CSS를 이용해서 각각 다른 스타일로 적용이 가능하고, 자바스크립트를 이용해서 효과를 좀 더 추가할 수 있습니다.

 

4. <col>, <colgroup> 태그

[컴퓨터언어] 태그로 표 만들기 (HTML 공부하기!) - 7

위 포스팅을 보시면 표를 만드는 과정을 4단계로 구분한 내용이 있습니다. 표를 만드는 4단계 중에는 열과 셀을 지정해주는 태그(<tr>, <td> 태그)는 있어도 어디에도 행을 지정해주는 과정은 없습니다. 그렇기에 행을 지정하기 위한 태그가 따로 마련되어있습니다. 바로 <col>과 <colgroup> 태그입니다.

<col> 태그는 닫는 태그가 없으며, span속성을 이용해서 행을 여러 개 묶을 수 있습니다. <span="2">라고 작성할 시 2개의 행을 동시에 묶어서 스타일을 적용하실 수 있다는 의미입니다.

<colgroup> 태그는 있어도 되고 없어도 되는 태그입니다. 하지만, 사용한다면 <colgroup> 태그가 <col> 태그를 감싸는 방식으로 코드를 작성하셔야 합니다.

단, <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 합니다.

 

---

웹 표준에 맞는 태그란 화면낭독기를 생각하는 태그와 시각적으로 볼 수 없는 경우 좀 더 명확한 표의 구조를 위해 작성하는 태그입니다. 기본표로 거의 모든 것을 만들 수도 있지만, 개발자가 되고 싶으신 분들이라면 꼭 숙지해두셔야 하는 태그들입니다. 하지만, 개발자가 되고 싶은 생각이 없더라도 <col> 태그는 열을 지정해서 스타일을 적용하는 태그이기 때문에 꼭 알아두셨으면 합니다.