출처1
https://codepen.io/snake/pen/RNNeKw
CSS tags images (span:focus)
...
codepen.io
출처2
https://naradesign.github.io/article/tabindex.html
tabindex=1, tabindex=0, tabindex=-1
tabindex=1, tabindex=0, tabindex=-1 요 며칠 사이 tabindex 속성이 저를 좀 당황스럽게 했습니다. 일반적으로 tabindex 속성은 키보드 접근성을 훼손할 우려가 있기 때문에 평소에 거들떠 보지도 않던 속성인데요. 해외 오픈소스 위지윅 에디터를 벤치마킹 하다가 tabindex="-1" 이라는 코드를 발견한 겁니다. 제가 알기로 소시적에 이런 코드는 표준이 아니었거든요. HTML4 명세는 tabindex를 다음과 같이 설명
naradesign.github.io
초점 또는 키보드의 위치를 나타내는 요소가 시각적으로 표시되지 않는 경우
tabindex="1"
문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요.
tabindex="0"
키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받되 초점을 받는 순서는 자연스러운 마크업 순서를 따릅니다.
tabindex="-1"
키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 줍니다. 초점을 받을 수 없기 때문에 "-1" 이외의 다른 음의 정수 값은 사실상 의미가 없습니다.
HTML
|
1
2
3
4
5
6
7
8
9
|
<span tabindex="0" class="link-einstein">Albert</span>
<span tabindex="0" class="link-curie">Marie</span>
<span tabindex="0" class="link-solvay">Ernest</span>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/1911_Solvay_conference.jpg" alt="" />
<figcaption id='einstein'></figcaption>
<figcaption id='curie'></figcaption>
<figcaption id='solvay'></figcaption>
</figure>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
* { margin:0; padding: 0; }
figure { width: 500px; position: relative; }
figure img { width:100%; height: auto; }
figcaption {
opacity: 0; transition: opacity 500ms;
position: absolute; border:3px solid #f00;
width: 50px; height: 50px;
}
#einstein { top: 120px; left: 405px; }
#curie { top: 195px; left: 275px; }
#solvay { top: 175px; left: 125px; }
.link-einstein:focus ~ figure #einstein,
.link-curie:focus ~ figure #curie,
.link-solvay:focus ~ figure #solvay { opacity: 1; }
|
cs |