[HTML] 링크/목록/표

링크

- hyperlink는 문서에서 문서로 연결을 의미. HTML에서 link는 hyperlink를 의미

- <a>: 하이퍼링크를 의미

<a href="url주소" traget="_blank" rel="noopener noreferrer"></a>

- href: 이동하고자 하는 파일의 위치나 url 경로

절대 URL	웹사이트 URL (href=”http://www.example.com/default.html”)
상대 URL	자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)
fragment identifier	페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
메일	mailto:
script	href=”javascript:alert(‘Hello’);”

- target: 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정

_blank	링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
_self	링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정)
_parent	링크로 연결된 문서를 부모 프레임(frame)에서 오픈.
_top	링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) 이름	링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

 

+) rel 추가 설명

target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있다. 따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다. 참고로 noopener 속성은 성능 상 이점도 있는 것으로 알려져 있다.

예시

<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>

링크의 상태(state)

link	아직 한 번도 방문한 적이 없는 상태 (기본설정). 밑줄에, 텍스트 색상이 파란색으로 변경
visited	한 번이라도 방문한 적이 있는 상태. 밑줄에, 텍스트 색상이 보라색으로 변경
hover	링크 위에 마우스를 올려놓은 상태
active	링크를 마우스로 누르고 있는 상태. 밑줄에 텍스트 색상이 빨간색으로 변경

a:link    { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover   { color: yellow; text-decoration: none }
a:active  { color: red; text-decoration: none }

목록

- list는 여러 요소들을 일렬로 나열한 목록이나 명단을 의미

- <ul>, <li>: 순서가 없는 목록

    - list-style-type(marker를 변경): disc(기본값), circle, square

<ul style="list-style-type: circle">
  <li></li>
  <li></li>
</ul>

- <ol>, <li>: 순서가 있는 목록

    - list-style-type(marker를 변경): decimal(기본), upper-alpha(대문자 알파벳), lower-roman(소문자 로마숫자)

    - type: "1"(숫자), "A"(대문자 알파벳), "a"(소문자 알파벳), "I"(대문자 로마숫자), "i"(소문자 로마숫자)

    - start: 시작 숫자 지정. "3"

    - reversed: 순서를 역으로 표현

<ol style="list-style-type:upper-roman">
  <li value="1"> </li>
  <li> </li>
  <li> </li>
</ol>

- <dl>, <dt>, <dd>: 정의 리스트. 용어와 그에 대한 정의를 모아놓은 리스트

<dl>
  <dt>용어 이름</dt>
  <dd>용어 정의</dd>
</dl>

 

표

- 테이블은 여러 종류의 데이터를 정리하여 보여주는 표를 의미

- 두 줄로 표현되는 테두리를 한 줄로 설정시 border-collapse 속성을 collapse로 설정

- <tabel>: 표를 감싸는 태그

- <caption>: 테이블 상단에 제목이나 짧은 설명

- <tr>: 테이블에서 열을 구분(행)

- <th>: 각 열의 제목. 중앙 정렬의 굵은 글씨

    - rowspan: 해당 셀이 점유하는 행의 수 지정

    - colspan: 해당 셀이 점유하는 열의 수 지정

- <td>: 열을 각각의 셀로 나눔

    - rowspan: 해당 셀이 점유하는 행의 수 지정

    - colspan: 해당 셀이 점유하는 열의 수 지정

<table border="1">
  <caption>표에 대한 설명</caption>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Reference

- Tabnabbing 피싱 공격의 동작 원리와 대응책

- Tabnabbing 공격과 rel=noopener 속성

- tabnabbing 공격 방어 대책 정리

- Links to cross-origin destinations are unsafe

- The performance benefits of rel=noopener