오늘은 html 웹사이트에서 tab 키를 사용해서 이동할 수 있는 방법을 설명하도록 하겠다.

거의 없겠지만 마우스를 사용하지 않는 사람들에게 유용한 기능이다.

tabindex

태그 안에 넣는 속성이다.

tabindex="1" 이런식으로 사용하는데,

1, 2, 3 이런 순서로 탭을 눌렀을 때 이동한다.

고로 만약 아래처럼 코딩을 했을 때 :

tab 키를 누르면 이런 순서로 이동을 하게 된다:

다만 이렇게 하면 이용자가 혼란을 겪을 수 있으니 트롤링 웹사이트를 만드는게 아니면 평범하게 하자

tabindex를 따로 지정해주지 않으면 위에서 아래 순서대로 tabbing이 된다

Link Title

링크 타이틀 - 링크글에 설명문을 넣어주는 것.

링크 위에 마우스를 호버링 할 경우 설명문이 보인다.

이렇게 코드를 짜주면

이렇게 '주황색' 위에 마우스를 가져다 댈 경우 설명문 '빨간색 + 노란색' 이 보인다.

Access Key

엑세스 키란 단축키를 사용하여 링크를 여는것을 뜻한다.

웹브라우저에 따라 다르겠지만 주로 alt + 단축키 이다.

이런식으로 쓴다.

이 코드의 경우 alt + s 를 누르면 저 링크로 들어가지게 된다.

Skipping

링크와 id를 통해 웹페이지를 스킵하는 것이다.

위키같은 웹사이트에 많이 쓰이는데, 맨 처음에 소제목을 클릭하면 글의 해당 부분으로 이동되는것을 말한다!

이렇게 스킵하고싶은 위치에 id를 걸어주고 링크를 id 주소로 걸어주면

클릭 했을 때 id의 위치로 이동하게 된다.

웹페이지를 header body footer로 나누는 것 처럼,

표도 똑같이 나눌 수 있다.

물론 나눈다고 해서 웹페이지에서 뭐가 다르게 보이는건 아니지만

나중에 코드를 읽기 쉽게 해주는 역할을 한다.

thead, tbody, tfoot 세가지의 태그가 있는데,

모두 <table> 태그 안에 넣어주도록 한다.

<thead>, </thead>

가장 위에 올라가야 하는 태그.

<tbody>, </tbody>

thead 태그 다음순서로 오는 태그.

tfoot 다음으로도 올 수 있다.

<tfoot>, </tfoot>

표의 마지막을 뜻하는 태그이지만 tbody보다 먼저 올 수도 있다.

고로 

thead

tbody

tfoot

tbody

tfoot

이런식으로 표를 길게 만들고 부분부분 나누는 것이 가능하다!

나눈다고 해도 웹페이지에 출력될 때는 다 붙어서 나오기 때문에,

테이블 사이를 떼고 싶다면 테이블을 닫고 새로 만드는것이 현명하겠다.

사용 예시

<colgroup>, </colgroup>

표의 열(세로줄)을 골라 속성을 부여할 수 있게 하는 태그.

이 태그가 없다면 한칸한칸 일일이 속성을 부여해야 할 것이다.

<col>

열 하나 하나를 뜻한다.

표 안에 열이 3개라면 이 태그가 세번 있어야 하고

10개라면 10번 들어가야 한다.

이 태그는 속성을 부여할뿐 텍스트 등을 포함하지 않기때문에 닫는 태그가 없다.

<col> 에는 속성을 부여할 수 있는데,

class 를 이용해서 특정 줄만 배경색을 바꾼다던지

이런식으로:

class 에 대해서는 나중에 CSS관련 글에서 다루도록 하겠다

또한 span 속성으로 rowspan 이나 colspan 처럼 여러개의 열을 한번에 잡을 수도 있다.

<table>바로 다음에 <caption>, </caption> 태그를 사용해 표의 제목을 출력할 수도 있다.

표의 바로 윗줄에 이름이 출력되게 된다

코드 예시

