NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS Quiz 5 : Anchor Navigation.

본문 건너 뛰기

지난 퀴즈는 즐거우셨나요? 정답을 완성하신 분들은 언제든지 빌붙기 허용권을 꼭 이용해 주시기 바랍니다. ^^ 오늘은 지난번 퀴즈 출제 후 딱 일주일 만인데요. 재미난 퀴즈를 하나 더 준비 했습니다. 재미 뿐만 아니라 실무에서 언젠가는 꼭 한번 써먹을 수 있는 그런 실용적인 퀴즈라고 생각합니다. 그리고 이런 구현 방식은 사람의 일손을 덜어주기까지 한답니다. ^^; 일단 문제부터 보시죠.

문제

앵커를 이용한 페이지 탐색 과정(GIF 에니메이션)

지금 보시는 화면은 현재 페이지의 콘텐츠를 앵커로 탐색하는 아주 흔한 네비게이션 입니다. 그리고 특정 섹션을 탐색 할 때 다른 섹션은 화면에 노출하지 않고 스크롤 과업도 없애서 되도록 내용에 집중할 수 있도록 고려된 디자인 입니다. 탭을 누를 때마다 마치 슬라이드가 한장씩 넘어가는것 같죠? 오늘의 문제는 이런 인터렉션을 아래 제시된 HTML 코드에 여러분이 직접 CSS 코드를 입혀서 자바스크립트 없이 구현하는 것 입니다.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Quiz 5 : Anchor Navigation</title>
<style type="text/css">
/* 여러분의 CSS 코드를 이곳에 넣으세요 */
</style>
</head>
<body>
<div id="header">
<h1>Anchor Navigation</h1>
</div>
<ol id="navigation">
<li><a href="#s1">Menu A</a></li>
<li><a href="#s2">Menu B</a></li>
<li><a href="#s3">Menu C</a></li>
<li><a href="#s4">Menu D</a></li>
<li><a href="#s5">Menu E</a></li>
</ol>
<div id="body">
<div id="content">
<div id="s1" class="section">
<p>앵커 네비게이션에 오신것을 환영합니다.</p>
</div>
<div id="s2" class="section">
<p>이 페이지는 앵커를 이용해서 탐색할 수 있습니다.</p>
</div>
<div id="s3" class="section">
<p>자바스크립트를 사용하지 않고도 간단한 인터렉션이 가능하다는 것을 보여줍니다.</p>
</div>
<div id="s4" class="section">
<p>웹 표준을 준수하고 접근성도 뛰어나죠.</p>
</div>
<div id="s5" class="section">
<p>콘텐츠의 높이가 브라우저의 뷰포트 보다 작고 높이가 고정된 상황에서 적절하게 사용할 수 있습니다.</p>
</div>
</div>
</div>
<div id="footer">
<address>
<abbr title="Xpress Engine">XE</abbr> Open <abbr title="User Interface">UI</abbr> Project by <a href="http://naradesign.net/">Naradesign</a>.
</address>
</div>
</body>
</html>

규칙

여러분은 CSS 코드만 작성하시면 됩니다. HTML 코드는 이미 제가 작성해 둔 것을 복사해서 변경 없이 사용해야 하고 자바스크립트는 사용하시면 안됩니다. 글상자 레이아웃의 너비는 800px, 높이는 400px 이며 브라우저의 창 크기를 조절하더라도 글 상자는 항상 화면의 정중앙에 위치해야 합니다. 그 외 자질구레한 레이아웃 요소들의 너비와 높이 및 색상은 여러분이 각자 알아서 결정하시면 됩니다. IE 6~8, Firefox 3, Safari 4, Opera 9, Chrome 2 브라우저에서 호환성을 유지해야 하고 CSS 문법 유효성 검사는 통과하지 않으셔도 됩니다. 캡쳐된 예제는 상자 모서리들이 라운딩 처리가 되어 있지만 그렇게 하지 않으셔도 됩니다. 선택된 메뉴(:active) 배경색이 현재 검정색으로 표시되어 있지만 그렇게 하지 않으셔도 됩니다.

