clear를 위해 overflow:auto;를 사용할 때 발생한 문제점

kukie.net 개편으로 인해 CSS를 이것저것 만지다가 발견했습니다.
원래 있었던 문제 인지는 잘 모르겠습니다.

문제:
키보드로 이동할 때 tab을 한번 더 먹음

알아보기

0611_overflow

A영역의 코드를 보겠습니다. (일부 생략)

.commentlist의 li에서 코멘트 내용이 나오고, 마지막에 그라바타 이미지와 글쓴이 등이 float 되도록 처리되어 있기 때문에 li 뒤에서 clear가 필요했습니다.
다른 오브젝트를 삽입하거나 핵을 쓰기는 싫어서 겉에 있는 li에 overflow:auto;를 줬지요.

작업을 다 끝내고 나서 키보드의 tab키를 마구 누르면서 브라우징을 하고 있었는데, 조금 이상한 점을 발견했습니다. tab키를 눌렀을 때의 포커스 순서가 “이름-날짜-다음 이름” 이렇게 넘어 가야 하는데, “이름-날짜-다음 li 블럭” 이런 형태로 넘어가더라고요.
한마디로 저로서는 쓸데 없는 tab 포커스의 영역이 하나 더 잡히고 있었습니다.

이 부분만의 문제가 아니라, clear를 위해서 overflow: auto;또는 hidden을 쓴 곳에서는 모두 같은 현상이 발생했습니다.
코멘트 부분의 문제는 작성자가 아래에 있는 것이 헷갈린다는 의견이 있어서 작성자를 위로 올리면서 간단하게 해결했고, 다른 부분들도 상황에 맞춰서 각각 다르게 손보았던 것 같습니다.

지금 저 부분의 코드만 따다가 예전의 코드로 수정해서 보면 또 그렇지 않은 것 같기도 하고..
다른 부분과 충돌이 생긴 것일 수도 있겠습니다.

혹시나 clearing을 위한 overflow:auto;를 사용하면서 이런 경우를 겪으신 적이 있나요?

Update
overflow를 사용할 경우 스크롤바의 생성이 고려되기 때문에, 그 스크롤바의 컨트롤를 위해 포커스가 생긴다고 합니다.
  • 개편된 쿠키닷넷 깔끔해졌넹~~ ^^

  • overflow: auto;를 사용하면 탭으로 이동시 포커싱이 되죠. 포커싱이 되어서 키보드만으로도 스크롤 바의 조작이 가능해 집니다. 쓸데 없는 기능은 아닌데 익숙하지가 않아서 좀 걸리죠. 디자인을 보면 꼭 overflow로 클리어 해줄 필요는 없는 것 같은데…다른 방법을 생각해 보시는 것도 좋을 것 같네요.

  • 아 스크롤 때문에 그런거군요?
    지금은 overflow를 사용한 곳이 거의 없어용~ 첨에 귀찮아서 대충 넣었다가 탭 포커스 추가 된걸 보고 놀래서 바꿨어요.
    예전에도 overflow로 clearing한 것들이 꽤 있었는데 왜 여태 포커스 문제를 몰랐는지 모르겠네요. 답변감사감사~