NARADESIGN

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


CSS Quiz 4 : Horizontal Navigation.

본문 건너 뛰기

이군님께서 지난번 퀴즈때 실시간으로 중개를 참 재미있게 해주셔서 특별히 감사 드리구요. 주말에 퀴즈를 풀 수 있도록 해달라는 이군님의 요청에 따라 이번 퀴즈는 주말에 나갑니다. ^^ 퀴즈의 난이도는 지난번보다 더 쉽지만 이번 퀴즈는 이미지를 사용하면 안된다는 제약이 있습니다. 대신 실무에서 빈번하게 발생하는 상황을 그대로 퀴즈로 옮겼기 때문에 매우 실용적이라고 말씀드릴 수 있겠네요.

규칙

  1. 동일한 마크업을 이용하여 두 가지 형태의 수평 네비게이션을 구현해야 합니다.
  2. 의미에 알맞는 HTML 코드를 사용하고 표현을 위해 불필요한 코드를 사용하면 안됩니다.
  3. HTML 요소 및 id, class 선택자를 자유롭게 사용할 수 있습니다.
  4. 두 가지 형태의 수평 네비게이션을 구현하는 동안 단 하나의 이미지도 사용하면 안됩니다.
  5. HTML Validation을 통과해야 하지만 CSS Validation은 통과하지 않아도 됩니다.
  6. 퀴즈에 참여하실 분들께서는 정답을 제출하기 전까지 다른 분들의 정답 코드를 열람하시면 안됩니다.

문제 1

수평 네비게이션 1

IE 6~8, Firefox 3, Opera 9, Safari 3, Chrome 2 브라우저에서 동일한 형태로 렌더링 되어야 합니다. 메뉴 분리선의 높이는 11px 이 되어야 하고 선의 색상은 #cccccc 입니다. 분리선과 문자의 수직 정렬 위치는 제시된 화면과 일치해야 합니다. 분리선의 좌우 간격은 10px 정도로 설정하되 1~2px 정도의 오차가 발생해도 무방합니다. 선택된(hover, active, focus) 메뉴는 굵은 글씨와 밑줄이 표시되도록 구현해야 합니다.

문제 2

탭 형태의 수평 네비게이션 2 (Firefox, Safari, Chrome 의 렌더링 모습)

Firefox 3, Safari 3, Chrome 2 브라우저에서 동일하게 렌더링 되어야 합니다. 탭의 너비와 높이는 자유롭게 설정하되 선택된(hover, active, focus) 메뉴는 제시된 화면과 같이 돌출되어 보이도록 구현해야 합니다. 탭의 배경색은 #f8f8f8 이며 보더는 #cccccc 입니다. 탭의 좌우 상단 모서리는 5px 정도의 라운딩 효과가 적용되어야 합니다.

탭 형태의 수평 네비게이션 (IE, Opera 렌더링 모습)

IE 6~8, Opera 9 브라우저에서는 라운딩 효과를 적용하지 않아도 됩니다. 브라우저가 CSS 라운딩 표현을 아직 지원하지 않기 때문입니다.

기간

2009년 6월 14일(일) 자정 까지. 다른 분들의 정답을 참조하지 않는다면 이 기간동안 정답을 수정할 수 있습니다.

정답자에 대한 특전

빌붙기 1회 이용권을 드립니다. 언제든 제게 밥을 사달라고 조르실 수 있습니다. 지난 퀴즈를 통해 현재까지 3분께 맛있는 식사를 대접해 드렸습니다. ^^

현재까지 참여하신 분들

  1. 양영복 – http://cfs.tistory.com/custom/blog/23/233747/skin/images/090606.html (시멘틱 마크업 보완 필요 ^^)
  2. 황준상 – http://www.webpeace.net/css4.html , http://www.webpeace.net/css_js.html (완성! 밥쏠께! ^^)
  3. hong! – http://viewbox.hosting.paran.com/asdf2.html (완성! 밥 쏠께요! ^^)
  4. dohoons – http://dohoons.com/test/cssQ/quiz4/index.html (완성! 밥 쏠께요! ^^)
  5. 조성민 – http://elex.clus.org/quiz/quiz.html (완성! 밥 쏠께요! ^^)
  6. 이군 – http://e2goon.kr/study/Naradesign-Quiz/chapter04/round1.html (완성! 밥 쏠께요! ^^)
  7. 조경수 – http://odini84.cafe24.com/naradesign/naradesign_question01.html (완성! 밥 쏠께요! ^^)
  8. 홍스 – http://www.textarea.co.kr/plugins/lightbox/quiz.html (완성! 밥 쏠께요! ^^)
  9. 정찬명 – http://naradesign.net/open_content/quiz/horizontalNavigation/