출력 해봤자 그냥 일반 표가 나옴으로 출력 예시는 넣지 않았다

HTML 에서 주석은 코딩 내에 설명을 넣거나 메모할 때 쓰인다.

<!-- 와 --> 사이에 모든것은 주석처리 된다.

만약 인터넷 익스플로러의 한가지 버전에서만 주석처리되기를 원한다면

  <!--[if IE 6]> 로 주석을 열어주면 인터넷 익스플로러 6에서만 주석처리가 된다.

이와 같이 숫자를 바꿔 버전을 고를 수 있다.

이 외에도 gt를 써서 고른 버전보다 높은.

gte로 높거나 같은,

lt로 고른 버전보다 낮은,

lte로 낮거나 같은 버전을 선택할 수 있다.

사용 예시:

<!--[if IE gt 7]> 인터넷 익스플로러 7보다 높은

<!--[if IE lte 8]> 인터넷 익스플로러 8과 같거나 낮은

만약 인터넷 익스플로러 유저만 못 읽게 하려면(...)

<!--[if !IE]> 로 주석을 열어주자

위와 같은 주석들은 <![endif]-->로 닫아준다

근데 솔직히 <!--랑 -->사이에 넣으면 다양한 웹브라우저에서 이를 주석처리한다..

그러니까 인터넷 익스플로러 유저들만 웹페이지를 사용하게 하고싶은게 아니면

그냥 <!--랑 --> 쓰자..

이번 글에서는 time 태그와 다양한 줄임체를 알아보도록 하겠다

<time>, </time>

time 태그는 html 내에 시간을 삽입할 때 사용한다.

웹사이트에 출력되지는 않지만,

검색할 때 노출이 되게 하는 태그다

그 외 줄임체

<mark>, </mark>

텍스트를 형광펜으로 칠한다

<small>, </small>

텍스트를 작게 만든다

<s>, </s>

텍스트에 취소선을 긋는다

<u>, </u>

텍스트에 밑줄을 긋는다

<i>, </i>

텍스트를 이탈릭스체로 바꾼다

<b>, </b>

텍스트를 볼드로(두껍게) 만든다

코딩 예시

출력 예시.

이번에는 article 과 section , header 와 footer에 대해서 알아보도록 하자.

<article>, </article>

이 태그는 독립된 텍스트를 나눌 때 사용한다.

자동으로 줄 바꿈이 일어난다!

<section>, </section>

이 태그는 article 내에서 텍스트를 나눌 때 사용한다.

마찬가지로 자동으로 줄 바꿈이 일어난다.

다만 article 과 section은 줄바꿈이 두번 일어나서, section과 section사이

또는 article 과 article 사이에는 반드시 빈줄이 생기게 된다.

<header>, </header>

헤드 태그나 <h1>, </h1> 헤더 태그와 다르다

웹페이지의 맨 위엣부분을 나눌 때 사용된다.

<footer>, </footer>

웹페이지의 아랫부분을 나눌 때 사용된다.

그 외에도

<aside>, </aside>

로 section 안에서 또 나눠줄 수도 있고

<figure>, </figure>

로 피규어를 마킹할 수도 있다

<nav>, </nav>

사이에는 네비게이션, 그러니까 흔히 웹사이트의 헤더와 아티클 사이에 있는 메뉴 바를 마킹 할 수 있다.

내 블로그를 이렇게 나눠서 표시한다면

이쯤 되겠다

코드 예시

출력 예시

<dfn>, </dfn>

definition

무언가의 정의를 표시할 때 쓰는 태그.

<dl>과는 달리 마우스를 단어 위에 호버링 할 때 정의가 나타난다.

<abbr>와 비슷하지만 밑에 점선이 없고 기울어진 글꼴이라는 점에서 차이가 난다.

<abbr>는 생략된 글자를 표시할 때 사용한다면,

<dfn>는 전문용어 등의 뜻을 정의할 때 사용된다!

일반적으로<def> 태그 안에 <abbr> 태그를 넣어서 사용한다

코딩 예시.

비교를 위해 <abbr> 태그로 동일한 내용을 입력했다