정답은 2009년 6월 30일 자정까지 받겠습니다. 여러분의 계정에 정답 페이지를 생성해서 작성하신 다음 댓글에 URL을 적어 주세요. 퀴즈에 참여하실 분들은 정답을 제출하기 전까지는 다른 분들의 정답을 열람하시면 안됩니다. 이번에도 성공하신 분들께는 빌붙기 이용권이 제공 됩니다. 정답을 맞추시면 언제든 제게 밥을 사달라고 조르실 수 있습니다. ^^ 도전하세요!

참여하신 분들(빌붙기 이용권 획득)

  1. dohoons – http://dohoons.com/test/cssQ/quiz5/test.html | http://dohoons.com/test/cssQ/quiz5/test2.html
  2. 조성민 – http://elex.clus.org/quiz/quiz5.html
  3. 황준상 – http://www.webpeace.net/css5.html
  4. 이군 – http://e2goon.kr/study/naradesign-quiz/quiz5.html
  5. vori – http://www.vori.net/css/AnchorNavigation.htm
  6. hong! – http://viewbox.hosting.paran.com/asdf3.html
  7. 조경수 – http://odini84.cafe24.com/naradesign/quiz5.html
  8. 현쿠 – http://rokustd.blogspot.com/
  9. 길앞잡이 – http://sljy.cafe24.com/temp/exam5.htm
  10. 양영복 – http://cfs.tistory.com/custom/blog/23/233747/skin/images/quiz5.html
  11. KevinCharis – http://www.kevincharis.com/quiz/anchor_Navigation.html
  12. 얼리 – http://esayc.styx.in/quiz/quiz.html
  13. 지연 – http://blog.naver.com/hautain/71028325
  14. 무엇인가 – http://ecdemo32978.cafe24.com/quiz/cssquiz5.html
  15. 조소 – http://pds15.egloos.com/pds/200906/29/28/css5.html
  16. 정찬명 – http://naradesign.net/open_content/quiz/anchorNavigation/

 

분류: CSS,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2009년 6월 13일, 4:53 | 정찬명 | 댓글: 104개 |
트랙백URI - http://naradesign.net/wp/2009/06/13/903/trackback/

104개의 댓글이 있습니다.

  1. dochoul 댓글:

    한가지 질문이 있어서 글 남깁니다…
    본문 영역을 드래그 한 후에 위아래로 스크롤 하면 밑에 있던 혹은 위에 글 내용이 보이게 되는데요…만약 사용자가 이런 반응을 보인다면 혹 문제가 되지 않을까요?

  2. 정찬명 댓글:

    @dochoul

    네, 맞습니다. 그게 문제입니다. 그래서 dohoons님과 같은 방법을 사용하면 좋은데요.
    http://dohoons.com/test/cssQ/quiz5/test.html
    이 방법은 :target 이라는 CSS3 가상 선택자를 이용하는 방법인데 IE 6~8 브라우저가 :target 선택자 지원을 못합니다.

    제가 실무에서 꼭 한번 써먹을 수 있다고 말씀드렸는데 이 말은 취소해야 할것 같습니다. ^^

  3. 샘표샘표 댓글:

    지금은 11년이니, 이런말 적는게 뭐하지만
    오버플로우 히든 적용하면 스크롤내려도 피 테그의 내용이 보이지 않습니다.
    포스트한게 2년이 지나서 지금은 많은 사람들이 알고 있을거라 생각합니다.

  4. 정찬명 댓글:

    @샘표샘표
    당시 오페라 브라우저에서는 #content 영역에 overflow:hidden을 부여하면 책갈피 기능이 동작하지 않는 버그가 있었습니다. 지금은 해결 되었지만요. ^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님