지난 퀴즈 다시 보기

  1. Triangle
  2. Acid Smile
  3. Rounded Corner
분류: CSS,웹 디자인,웹 표준 | 2009년 6월 6일, 2:29 | 정찬명 | 댓글: 50개 |
트랙백URI - http://naradesign.net/wp/2009/06/06/871/trackback/

50개의 댓글이 있습니다.

  1. 황준상 댓글:

    자바스크립트는 사용 가능한가요? 활성화를 시키려면…

  2. 양영복 댓글:

    http://cfs.tistory.com/custom/blog/23/233747/skin/images/090606.html

    즐거운 토요일에 이런 즐거운 문제를ㅎㅎ
    그런데 글쓴 시간이 새벽 2시….
    즐거운 주말 보내세요~~

  3. 황준상 댓글:

    http://www.webpeace.net/css4.html 활성화에 대한 설명이.. 자바스크립트인지 그냥 :visited 인지…

  4. 황준상 댓글:

    http://www.webpeace.net/css_js.html 자바 스크립트까지 먹인거에요..ㅎ

  5. hong! 댓글:

    http://viewbox.hosting.paran.com/asdf2.html

    매번 재미있는 숙제 내주셔서 고맙습니다. ^^

  6. hong! 댓글:

    엇.. ie8에서 픽셀이.. 나가봐야해서 내일 해야겠네요.. ㅠ.ㅠ

  7. 청설모 댓글:

    작동하도록 스크립트까지 해야하나요? @_@
    다하고 와서 보니 스크립트까지 하신 분이 계셔서 일단 ㅌㅌ

  8. 정찬명 댓글:

    스크립트 처리는 안하셔도 관계가 없습니다. 하시면 더 좋겠죠 뭐. ^^;

  9. nuzl 댓글:

    이 네미게이션이야 말로
    많은 사람들이 xhtml 선언 (html4.1 선언등등) 을 생략 해서
    고통 스러워 했던 그 문제의 네비게이션 이군요

    http://simplebits.com/bits/css_tabs.html
    이링크에 있는게 거의 시초가 아닐까 생각 됩니다
    (2003년 에 만들어진…. )

  10. dohoons 댓글:

    문제는 일찌감치 보긴했는데 이제서야 올리네요ㅋ

    http://dohoons.com/test/cssQ/quiz4/index.html

  11. 정찬명 댓글:

    @양영복님 잘하셨네요. ^^; IE7에서 float 해제 안된 문제와 Webkit 계열에서 라운딩 효과 빠진 부분만 다시 확인해 주세요. ^^ 참, 첫 번째 메뉴 마우스 오버 할때 밑줄이 생겼으면 좋겠어요. ㅎㅎ. 감사합니다.

  12. 정찬명 댓글:

    @황준상
    참 잘하셨어요. ㅎㅎㅎ. 첫 번째 메뉴 마우스 오버할 때 밑줄이 생겼으면 좋겠어요~.

  13. 정찬명 댓글:

    @hong!
    hong!님 잘하셨습니다. 첫 번째 메뉴 Opera 브라우저 한번 확인해 주시구요. 첫 번째 메뉴는 마우스 오버 할 때 밑줄이 생겼으면 좋겠어요. ^^

  14. 정찬명 댓글:

    @nuzl님 코멘트 감사합니다. ^^

  15. 정찬명 댓글:

    @dohoons님, 잘하셨습니다. ^^; 첫 번째 메뉴 마우스 오버시 밑줄 처리까지 부탁드립니다. ㅎㅎ.

  16. 정찬명 댓글:

    ‘선택된’ 이라는 애매모호한 표현을 ‘선택된(hover, active, focus)’ 이라는 구체적인 표현으로 정정 했습니다. 첫 번째 메뉴가 선택된 경우 밑줄 표현까지 처리해 주세요. 밑줄 표현은 제가 뒤늦게 부탁드리는점 양해해 주세요. ^^; 감사합니다.

  17. 양영복 댓글:

    webkit의 라운딩이 topleft topright bottomright bottomleft 적용이 되지 않아 빼버렸는데 적용하는 코드가 달랐었군요.
    준상님 소스 참조해서 수정했습니다. 저는 정답자 제외해주세요~~
    오늘 또 즐거운 배움을 하나 얻어갑니다. 다음번 퀴즈에 다시 도전할께요^^

  18. 정찬명 댓글:

    참, 양영복님 ul, li 로 마크업 하시면 더 의미에 맞으실것 같아요. ^^; 지금 봤네요. ㅎㅎ.

  19. 양영복 댓글:

    다른분들이 리스트 태그로 만드실거 같아서 그냥 저런 방법도 있겠구나 하고 만든겁니다^^;(주말이라 타이핑하기가 귀찮아서는 절대 아닙니다ㅎㅎ)

  20. hong! 댓글:

    첫번째 메뉴는 overflow:hidden으로 줘서 언더라인이 보이지 않는데다가 em으로 쓰려다보니 맞추기가 쉽지 않더군요. 두 메뉴가 동일한 마크업을 사용한다는 전제에 .first을 넣었던건 두번째 메뉴에서 쓸모없는 태그로 쓰이는게 거슬렸고요.

    결국 이런저런 이슈로 단위는 px로, 첫번째 항목의 .first 클래스는 없이 새로 만들어봤습니다. 이거 찬명님께 빌붙기 할 게 아니라 오히려 사드려야 할 것 같다는 생각이 드네요.

    언제 종로에 오시게 되면 꼭! 연락주세요. ^^

  21. 정찬명 댓글:

    hong님 정답에 조금 더 근접하셨습니다. ^^; 한 가지 더! body 에 margin을 줘보니까 첫 번째 목록의 왼쪽에 보더가 그대로 보이네요. 이걸 어떻게 감술 수 있을까요? 일단 first 라는 클래스를 사용해도 됩니다. 하지만 사용하지 않고도 없애는 방법이 있습니다. 힘내세요! 화이팅!

  22. hong! 댓글:

    역시.. 장인은 그냥 되는게 아니군요. first 클래스 없이 한번 해봤습니다.

  23. 정찬명 댓글:

    @hong!
    훌륭합니다! ㅎㅎ. IE6 결과만 한번 더 확인해 주세요. 완벽함을 위하여. ^^;

  24. dohoons 댓글:

    밑줄이 있었군요~ 수정완료^^

  25. 조성민 댓글:

    http://elex.clus.org/quiz/quiz.html

    아~~ 이제야 봤습니다. 야근할려고 남았다가 일 안하고 이거하고 있어요 ㅋㅋㅋ

  26. hong! 댓글:

    visited 처리 하려고 하니 ie6과 그 이후가 방식이 다르더군요. 요구사항 이외의 기능은 접어두고, 그냥 키보드로 이동할 때의 효과만 줬어요.

    메뉴항목 이동시 움찔움찔 크기가 변하는 것이 완성되어있지 않은 느낌이 나서 삽질하다보니 ie6~7과 ie8이 bold시 단어간격이 틀리다는 것도 알게 되었네요. 공부해야할 부분만 더 찾아내고 갑니다. -_-;;

  27. hong! 댓글:

    visited 의 방식이 아니고, 정책이.. ^^;

  28. 이군 댓글:

    http://e2goon.kr/study/Naradesign-Quiz/chapter04/round1.html

    아… 이 글만 읽지 않았다면 전, 일찍 꿈나라로 갔을거에요~
    찬명선배님이 제출하신 문제 한사리 풀고 갑니다….

    한가지 거슬리는게 마우스나 키보드 이동 시 볼드체로 전환이되면서 가로폭이 늘어나게 되더라구요. 전 그게 많이 신경이 쓰이는데~ 확실한 해결법이 있다면 나중에 공개 부탁드려요~ :)

  29. 조성민 댓글:

    이군님 가로폭 문제는 a:hover 시 letter-spacing:-1px; 로 해결 가능합니다.

  30. 이군 댓글:

    @조성민
    수정했습니다. 덕분에 좋은 배움 얻습니다~ :)

  31. 이군 댓글:

    익스 6,7에서 크로스 브라우징 문제 발견~ ㅠ 퇴근 후 해결하도록 할게요~

  32. 정찬명 댓글:

    화이팅! 아자자자자~~~

  33. 나에 댓글:

    해야하는데 시간이 안나네요 T_T 돌아가시겠어요 흑흑 ㅠㅠㅠㅠㅠ
    혹시 놀고있는 퍼블리셔 아는 분 있어요? ㅠㅠ

  34. dohoons 댓글:

    아하..제가 문제에서 여러가지를 놓치군요..ㅋ
    border-bottom 도 수정했습니다.
    씨름하다가 결국에 핵을 써버렸네요 ㅠㅠ

  35. 정찬명 댓글:

    @나에
    요즈음 퍼블리셔 몸값이 얼만데 그렇게 쉽게 찾으려고 하세요~ ㅎㅎㅎ.

  36. 정찬명 댓글:

    @dohoons
    드디어 완성 하셨네요! 축하드립니다. ^^; 제가 밥 쏠께요.

  37. 조성민 댓글:

    @정찬명
    서울쪽은 퍼블리셔 연봉 잘 주나요?
    여긴 지방이라 그런지 아직까지도 윗사람들의 생각의 틀이 바뀌지 않고 부려 먹을려고만 하네요. 에휴~~
    좀 더 좋은 환경 만들어 보고자 오늘도 이렇게 열심히 일하면서 공부하고 그러는데 ^^

  38. 정찬명 댓글:

    @조성민
    찾는 곳은 점점 늘어나는데 사람이 많지 않으니 급여에도 곧 반영이 되어야 하지 않겠어요 ^^; 개인의 능력을 어떻게 인정 받는지에 따라 다르겠지만 전반적으로 최근 수요에 공급이 못따라가 주는건 사실인것 같아요. 사장님께 이런 말씀 전해 드리고 있을 때 잘 하시라고 압박 좀 넣으세요 ㅎㅎㅎ.

  39. 황준상 댓글:

    @조성민
    그래도 부려먹는다는건 어느정도 필요한 느낌이나 들죠..
    전 좀 부려먹었으면 좋겠는데..ㅜㅜ
    일없이 놀고있으니 압박은 커녕 언제짤릴지 고민만 하고있음..ㅜㅜ

  40. 조경수 댓글:

    아…. 문제가 잇어서 한번 풀어봣어요-_ㅠ
    허접하더라도 이해좀;ㅁ;

    http://odini84.cafe24.com/naradesign/naradesign_question01.html

  41. 정찬명 댓글:

    @조경수
    전혀 허접하지 않으신데요 ^^; 거의 완벽에 가까우신데요. 몇가지 보완해 주시면 좋을것 같습니다. 두 번째 형태의 메뉴 활성화 때에는 링크 텍스트에 밑줄 표시가 없고 아래쪽에 회색 보더가 사라져야 합니다.

    그리고 한번 더 도전해 보실만한 부분은 .first 라는 클래스가 없이도 구현이 가능하다는 점인데요. 첫 번째 목록에 클래스를 넣지 않으면 서버측 스크립트 작성시 이 목록을 예외사항으로 처리하지 않아도 되기 때문에 훨씬 효과적인 코드가 됩니다. ^^

    감사합니다.

  42. 조경수 댓글:

    일때문에 조금 늦게 올려요-_-; 말씀하신 부분 처리햇는데 다시한번 봐주세요;ㅁ;

  43. 정찬명 댓글:

    @조경수
    탭 메뉴 배경색이 예제와 다르네요 ^^; 고생하셨습니다.

  44. 정찬명 댓글:

    @홍스
    와~ 홍스님 멋져요! >.< 한 가지만 더 체크해 주세요. body에 마진을 넣어보면 첫 번째 메뉴의 보더가 그대로 드러나네요. ^^; 그것만 다시한번 점검해 주시면 완벽 합니다. 네, 정말 밥 쏩니다. ㅎㅎ

  45. 테레비초코 댓글:

    안녕하세요. 정찬명님! ^^
    테레비 운영자 테레비초코입니다.
    이번에 테레비가 시즌2로 오픈했습니다!

    아직 클로즈 베타 서비스인 테레비에서
    정찬명님께 초대장을 보내 드리고 싶습니다. ^^

    아래의 초대신청 포스트 주소를 클릭하신 후 메일 주소를 말씀해 주세요!
    바로 초대장 보내 드리겠습니당-! >_<

    *초대신청 포스트 주소입니다.
    http://blog.terebe.com/180

    간략한 설명을 보시려면 테레비 사용자 가이드를 참고 하세요!
    http://blog.terebe.com/181

    그럼 행복한 하루되세요~~!ㅇ^^ㅇ

  46. 홍스 댓글:

    ㅎㅎ 다시 수정했습니다 ^^;;;

  47. 정찬명 댓글:

    @테레비초코
    축하드립니다! 제가 처음으로 지우지 않는 광고글 입니다. ^^;

  48. 정찬명 댓글:

    @홍스
    홍스님 드디어 해내셨군요! 축하드립니다! ^^

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

댓글 쓰기

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

필수 아님

필수 아님