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

문제:

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

알아보기

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

<li>
	<p>낚이지 마세요..ㅎㅎ</p>
	<img src="/images/nogravatar.png" alt="kukie's Gravatar" />
	<cite><a href="#">kukie</a> Says:</cite> 
	<small><a href="#">November 16th, 2006 at 4:57 pm</a></small>
</li>

.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	}
.commentlist li {
	overflow: auto; /* 여깁니다 */
	border-bottom: 1px dotted #CCC;
	padding: 1em 0;
	}
.commentlist p {
	clear: both;
	margin: 1em  0 0 0;
	padding: 0;
	}
.commentlist img {
	display: block;
	float: left;
	margin: 0 10px 0 0;
	width: 40px;
	height: 40px;
	}
.commentlist cite {
	font-style: normal;
	display: block; 
	}
.commentlist small {
	font-size: 0.8em;
	display: block;
	}

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

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

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

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

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

Tags: CSS, overflow

이글은 Monday, November 20th, 2006 at 5:59 pm에 썼고 카테고리는 없다 (Uncategorized). 그리고 이 글에 대한 댓글을 RSS 2.0 feed 로 구독 할 수 도 있다. 할말이 있으면 댓글을 달고, 아니면 트랙백을 날려도 된다.