출력 예시

<bdo>, </bdo>

Bidirectional Override

단어 출력 방향을 정한다.

direction 의 약자인 dir 을 속성으로 쓰고,

값으로는 왼쪽에서 오른쪽 ltr (left to right)

또는 오른쪽에서 왼쪽 rtl (right to left)

를 사용한다.

코딩 예시.

출력 예시.

윗줄은 정상적으로 왼쪽에서 오른쪽 순서대로

아랫줄은 오른쪽에서 왼쪽으로 출력이 되어있다.

솔직히 실용적으로 쓰일지는 모르겠다

<del>, </del>

<ins>, </ins>

delete, insert

글을 지우고 추가한 것을 표시할 때 사용되는 태그.

<del> 태그는 안에 있는 내용에 가운데 줄을 그어준다.

<ins> 태그는 안에 있는 내용에 아랫줄을 그어준다.

속성으로는 datetime 으로 수정 날짜나,

cite 로 수정 이유에 관한 웹사이트 등을 넣어줄 수 있다!

코드 예시

출력 예시

Description List

무언가의 정의를 정리하거나 할 때 쓰인다.

단어의 뜻 등

<dl> 로 태그를 열어주고,

<dt>, </dt> 사이에 정의할 이름을

<dd>, </dd> 사이에 정의를 넣는다.

그리고 </dl>로 태그를 닫아준다

이렇게 하면 <dt> 태그 안에 있는것들은 왼쪽정렬이 되어 출력되고

<dd> 안에 있는것들은 아랫줄에 들여쓰기가 되어 출력된다.

단 <dt> 태그 하나 당 <dd>가 하나만 쓰여지는 것은 아니다.

여러개도 쓰일 수 있다!

똑같이 <dt>도 여러개 사용할 수 있다.

코드 예시

출력 예시

HTML로 표를 만들 때, 무조건 모든 칸의 크기가 동일하란 법은 없다.

세로로 칸을 합칠수도 있고, 가로로 합칠 수도 있다.

이런것을 수행할 때 rowspan과 colspan 속성을 사용한다.

rowspan 속성은 세로로 셀을 합쳐주고

colspan은 가로로 합쳐준다.

이를 쉽게 보기 위해 html 표에

  <table border="1">

를 사용해 테두리를 만들어준다.

이렇게 코드를 작성해준다.

colspan 을 2로 지정해준 뒤 <td>를 하나 생략한다.

두칸이 합쳐지기 때문에 괜찮다

rowspan은 세로로 두칸이 합쳐진다.

고로 다음 <tr> 안에 <td>를 두개만 만들어준다

짜잔

meta 태그

<meta> 태그는 이 웹페이지의 저자는 누구이고, 어떤 키워드가 들어있고 등의

웹페이지 자체의 정보가 담겨있다.

<head> 태그 사이에 넣어주면 되고, name이나 content 등의 속성을 붙일 수 있다.

meta 속성

charset

언어 세트를 지정해준다

대부분 utf-8을 쓴다.

http-equiv

name 속성 대신 사용할 수 있는 속성.

값으로는 content-type, default-style, refresh 등이 들어간다.

위 속성에 따라서 다음 속성과 값이 정해진다.

예를들어 http-equiv="refresh" content="10" 이라 한다면

웹 페이지는 자동으로 10초마다 새로 불러오기를 하는것이다.

너무 주기를 짧게 하면 쓸데 없으니 적당히 길게 하자

숫자 뒤에 ; 를 붙이고 다른 링크를 붙이면 지정된 초 후에 해당 웹사이트로 이동한다

name

웹페이지의 대한 정보를 담고있는 태그.

값으로는 keywords, author, subject, title 등이 있다.

누군가 내 웹페이지를 검색해서 찾아올 때 쓰이는 정보다.

코드 예시

출력

보다시피 웹페이지 자체에는 처음에 지정한 웹페이지의 이름 title 빼고는 딱히 보이는게 없다.

이렇게 meta는 화면상 출력되지는 않지만 뒤에서 정보를 담고있는 태그다.