[attribute] HTML - scope 속성 - <th> (테이블헤더셀)의 범위 지정 (= scope속성 = 스코우프속성/스코프속성) ※ 티에이치태그의 범위 지정

1. scope 예제 - 헤더 범위 지정
2. scope 정의
3. scope 구문
4. scope 예제 - (행/열) 헤더셀 둘 다 적용

scope 예제 - 헤더 범위 지정

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

  <tr>

    <th>번호</th>

    <th scope="col">언어</th>

    <th scope="col">기능</th>

  </tr>

  <tr>

    <td>1</td>

    <td>HTML</td>

    <td>구조</td>

  </tr>

  <tr>

    <td>2</td>

    <td>CSS</td>

    <td>디자인</td>

  </tr>

</table>

 

결과보기

scope 정의

 

해당 테이블헤더셀(<th>)의 범위 지정.

 

---

 

1. scope 속성 사용 가능 태그 종류

<th>

 

2.

scope 속성 사용 시 브라우저 표시엔 영향 안 미침.

다만, 사용 시, 스크린리더기 등 웹접근성에 도움됨.

 

3.

모든 브라우저 지원.

 

scope 구문

 

<th scope="col|row|colgroup|rowgroup">...</th>

 

---

[속성값]

 

• col - 컬럼 (=세로열=세로줄)의 헤더임을 지정.
• row - 로우 (= 가로행=가로줄)의 헤더임을 지정.
• colgroup - 컬럼그룹(=컬럼묶음)의 헤더임을 지정.
• rowgroup - 로우그룹 (= 로우묶음)의 헤더임을 지정.

 

scope 예제 - (행/열) 헤더셀 둘 다 적용

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

  <caption>코딩언어 소개</caption>

  <thead>

    <tr>

      <th scope="col">기능</th>

      <th scope="col">언어</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">구조</th>

      <td>HTML</td>

    </tr>

    <tr>

      <th scope="row">디자인</th>

      <td>CSS</td>

    </tr>

    <tr>

      <th scope="row">기능</th>

      <td>JS</td>

    </tr>

  </tbody>

</table>

결과보기