[TIL - 2] HTML 기초 - 2

다중 리스트를 만드려면?

"HTML"에 대한 위키피디아의 목차

 

위와 같은 구조의 HTML을 설계한다면, 어떻게 만드는 것이 가장 이상적일까? 여러가지 방법이 있겠지만, 아래의 방법이 가장 의미적으로 맞다고 생각한다.

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

 

우선, ul 태그는 자식으로 무조건 li 태그를 포함해야한다. 물론, li 태그를 굳이 쓰지 않더라도 화면에는 제대로 표시가 되지만, SEO 관점에서는 불이익을 받을 가능성이 있다. mdn에서도 이 방법이 옳은 방법임이 명시되어 있다!  그러니, 굳이 불확실한 방법을 고를 필요는 없을 것이다!

 

<table>

table 태그에서 사용 가능한 태그들을 모두 활용한 레이아웃은 다음과 같다. (col 및 colgroup 제외)

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

 

<caption>

테이블의 제목을 설정한다. 또한 이를 사용하면, 시각 장애인분들이 사용하는 스크린 리더기에서 먼저 읽어주어, 웹 접근성이 향상된다.

 

<thead>, <tbody>, <tfoot>

tr 태그를 그룹화할 때 사용한다. thead 태그는 각 열의 제목에 해당하는 부분을 감싸게 되고, tbody 태그는 실 데이터 부분, tfoot 태그는 "해당 컬럼의 총합" 과 같은 정리 부분을 감싸게 된다.

 

<tr>

"table row"의 줄임말로, 말 그대로 테이블의 한 행(가로)을 그룹화 하는 태그이다.

 

<th>

보통 tr 태그의 내부에 들어가며, 테이블에서 각 열의 제목을 적는 태그이다. 혹시나 행 기준으로 나열된 테이블이라면, scope 속성을 활용하여 가로 방향으로 영향을 미치고 있다는 것을 나타내줄 수 있다.

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

 

<td>

보통 tr 태그의 내부에 들어가며, 각 열에 대한 데이터 값이 들어가게 된다.

 

 

<col>

이 태그를 통해 한 컬럼의 스타일을 지정해줄 수 있다.

<!-- 열이 3개일 때 -->
<col style="width: 100px"></col>
<col style="width: 100px"></col>
<col style="width: 100px"></col>

 

<colgroup>

이 태그는 <col>을 여러개 사용한 효과를 낼 수 있다.

<!-- 처음 열 2개의 스타일 지정 -->
<colgroup span="2" style="width: 200px"></colgroup>

 

 

이외의 잘 몰랐던 사실들

• <a rel=”noreferrer”></a> 처리를 하지 않을 시, 페이지 이동 후 개발자 도구를 통해 바로 직전에 있었던 페이지에 대해 알 수 있다.
• <a rel=”opener”></a> 를 적용하게 되면, 개발자 도구에서 window.opener를 통해 부모 탭을 마음대로 조작할 수 있다. (링크 사기)
  • 그러므로, target=_blink 을 이용해 새 창 열기를 해야한다면, <a rel=”noreferrer noopener”></a>를 사용해야한다.
• input에 required 속성을 주더라도 사용자가 개발자 도구에서 지워버리면 의미가 없어진다.
  • 그러므로, 프론트엔드와 백엔드 모두 예외처리에 신경써야한다.