클래스나 ID 없이 순수 CSS로 체스판을 만들 수 있나요?

순수한 CSS 체스판 생성: Divs, 클래스 또는 ID 없음

순수한 CSS 예술성 영역에서는 일반적인 과제가 발생합니다. 수업이나 ID. 이 영역에서 흥미로운 퍼즐 중 하나는 클래스나 ID 없이 div만 사용하여 체스판을 만드는 것입니다.

이 특정 작업은 야심 찬 CSS 마법사를 며칠 동안 수수께끼로 만들어 nth-child() 및 그 변형. 그러나 어떤 해결책도 구체화되지 않은 것 같습니다.

그렇다면 이 어려운 디자인 위업을 달성하는 것이 가능할까요?

흥미롭게도 클래스나 ID 없이 div를 사용하여 체스판을 렌더링할 수 있지만, 테이블로 표현하는 데 더 적합합니다. 이는 스크린 리더에 더 많은 접근성을 제공하여 보드에 있는 그림의 위치를 ​​명확하게 전달할 수 있도록 합니다.

다음 CSS 스니펫을 고려하세요.

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

이 CSS는 화면 리더 내에서 체스판 패턴을 효과적으로 생성합니다. 테이블 구조. 홀수, 짝수 행과 열의 배경색을 번갈아 바꾸면 익숙한 체크 무늬 패턴이 나타납니다.

다음은 JSFiddle에 대한 데모입니다.

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

위 내용은 클래스나 ID 없이 순수 CSS로 체스판을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!