HTML Tabbing

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

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

tabindex

태그 안에 넣는 속성이다.

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

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

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

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

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

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

Link Title

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

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

이렇게 코드를 짜주면

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

Access Key

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

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

이런식으로 쓴다.

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

Skipping

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

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

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

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