CSS Quiz 4 : Horizontal Navigation.
이군님께서 지난번 퀴즈때 실시간으로 중개를 참 재미있게 해주셔서 특별히 감사 드리구요. 주말에 퀴즈를 풀 수 있도록 해달라는 이군님의 요청에 따라 이번 퀴즈는 주말에 나갑니다. ^^ 퀴즈의 난이도는 지난번보다 더 쉽지만 이번 퀴즈는 이미지를 사용하면 안된다는 제약이 있습니다. 대신 실무에서 빈번하게 발생하는 상황을 그대로 퀴즈로 옮겼기 때문에 매우 실용적이라고 말씀드릴 수 있겠네요.
규칙
- 동일한 마크업을 이용하여 두 가지 형태의 수평 네비게이션을 구현해야 합니다.
- 의미에 알맞는 HTML 코드를 사용하고 표현을 위해 불필요한 코드를 사용하면 안됩니다.
- HTML 요소 및 id, class 선택자를 자유롭게 사용할 수 있습니다.
- 두 가지 형태의 수평 네비게이션을 구현하는 동안 단 하나의 이미지도 사용하면 안됩니다.
- HTML Validation을 통과해야 하지만 CSS Validation은 통과하지 않아도 됩니다.
- 퀴즈에 참여하실 분들께서는 정답을 제출하기 전까지 다른 분들의 정답 코드를 열람하시면 안됩니다.
문제 1
IE 6~8, Firefox 3, Opera 9, Safari 3, Chrome 2 브라우저에서 동일한 형태로 렌더링 되어야 합니다. 메뉴 분리선의 높이는 11px 이 되어야 하고 선의 색상은 #cccccc 입니다. 분리선과 문자의 수직 정렬 위치는 제시된 화면과 일치해야 합니다. 분리선의 좌우 간격은 10px 정도로 설정하되 1~2px 정도의 오차가 발생해도 무방합니다. 선택된(hover, active, focus) 메뉴는 굵은 글씨와 밑줄이 표시되도록 구현해야 합니다.
문제 2
Firefox 3, Safari 3, Chrome 2 브라우저에서 동일하게 렌더링 되어야 합니다. 탭의 너비와 높이는 자유롭게 설정하되 선택된(hover, active, focus) 메뉴는 제시된 화면과 같이 돌출되어 보이도록 구현해야 합니다. 탭의 배경색은 #f8f8f8 이며 보더는 #cccccc 입니다. 탭의 좌우 상단 모서리는 5px 정도의 라운딩 효과가 적용되어야 합니다.
IE 6~8, Opera 9 브라우저에서는 라운딩 효과를 적용하지 않아도 됩니다. 브라우저가 CSS 라운딩 표현을 아직 지원하지 않기 때문입니다.
기간
2009년 6월 14일(일) 자정 까지. 다른 분들의 정답을 참조하지 않는다면 이 기간동안 정답을 수정할 수 있습니다.
정답자에 대한 특전
빌붙기 1회 이용권을 드립니다. 언제든 제게 밥을 사달라고 조르실 수 있습니다. 지난 퀴즈를 통해 현재까지 3분께 맛있는 식사를 대접해 드렸습니다. ^^
현재까지 참여하신 분들
- 양영복 – http://cfs.tistory.com/custom/blog/23/233747/skin/images/090606.html (시멘틱 마크업 보완 필요 ^^)
- 황준상 – http://www.webpeace.net/css4.html , http://www.webpeace.net/css_js.html (완성! 밥쏠께! ^^)
- hong! – http://viewbox.hosting.paran.com/asdf2.html (완성! 밥 쏠께요! ^^)
- dohoons – http://dohoons.com/test/cssQ/quiz4/index.html (완성! 밥 쏠께요! ^^)
- 조성민 - http://elex.clus.org/quiz/quiz.html (완성! 밥 쏠께요! ^^)
- 이군 – http://e2goon.kr/study/Naradesign-Quiz/chapter04/round1.html (완성! 밥 쏠께요! ^^)
- 조경수 – http://odini84.cafe24.com/naradesign/naradesign_question01.html (완성! 밥 쏠께요! ^^)
- 홍스 – http://www.textarea.co.kr/plugins/lightbox/quiz.html (완성! 밥 쏠께요! ^^)
- 정찬명 – http://naradesign.net/open_content/quiz/horizontalNavigation/
자바스크립트는 사용 가능한가요? 활성화를 시키려면…
http://cfs.tistory.com/custom/blog/23/233747/skin/images/090606.html
즐거운 토요일에 이런 즐거운 문제를ㅎㅎ
그런데 글쓴 시간이 새벽 2시….
즐거운 주말 보내세요~~
http://www.webpeace.net/css4.html 활성화에 대한 설명이.. 자바스크립트인지 그냥 :visited 인지…
http://www.webpeace.net/css_js.html 자바 스크립트까지 먹인거에요..ㅎ
http://viewbox.hosting.paran.com/asdf2.html
매번 재미있는 숙제 내주셔서 고맙습니다. ^^
엇.. ie8에서 픽셀이.. 나가봐야해서 내일 해야겠네요.. ㅠ.ㅠ
작동하도록 스크립트까지 해야하나요? @_@
다하고 와서 보니 스크립트까지 하신 분이 계셔서 일단 ㅌㅌ
스크립트 처리는 안하셔도 관계가 없습니다. 하시면 더 좋겠죠 뭐. ^^;
이 네미게이션이야 말로
많은 사람들이 xhtml 선언 (html4.1 선언등등) 을 생략 해서
고통 스러워 했던 그 문제의 네비게이션 이군요
http://simplebits.com/bits/css_tabs.html
이링크에 있는게 거의 시초가 아닐까 생각 됩니다
(2003년 에 만들어진…. )
문제는 일찌감치 보긴했는데 이제서야 올리네요ㅋ
http://dohoons.com/test/cssQ/quiz4/index.html
@양영복님 잘하셨네요. ^^; IE7에서 float 해제 안된 문제와 Webkit 계열에서 라운딩 효과 빠진 부분만 다시 확인해 주세요. ^^ 참, 첫 번째 메뉴 마우스 오버 할때 밑줄이 생겼으면 좋겠어요. ㅎㅎ. 감사합니다.
@황준상
참 잘하셨어요. ㅎㅎㅎ. 첫 번째 메뉴 마우스 오버할 때 밑줄이 생겼으면 좋겠어요~.
@hong!
hong!님 잘하셨습니다. 첫 번째 메뉴 Opera 브라우저 한번 확인해 주시구요. 첫 번째 메뉴는 마우스 오버 할 때 밑줄이 생겼으면 좋겠어요. ^^
@nuzl님 코멘트 감사합니다. ^^
@dohoons님, 잘하셨습니다. ^^; 첫 번째 메뉴 마우스 오버시 밑줄 처리까지 부탁드립니다. ㅎㅎ.
‘선택된’ 이라는 애매모호한 표현을 ‘선택된(hover, active, focus)’ 이라는 구체적인 표현으로 정정 했습니다. 첫 번째 메뉴가 선택된 경우 밑줄 표현까지 처리해 주세요. 밑줄 표현은 제가 뒤늦게 부탁드리는점 양해해 주세요. ^^; 감사합니다.
webkit의 라운딩이 topleft topright bottomright bottomleft 적용이 되지 않아 빼버렸는데 적용하는 코드가 달랐었군요.
준상님 소스 참조해서 수정했습니다. 저는 정답자 제외해주세요~~
오늘 또 즐거운 배움을 하나 얻어갑니다. 다음번 퀴즈에 다시 도전할께요^^
참, 양영복님 ul, li 로 마크업 하시면 더 의미에 맞으실것 같아요. ^^; 지금 봤네요. ㅎㅎ.
다른분들이 리스트 태그로 만드실거 같아서 그냥 저런 방법도 있겠구나 하고 만든겁니다^^;(주말이라 타이핑하기가 귀찮아서는 절대 아닙니다ㅎㅎ)
첫번째 메뉴는 overflow:hidden으로 줘서 언더라인이 보이지 않는데다가 em으로 쓰려다보니 맞추기가 쉽지 않더군요. 두 메뉴가 동일한 마크업을 사용한다는 전제에 .first을 넣었던건 두번째 메뉴에서 쓸모없는 태그로 쓰이는게 거슬렸고요.
결국 이런저런 이슈로 단위는 px로, 첫번째 항목의 .first 클래스는 없이 새로 만들어봤습니다. 이거 찬명님께 빌붙기 할 게 아니라 오히려 사드려야 할 것 같다는 생각이 드네요.
언제 종로에 오시게 되면 꼭! 연락주세요. ^^
hong님 정답에 조금 더 근접하셨습니다. ^^; 한 가지 더! body 에 margin을 줘보니까 첫 번째 목록의 왼쪽에 보더가 그대로 보이네요. 이걸 어떻게 감술 수 있을까요? 일단 first 라는 클래스를 사용해도 됩니다. 하지만 사용하지 않고도 없애는 방법이 있습니다. 힘내세요! 화이팅!
역시.. 장인은 그냥 되는게 아니군요. first 클래스 없이 한번 해봤습니다.
@hong!
훌륭합니다! ㅎㅎ. IE6 결과만 한번 더 확인해 주세요. 완벽함을 위하여. ^^;
밑줄이 있었군요~ 수정완료^^
http://elex.clus.org/quiz/quiz.html
아~~ 이제야 봤습니다. 야근할려고 남았다가 일 안하고 이거하고 있어요 ㅋㅋㅋ
visited 처리 하려고 하니 ie6과 그 이후가 방식이 다르더군요. 요구사항 이외의 기능은 접어두고, 그냥 키보드로 이동할 때의 효과만 줬어요.
메뉴항목 이동시 움찔움찔 크기가 변하는 것이 완성되어있지 않은 느낌이 나서 삽질하다보니 ie6~7과 ie8이 bold시 단어간격이 틀리다는 것도 알게 되었네요. 공부해야할 부분만 더 찾아내고 갑니다. -_-;;
visited 의 방식이 아니고, 정책이.. ^^;
http://e2goon.kr/study/Naradesign-Quiz/chapter04/round1.html
아… 이 글만 읽지 않았다면 전, 일찍 꿈나라로 갔을거에요~
찬명선배님이 제출하신 문제 한사리 풀고 갑니다….
한가지 거슬리는게 마우스나 키보드 이동 시 볼드체로 전환이되면서 가로폭이 늘어나게 되더라구요. 전 그게 많이 신경이 쓰이는데~ 확실한 해결법이 있다면 나중에 공개 부탁드려요~ :)
이군님 가로폭 문제는 a:hover 시 letter-spacing:-1px; 로 해결 가능합니다.
@조성민
수정했습니다. 덕분에 좋은 배움 얻습니다~ :)
익스 6,7에서 크로스 브라우징 문제 발견~ ㅠ 퇴근 후 해결하도록 할게요~
화이팅! 아자자자자~~~
해야하는데 시간이 안나네요 T_T 돌아가시겠어요 흑흑 ㅠㅠㅠㅠㅠ
혹시 놀고있는 퍼블리셔 아는 분 있어요? ㅠㅠ
아하..제가 문제에서 여러가지를 놓치군요..ㅋ
border-bottom 도 수정했습니다.
씨름하다가 결국에 핵을 써버렸네요 ㅠㅠ
@나에
요즈음 퍼블리셔 몸값이 얼만데 그렇게 쉽게 찾으려고 하세요~ ㅎㅎㅎ.
@dohoons
드디어 완성 하셨네요! 축하드립니다. ^^; 제가 밥 쏠께요.
@정찬명
서울쪽은 퍼블리셔 연봉 잘 주나요?
여긴 지방이라 그런지 아직까지도 윗사람들의 생각의 틀이 바뀌지 않고 부려 먹을려고만 하네요. 에휴~~
좀 더 좋은 환경 만들어 보고자 오늘도 이렇게 열심히 일하면서 공부하고 그러는데 ^^
@조성민
찾는 곳은 점점 늘어나는데 사람이 많지 않으니 급여에도 곧 반영이 되어야 하지 않겠어요 ^^; 개인의 능력을 어떻게 인정 받는지에 따라 다르겠지만 전반적으로 최근 수요에 공급이 못따라가 주는건 사실인것 같아요. 사장님께 이런 말씀 전해 드리고 있을 때 잘 하시라고 압박 좀 넣으세요 ㅎㅎㅎ.
@조성민
그래도 부려먹는다는건 어느정도 필요한 느낌이나 들죠..
전 좀 부려먹었으면 좋겠는데..ㅜㅜ
일없이 놀고있으니 압박은 커녕 언제짤릴지 고민만 하고있음..ㅜㅜ
아…. 문제가 잇어서 한번 풀어봣어요-_ㅠ
허접하더라도 이해좀;ㅁ;
http://odini84.cafe24.com/naradesign/naradesign_question01.html
@조경수
전혀 허접하지 않으신데요 ^^; 거의 완벽에 가까우신데요. 몇가지 보완해 주시면 좋을것 같습니다. 두 번째 형태의 메뉴 활성화 때에는 링크 텍스트에 밑줄 표시가 없고 아래쪽에 회색 보더가 사라져야 합니다.
그리고 한번 더 도전해 보실만한 부분은 .first 라는 클래스가 없이도 구현이 가능하다는 점인데요. 첫 번째 목록에 클래스를 넣지 않으면 서버측 스크립트 작성시 이 목록을 예외사항으로 처리하지 않아도 되기 때문에 훨씬 효과적인 코드가 됩니다. ^^
감사합니다.
일때문에 조금 늦게 올려요-_-; 말씀하신 부분 처리햇는데 다시한번 봐주세요;ㅁ;
@조경수
탭 메뉴 배경색이 예제와 다르네요 ^^; 고생하셨습니다.
http://www.textarea.co.kr/plugins/lightbox/quiz.html
음…맞으면 정말 밥사줄거죠? ^^
@홍스
와~ 홍스님 멋져요! >.< 한 가지만 더 체크해 주세요. body에 마진을 넣어보면 첫 번째 메뉴의 보더가 그대로 드러나네요. ^^; 그것만 다시한번 점검해 주시면 완벽 합니다. 네, 정말 밥 쏩니다. ㅎㅎ
안녕하세요. 정찬명님! ^^
테레비 운영자 테레비초코입니다.
이번에 테레비가 시즌2로 오픈했습니다!
아직 클로즈 베타 서비스인 테레비에서
정찬명님께 초대장을 보내 드리고 싶습니다. ^^
아래의 초대신청 포스트 주소를 클릭하신 후 메일 주소를 말씀해 주세요!
바로 초대장 보내 드리겠습니당-! >_<
*초대신청 포스트 주소입니다.
http://blog.terebe.com/180
간략한 설명을 보시려면 테레비 사용자 가이드를 참고 하세요!
http://blog.terebe.com/181
그럼 행복한 하루되세요~~!ㅇ^^ㅇ
ㅎㅎ 다시 수정했습니다 ^^;;;
@테레비초코
축하드립니다! 제가 처음으로 지우지 않는 광고글 입니다. ^^;
@홍스
홍스님 드디어 해내셨군요! 축하드립니다! ^^
[...] 지난 퀴즈는 즐거우셨나요? 정답을 완성하신 분들은 언제든지 빌붙기 허용권을 꼭 이용해 주시기 바랍니다. ^^ 오늘은 지난번 퀴즈 출제 후 딱 일주일 만인데요. 재미난 퀴즈를 하나 더 준비 했습니다. 재미 뿐만 아니라 실무에서 언젠가는 꼭 한번 써먹을 수 있는 그런 실용적인 퀴즈라고 생각합니다. 그리고 이런 구현 방식은 사람의 일손을 덜어주기까지 한답니다. ^^; 일단 문제부터 보시죠. [...]