CSS Quiz 5 : Anchor Navigation.
지난 퀴즈는 즐거우셨나요? 정답을 완성하신 분들은 언제든지 빌붙기 허용권을 꼭 이용해 주시기 바랍니다. ^^ 오늘은 지난번 퀴즈 출제 후 딱 일주일 만인데요. 재미난 퀴즈를 하나 더 준비 했습니다. 재미 뿐만 아니라 실무에서 언젠가는 꼭 한번 써먹을 수 있는 그런 실용적인 퀴즈라고 생각합니다. 그리고 이런 구현 방식은 사람의 일손을 덜어주기까지 한답니다. ^^; 일단 문제부터 보시죠.
문제
지금 보시는 화면은 현재 페이지의 콘텐츠를 앵커로 탐색하는 아주 흔한 네비게이션 입니다. 그리고 특정 섹션을 탐색 할 때 다른 섹션은 화면에 노출하지 않고 스크롤 과업도 없애서 되도록 내용에 집중할 수 있도록 고려된 디자인 입니다. 탭을 누를 때마다 마치 슬라이드가 한장씩 넘어가는것 같죠? 오늘의 문제는 이런 인터렉션을 아래 제시된 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을 적어 주세요. 퀴즈에 참여하실 분들은 정답을 제출하기 전까지는 다른 분들의 정답을 열람하시면 안됩니다. 이번에도 성공하신 분들께는 빌붙기 이용권이 제공 됩니다. 정답을 맞추시면 언제든 제게 밥을 사달라고 조르실 수 있습니다. ^^ 도전하세요!
참여하신 분들(빌붙기 이용권 획득)
- dohoons – http://dohoons.com/test/cssQ/quiz5/test.html | http://dohoons.com/test/cssQ/quiz5/test2.html
- 조성민 – http://elex.clus.org/quiz/quiz5.html
- 황준상 – http://www.webpeace.net/css5.html
- 이군 – http://e2goon.kr/study/naradesign-quiz/quiz5.html
- vori – http://www.vori.net/css/AnchorNavigation.htm
- hong! – http://viewbox.hosting.paran.com/asdf3.html
- 조경수 – http://odini84.cafe24.com/naradesign/quiz5.html
- 현쿠 – http://rokustd.blogspot.com/
- 길앞잡이 – http://sljy.cafe24.com/temp/exam5.htm
- 양영복 – http://cfs.tistory.com/custom/blog/23/233747/skin/images/quiz5.html
- KevinCharis – http://www.kevincharis.com/quiz/anchor_Navigation.html
- 얼리 - http://esayc.styx.in/quiz/quiz.html
- 지연 - http://blog.naver.com/hautain/71028325
- 무엇인가 - http://ecdemo32978.cafe24.com/quiz/cssquiz5.html
- 조소 - http://pds15.egloos.com/pds/200906/29/28/css5.html
- 정찬명 – http://naradesign.net/open_content/quiz/anchorNavigation/
div id=”header” 를 닫는 부분이 없네요~
근데 힌트 없나요? IE에서 에로사항발생 ㅠ_ㅠ
앗 이런.. 형님이 어제 말씀하신.. 이따가 풀어야 겠어요.. ㅜㅜ
FF 와 IE6 에서만 테스트 했습니다.
빌붙기 이용권에는 관심이 없으므로(지방이라;;) 다른분께 기회를 드리고…
일이 급한 관계로 오래 붙들고 있을수가 없어서… 중요한 부분만 해서 도전해 봅니다.
메뉴에서 선택이 되었을 경우 검은바탕을 유지하는 방법을 모르겠네요;;
* { margin:0; padding:0; font-size:10pt; font-family:'Malgun Gothic', '맑은 고딕', Gulim, '굴림', Sans-Serif; }html { width:100%; height:100%; }
body { position:relative; top:50%; left:50%; margin-top:-200px; margin-left:-400px; width:800px; height:400px; border:2px solid #CCC; }
#header h1 { font-size:20pt; padding:0 16px; }
#navigation { margin:16px 0; height:30px; list-style:none; }
#navigation li { float:left; height:30px; padding-left:16px; }
#navigation li a { float:left; text-align:center; height:30px; line-height:30px; width:140px; color:#FFF; background:#393; }
#navigation li a:hover { background:#000; }
#navigation li a:active { background:#000; }
#body { clear:both; margin:0 16px; height:240px; overflow:hidden; background:#EEE; }
#body div.section { height:240px; }
#body div.section p { padding:16px; font-size:16pt; }
#footer { padding:16px; }
이번건 좀 어렵네요 ㅠㅠ
완벽하게 풀어내질 못해서 참가는 아니고
그냥 하던거 두가지 올려봅니다.
1. 선택된메뉴 검은바탕도 유지하지만 css3 선택자때문에
IE6~8 에서는 전혀 동작 안하는 버전
http://dohoons.com/test/cssQ/quiz5/test.html#s1
2. 위에 지기지님이 친절하게 스포일러 해주신거 참고해서 만들되
오페라에서 안되는 문제 수정한 버전. 대신 검은바탕 유지는 안됨
http://dohoons.com/test/cssQ/quiz5/test2.html#s1
이쯤만 하고 포기할랍니다 ㅋㅋ
그래도 좋은 공부가 되었어요~ 대충 만족..
게다가 전 이미 빌붙기 3장이나 모였는걸요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
@dohoons
어이쿠, 헤더 닫기를 빼먹었네요. 말씀 안해주셨으면 몰랐을꺼에요. 감사합니다. ^^ dohoons님한테는 크게 쏴야겠는데요. ㅎㅎ.
@황준상
화이팅~^^
@지기지
선착순이 아니므로 천천히 하셔도 됩니다. ^^; 정답 코드를 공개해 두셔서 제가 일단 그냥 보이지 않도록만 처리 했습니다. 퀴즈 규칙에 따라서 개인 계정에 정답화면을 올려주셨으면 좋겠습니다. 선택된 메뉴색 변경은 저도 아직 구현하지 못한 부분입니다. 만약 방법이 있으면 한번 연구해 보시고 안되도 그만입니다. 이번 퀴즈의 핵심은 아니니까요. ^^ 감사합니다.
정찬명의 생각…
CSS Quiz 5 : Anchor Navigation….
http://rokubane.blogspot.com/2009/06/css-5.html
IE6, 크롬, 파이어폭스로 해봤습니다만..실패네요
없는 지식을 쥐어짜고 여기저기서 빌려가며(…) 해봤는데 IE6에선 안되네요. 레이아웃도 깨지는걸 보니 기본도 확실히 틀린모양입니다. 일단 IE6는 포기하고^0^
크롬/파이어폭스에서 되긴되는데, 첫번째 메뉴의 내용이 표기되지않고 클릭해야만 표기되는건 모르겠습니다. 어디가 잘못된건지는 감정도는 잡겠는데 수정할 줄 모르겠어요
기간이 많으니 여기까지만하고, 시험보고나서 좀 더 해봐야겠습니다. 하는김에 책도 슬쩍보고..
http://elex.clus.org/quiz/quiz5.html
모양은 꾸미지 않고 대충했습니다.
머리를 조금만 굴려보면 생각보다 그렇게 어렵운 문제는 아닌거 같네요.
음 하나 좀 이상한 점은 오페라인데…스크롤쪽 관련해서 원래 버그가 있는건가요?
그것때문에 쓸데없는 짓(?) 하나를 넣었는데…암튼 동작은 잘되는거 같네요 ^^
아 그리고 저번 퀴즈 정답 문제 url 변경 부탁드립니다.
quiz4 : http://elex.clus.org/quiz/quiz.html
책갈피 기능과 오버플로우 히든의 조합!!!!!!!!!!!!!!!!!!!
? 오페라에선 왜 안되죠~???
쉽게 되면 퀴즈가 아니죠. ^^;
저도 도전 http://www.webpeace.net/css5.html
형님 일찍 일어나시네요? ㅋ 산에??
@준상
주말에는 눈이 더 일찍 떠지더라구. 식구들과 하루를 보낼 생각에 설레서. ^^;
http://e2goon.kr/study/naradesign-quiz/quiz5.html
해결완료! 아 이런 기쁨이 -_-; 오페라에서 오버플로우 히든 시 책갈피 기능이 안된다는 건 처음 알았음!!!
오오~ 이군님 드디어~ 축하합니다!
처음으로 도전해 봅니다.
http://www.vori.net/css/AnchorNavigation.htm
http://viewbox.hosting.paran.com/asdf3.html
저도 도전 :)
또한번 도전 ㅡ,. ㅡ
http://odini84.cafe24.com/naradesign/quiz5.html
이군님의 댓글에 힌트를 얻어 오토값을 줬는데 스크롤바가 생기네요. 놔두면 되긴하지만 없애면 오페라에서 안되고… 어렵군요 :( 어디가 문제지- _-a
http://rokustd.blogspot.com
wrap는 구글 블로그에서 body 적용이 제대로 안되서 넣었습니다
이군의 생각…
찬명님이 매주 내주는 퀴즈덕분에 나날이 2차전직을 할 것만 같아… 스탯이 오르겠는걸?…
@vori @hong @조경수
훌륭하십니다! 짝짝짝!
@현쿠님
현쿠님 잘못이 아닙니다. 오페라가 문제인거죠. ㅎㅎ. 어떻게든 잘 해결하시길 빌께요. ^^;
브라우저 히스토리 기능이 제대로 동작하게 하는 방법은 없을까요..?
@Joaquin
어떤 브라우저를 사용하시는지요?
근데요. header 하고 body 사이에 ol navigation 들어간게 쫌 어색해 보입니다.
크게 문제될것은 없지만, ol 의미상 블록형이라해도 최상위 레벨의 header와 body 디비젼 사이에 있는게 쫌 그래보여서요. header 안에 들어가야 할것 같은 개인적인 생각입니다.
글고 body는 이미 DOM에서 body 명령어를 사용하기때문에 body 를 id 로 생성하는 것도 쫌 그래요. 자바스크립트도 이미 사용하고 있는 명령어를 변수로 사용하면 안되는 규칙과 같은 이치임돠.
그냥 생각나는거 쫌 적어봤네요…
문제는 상당히 흥미롭습니다. 풀어보고 싶은 충동이…
조소님 오래간만에 오셨네요. ^^; 보다 구조적인 완벽함을 추구하자는 의미에서 좋은 지적인것 같아요. 그리고 #body 와 같은 아이디는 저도 오래전부터 고민해 왔던 문제이고 거의 사용하지 않다가 최근부터 사용하기 시작했는데요. 일단 문법적으로 문제가 없고 #header, #footer 라는 디비젼 사이에 존재하는 아이디 이름으로써 가장 직관적이고 좋은 이름이 그냥 #body 였다는 결론에 이른거죠. 엘리먼트로써의 body와 아이디로써의 #body를 혼동하는 경우가 흔하게 발생할 수 있을까요? 지금까지는 이걸 혼동해서 자바스크립트 구현에 문제가 된 경우가 없었거든요. 위험해 보일 뿐 실제로는 그렇지 않다는게 제 결론 이었어요.
문제 한번 도전해 보세요. 제가 밥 사드릴께요. ㅎㅎ.
태그 바디는 getElementsByTagName(“body”) 로 아이디는 getElementById(“body”) 서로 다르죠. 디비전 사이에 navigation은
[div id="navigation"]
[ol]
[li][/li]
[/ol]
[/div]
이거보다 그냥 [ol id="navigation"] 이 더 낳은듯..
[div]는 그냥 박스일뿐…
조소님 고순줄 알았는데 ? 아닌가요?
자바스크립트는 할줄 아세요?
윽~ 저 고수아니에요. 저는 먹구살기위해 코딩을 쫌 오래했을뿐, 전공도 글코 메인 관심분야도 아니어서 정찬명님처럼 전문적으로 웹표준스킬을 연구하진 않키 때문에 고수는 절대 아니예요.
제 개인적인 생각을 이런거 였습니다.
웹표준이 논리적인 코딩을 중요시 한다는 것은 다들 공감하실겁니다.
논리적인 측면에서 가장 중요시 하는 것중에 엘리먼트의 네이밍작업이죠.
네이밍은 일관적이고 통일적이어야 한다는 관점에서
header, navigation, body, footer 이런 네이밍 보다는
header, navigator, container, footer 이런 식에 네이밍이 더욱 일관적이라고 생각합니다. header, footer 처럼 누군가를 지칭하는 식의 네이밍을 부여한다면 나머지 최상위 엘리먼트 영역도 navigation 보다는 navigator , body 역시도 누군가를 지칭하는 식으로 일관적인 네이밍이 더 조치 않을까 생각하는 것입니다.
그리고 위 퀴즈 HTML 뼈대 구조(최상위 구조 엘리먼트)를 볼 때
div ol div div 으로 되어 있는데 ol 의 고유 엘리먼트 특성은 컨텐츠를 리스팅하는 것이라는 의미에서 뼈대구조로 사용한 것이 어색해 보인다는 것입니다.
그리고 누가 판단하더라도 특별한 이유없는 한
div ol div div 보다는 div div div div 가 더 일관적이라고 생각하지 않을까요?
저도 퀴즈 함 풀어볼께요.
글고 황준상님이 예시 하신
[div id="navigation"]
[ol]
[li][/li]
[/ol]
[/div]
이거 저두 반대합니다. 그래서 제가 네비게이션 ol 이 헤더로 들어가야 한다는 의견을 말한 것입니다.
고수 아니면 그냥 푸세요.. 여기 오시는 분들 님보다 다 고수분들 같은데..
조용히 계시면 좋겠네요.. 글고 네이밍은 일관적이고 통일적인건 맞는데요. 다른 사람들과 같이 작업을 할경우 서로 알아보기 쉽게 부여하는게 네이밍 아닐까요? 조소님의 관점에서 보면 위에 코드는 주석도 빠졌겠죠.. 하지만 저 네이밍이 navigation 이라해서 못알아보는 사람 아무도 없을걸요?? 조소님에겐 융통성이란게 전혀 없는분 같은데요? 어디 나와있는 정석같은걸 그대로만 쓰실려고 하시는거 같은데요.. 자바스크립트에선 예약어를 변수로 사용하지 않는게 맞습니다. HTML에서 아이디를 요소이름으로 사용하지 말라는 말이 있다면 w3c에 그런 문서를 찾아서 딴지를 거세요.. 그냥 느낌에 안될거라 말씀하지 마시고.. 글고 찬명님께서 출제하신 문제의 중요성을 모르시는거 같은데요.. “스크립트를 쓰지않은 탭이동” 이 관점이지.. 코드의 문제를 잡아내라고 출제하신건 아닌거같거든요.. 글고 위에 코드엔 전혀 아무 문제도 없네요.. 조소님의 입장에서 잘못된 코드처럼 보일뿐이죠.. “꽉막히고 융통성없는 조소님이 보는 입장” 에서의 코드인거죠.. 전문가시라면 어느정도 인정하고 받아드리겠지만.. 그런것도 아닌거 같은데요? 님처럼 정석을 고수하시는 분이.. 댓글 남기기에 분명히 “이름 : ” 이라고 써있는데.. “조소” 가 뭡니까? 오류 아닌가요?? 기본을 모르시는분이 기본을 논하시면 안되겠죠??
찬명님 안녕하세요~
오랜만에 댓글남겨보네요
여태 학교다닌다는 핑계로 못풀었는데
방학기념으로 한번 풀어봐요~~
방금보고 급하게 해봤는데
혹시 이상한거있으면 알려주세요 ㅠ
http://sljy.cafe24.com/temp/exam5.htm
와.. 황준상님 독설
많이 과한 반응같은데 진정하세요
제 이름이 조소입니다.
황준상님 말이 맞습니다. 퀴즈에 요점이나 그리고 나머지 코드도 잘못된 것이 전혀 없습니다.
퀴즈가 쫌 흥미로와서 구조코드를 보던 중 body 란 id가 야간 눈에 띠어서 댓글 남긴건데…
보통 문법적으로 문제가 없다고 해도 코딩하는 사람들은 본능적으로 기본 태그명을 id 나 class 명으로 사용하지는 않습니다. 누가 그렇케 하지 말하고 가르치지도 않는데 말입니다. body 뿐만 아니라 html head table td h1 li 등등해서..
문법적인 오류처럼 얘기한건 제 잘못이고 원칙은 황준상님말이 맞습니다.
뼈대구조 엘리먼트는 퀴즈의 요지가 아닌데… 구지 지적한 것은 제가 오바한 것 같습니다. 빈말이 아니라 처음에 댓글 쓰면서도 퀴즈를 내려고 러프하게 짠것을 괸히 애기 꺼내는 것 같기도 했었습니다.
조소님이나 준상님 말씀 모두 일리가 있고 충분히 각자의 관점에서 이야기 할 수 있다고 생각 합니다. 비록 이 포스팅에서 전달하고자 하는 메시지가 A였다 하더라도 B에 대해 서로 다른 관점에서 말 할 수 있다는 것이지요..(그러니 너무 격렬하지 않게 ㅡㅡ;)
옳고 그름을 따지는 과정에서 꼭 정답이 하나만 있는것도 아니고 꼭 논쟁을 해야만 정답을 얻을 수 있는것도 아니라고 생각 합니다. 정답을 찾지 못해도 나와 다른 생각이 있다는 것을 이해하고 알게 되면 그 다음 정답에 조금 더 가깝게 접근할 수 있지 않을까요?
만약 정답만을 포스팅 할 수 있었다면 저는 아무 글도 쓰지 못했을껍니다. 이렇게 댓글을 통해서 오고가는 여러분들의 생각들이 제 포스팅을 완성하는 것이라고 생각 하구요.
분위기가 조금 격해지기는 했지만 주신 의견들은 모두 충분히 가치가 있으니 서로의 마음에 작은 상처라도 남지 않았으면 좋겠네요.
흠.. 전 일부러 조소님께 딴지를 걸었습니다.. 이름이 조소님이시라니 죄송하구요.. 예전글들을 봐왔기에 조소님의 “성품” 에 조금 문제가 있는듯해서 나타나신김에 한마디 하려고 했던겁니다.. 감정적인 저의 행동에 사죄드립니다.
길앞잡이님 한번에 딱! 맞추셨네요. ^^ 축하드립니다.
안녕하세요~ 좋은 주말 보내셨나요?^^
늦었지만 열번째 채워봅니다.
http://cfs.tistory.com/custom/blog/23/233747/skin/images/quiz5.html
좋은 하루되세요~~
양영복님 굿입니다요~! ^^; 활기찬 한주 되세요.
우와 저 찬명님꼐 밥얻어먹을수있는거에요?
흐흐흐흐
담부터 퀴즈나오면 꼬박꼬박 해야겠어요
물론이죠~ ^^; 혹시 분당쪽에 들르시면 꼭 연락 주세요. ㅎㅎ.
안녕하세요 ^^
뜬금없는 질문하나만 해도 될까요?
오늘 관공서쪽 표준 URL 작업하다가 “2005년도 웹표준 작업 문서”를 보게되었는데 그 곳에
“표준 디렉토리 구조는 기관의 링크가 가능한 open_content/대분류 디렉토리/중분류 디렉토리로 구성하고, 한글/영문 표기시 공백 없이 하나의 언어로 생성하고, 가급적 영문 사용을 권장함”
이라고 나와 있더군요.
이 글귀 때문에 다른 퍼블리셔와 표준 URL 적용 방법에 이견 차이가 조금 있는데 어디까지를 커트라인으로 잡아야 될지 조언 부탁 드립니다.
커트라인이라 함은
1. {open_content/대분류/중분류/ + [영 + 숫자]}
2. 분류(디렉토리???)의 깊이
마지막으로 이 표준 URL 이라는게 얼마나 실효성이 있나요?
이 것을 사용함으로써 어떠한 정보에 대한 접근이 좀 더 편해졌다든지 하는 통계 자료 같은게 있나요?
야근하다 일하기 싫어져서 정찬명님 홈페이지에 들러 주저리 주저리 쓸데없는 질문하나 올려봅니다
그럼 정찬명님 오늘 밤도 편히 쉬세요 ^^
성민님 안녕하세요. ^^;
2005 행정기관 홈페이지 구축운영 표준지침에 포함된 ‘기관 링크 디렉토리 표준’ 부분이네요. 이 부분은 ‘가능한’ 또는 ‘권장’ 이라는 표현이 있기 때문에 될 수 있으면 지키면 좋고 그렇지 않아도 무방하다고 판단 합니다.
단, 이것을 지켰을 때
1. URL이 의미있게 구성 되어 기억하기 쉽고
2. 예측이 가능하며
3. 안정된 퍼머링크를 유지할 수 있다
는 장점이 있겠네요.
따라서 분류의 깊이나 표준에서 명시하지 않은 네이밍에 대해 자체적인 룰을 적용하셔도 괜찮고 딱 부러지게 이게 정답이라고 말씀드리기는 쉽지 않을 것 같습니다.
만약 저라면 표준안에 명시된 /open_content/ 라는 디렉토리는 생략하자는 제안을 할 것 같습니다. 그 이유는 오픈하지 않은 콘텐츠는 어차피 접근이 불가능 하기 때문에 이 디렉토리 이름이 무의미 하다는 생각 입니다. 괜히 URL만 길어진다는 것이죠.
그리고 분류는 통상 3단계의 깊이를 넘지 않도록 하는 것이 잘 된 분류라고 생각합니다. 물론 이 부분은 기획 담당자와 긴밀히 협조를 해야 할 부분이죠.
표준 URL의 실효성에 대한 근거 자료 같은 것은 본 적은 없고(아마 없을듯 ㅡㅡ;) 저도 그저 추론했을 뿐입니다.
성민님도 좋은 밤 되세요. ^^
헐퀴~ 황준상님 사죄라뇨.
원래 직설적이고 까칠한 성격이라 평소에도 욕을 많이 먹어서 익숙합니다.
조금 감정이 실렸을뿐 황준상님 의견이 틀린 부분이 없는서 미안해 않하셔도 됩니다.
위에 조성민님 너무 심오한 고민을 하시는 것 같은데요.
퍼블리셔들끼리 분류의 깊이와 네이밍을 얘기 하신다고 하시는데
기획자나 개발자가 고민해야 할 일이라고 생각합니다.
설령 퍼블리셔의 역량이 높다해도 디렉토리 구성이 IA(Information 아키텍쳐)를
기본으로 하기 때문에 기획자와 개발자의 의견을 존중해야 하는게 퍼블리셔의 입장이라고 생각하는데… 때론 개념없는 기획자는 퍼블리셔 보구 알아서 해달라고 하는 경우도 있는데… 음냐…
여자 치마와 디렉토리 구조는 짧으면 짧을 수록 조은거자나요.
표준URL 적용해야 한다면 그 이유에 해당 하는 문서도 있을것이라고 봅니다.
기획자분과 조금더 친해지려는 노력이 필요한 것 같아요.
그렇군요. 조소님의 글들을 보면 저랑 생각이 많이 비슷합니다.
그건 저도 인정하지 않을수가 없군요…
URL에 대해선 디렉토리와 파일명이 컨텐츠와 연관이 있어야 하지 않을까요?
검색도 접근성의 하나일지 모르겠으나.. 디렉토리와 파일명이 검색을 영향을 미친다는 문서를 본적이 있는거 같습니다.
안녕하세요?
디자이너가 웹표준코딩할려고 하니 맨땅에 해딩하다가 나라디자인에서 많은 도움 받고 갑니다. 이번퀴즈 재미나게 풀었습니다. 덕분에 내공이 많이 쌓여갑니다.
개인개정 미비로 퀴즈답을 올릴곳이 없는데…
참여할 수 있는 방법 있을까요??
아이쿠.. 이거 제가 해서 밥얻어먹게되면 반칙일듯 ㅠㅠ
아. 힘드네요. ㅋ
오페라~ 오페라~ 라라라 ^^;
http://www.kevincharis.com/quiz/anchor_Navigation.html
시간이 안나니 도저히 할 시간이 T_T
주말에 해봐야겠어요. 2주간 주말에도 알바를 했더니 개인시간도 없고 이건 뭐 T_T
지연님 안녕하세요? 이번 기회에 개인 계정 하나 만드시는게 어떨까요? 자신의 계정에 정답을 올리는 것도 하나의 규칙이니 예외 없이 진행하려고 합니다. 계정을 생성 하시면서 블로그등 여러가지 오픈 소스 설치해 보시는 것도 적극 권장 드리구요. ^^; 감사합니다.
아이단님은 정답 올려도 인정 안해드리려고 했습니다. 이미 직접 전해 들으셨기 때문이겠죠. ㅎㅎㅎ.
KevinCharis님, 멋지세요! 한편 제가 지금 IE6가 없는데 IE6에서도 작동을 하는지 굉장히 궁금해 지네요. dohoons님과 같은 방식으로 display를 제어하고 있는데 dohoons님 코드는 IE 7~8에서 작동하지 않고 KevinCharis님의 코드는 IE7~8에서 정상적으로 작동 하는군요. 왜 그런지 혹시 이유를 아시나요? 정말 몰라서 여쭤 봅니다. ㅎㅎ. dohoons님은 선택자로 #content 를 사용하고 KevinCharis님은 div#content 를 사용했는데 이 선택자 차이 때문일까요? 신기하네요. 퀴즈 내 놓고 오히려 뛰어나신 분들께 제가 한 수 배우는 군요. ^^
나에님 쉬엄쉬엄 하세요. 대체 얼마나 많이 버시려구. ㅋㅋㅋ.
// 정찬명님 ^^
100%로 정답도 아닌데요…과찬이시구요. ;;;
dohoons님 코드가 정상적으로 작동되는데요. ㅎㅎ
그리고 #content와 div#content의 차이는 없는 걸로 알고 있어요.
그냥. 배울 때부터 습관적으로. ㅎㅎ ;;;
그리고 낫 셀렉터와 타켓 클래스를 쓰니깐 오페라 문제가 해결되었어요. 원래는 ie계열과 오페라에서는 안 된다고 알고 있었는데…오페라에서 먹히네요. 이 문제의 경우 오페라를 제외한 브라우저에서는 있으나마나한 코드구요. 오페라를 생각하면 꼭 있어야 하고. 그래서 그냥. 넣었습니다. 일종의 핵이 되버렸네요. ㅋㅋㅋ
댓글이 자꾸 튕기는데..어떡하죠?
블로그쩜네이버쩜컴 슬래쉬 hautain 슬래쉬 71028325
자꾸 튕겨서….주소를 위와 같이 쓰네요….휴,,휴,,
블로그에 스타일만 올립니다. 이렇게 참여해도 되겠죠?
http://esayc.styx.in/quiz/quiz.html
저도 한번 시도 해봤습니다. ㅎㅎ
div#content 랑 div #content 랑 차이점은 뭘까요..?
ul#nav li 는 ul에 ID 로 #nav 가 지정된거고
#nav ul li는 #nav 박스 안의 ul
이부분을 어설프게 이해하고 넘겼더니 뭔가 확실한 정의를 못하겠네요
고수님이 등장해서 간단하게 정의 해주세요 ㅜㅜ
nuzl //
div#content 는 content라는 id를 가진 div 엘리먼트를 말합니다.
div #content 는 div 엘리먼트 안에 content 라는 id를 가진 어떠한 엘리먼트를 말합니다.
지연님 고생하셨는데 이거 안된다고 할 수도 없고 참. ㅎㅎ. 일단 선수 명단에 포함을 시켰는데요. 제가 렌더링을 확인할 수 없기 때문에 정답인지 아닌지는 잘 모르겠습니다. ^^
얼리님, 잘하셨습니다! ^^; 감사합니다.
매일 보기만 하다가 한번 해봅니다.
http://ecdemo32978.cafe24.com/quiz/cssquiz5.htm
요즘 퀴즈 풀면서 “이런 것도 되는구나” 하면서 정말 많이 배워갑니다.
KevinCharis 님 코드가 IE에서도 되는건 body 엘리먼트에 overflow:hidden 이 있어서인거같네영~ 설마 IE6 이 CSS3 를 지원할리는 없고 ㅎㅎ
무엇인가님 잘하셨습니다. 그런데 IE 6~7 에서 우측에 스크롤 기능이 표시가 되네요. 이걸 안보이도록 하시면 완벽할 것 같습니다. ^^
dohoons님 해설 감사합니다. 그런 거였군요!
지연님께. 지금 확인하니 naver.com 라는 키워드가 포함된 댓글이 모두 스팸 함에 들어가 있었습니다. 아마도 blog.naver.com 또는 cafe.naver.com 도메인을 이용해서 스팸글을 보내는 사람들 때문에 스팸 필터링 플러그인(Akismet)이 자동으로 걸러낸 모양 입니다. 이렇게 필터링이 되는 경우 제가 수동으로 살릴 수는 있는데 영원히 naver.com 도메인을 허용하는 방법은 잘 모르겠네요. 불편을 드려 죄송합니다.
재밋을 것 같아서 퀴즈 풀어봤는데, 역시나 많은 걸 생각하게 만드는 퀴즈였네요.
맞게 코딩했는지는 모르겠네요.
http://pds15.egloos.com/pds/200906/29/28/css5.html
ie6-7에서 그렇게 보이는줄 몰랐습니다. 아무튼 대충 수정 완료했습니다.
조소님, 잘하셨네요. 완벽합니다. 제가 밥 사드릴께요. 기분 좋은데요. ^^;
무엇인가님, 완성 하셨군요! 축하드립니다. ^^
정찬명님이 안티 달래시느라고 칭찬도 해주시고… 어째든 고맙습니다.
기본 제시된 html 을 고친 것은 코드를 줄여보겠다는 노력으로 이해해주시구요.
사실 오페라에서 작동이 안되서 컨닝했습니다. 그 부분이 퀴즈의 핵심인듯한데…
아쉽네요. 직접 풀지 못해서…
출근 전에 다른분들 소스 모두 관람 했는데요. 다들 훌륭하시더군요.
저도 가능한 소스를 줄이려고 노력했는데 저보다 저 간단히 작업하신 분들도 있고, 표현 방법이 독특하신 분들도 있고 여러모로 공부가 되는군요.
nuzl 님 질문에 대한 개인적인 의견 좀 적어봅니다.
div#content 와 #content 와의 차이점
코딩 시 id와 class 는 명시적인 방법과 묵시적인 방법으로 사용할 수 있습니다.
명시적은 콕 찝어서 div에 내가 이 id 를 선언했다고 구체적으로 선언.
예) div#content // content 라는 id 를 div에 사용한다.
묵시적은 특정 엘리먼트가 아닌 content라는 id가진 것에 선언.
예)#content // 어디선가 content 라는 id 를 가진 곳에 적용한다.
명시적은 명확하고, 묵시적은 유용합니다.
명시적은 콕찝어서 div 만 선언하는 것이기 때문에 div 외의 엘리먼트에는 적용이 안됩니다. 그래서 명확하고, 묵시적은 어떤 엘리먼트라도 해당 id에는 적용이 되기 때문에 광범위하고 유용하다고 볼 수 있습니다.
어떤게 조은거냐는 질문에는 논리적인 판단이 필요합니다.
상황에 맞게 사용해야 한다는 것입니다.
div#header 이것은 분명 웹페이지의 상단 영역(확실한 영역)을 지정한 것이고,
또한 id 는 중복 선언을 하면 안되기 때문에 명시적이 표현방법이 좋습니다.
묵시적인 방법은 광범위하고 유용하기 때문에 class 선언에 적합합니다.
예를 들어서 보더를 지우는 .noBorder 라는 class 를 선언할때 div.noBorder 라고
명시하면 div에만 적용 할 수 있습니다. 하지만 보더를 지우는 것이 div 뿐만 아니라 이미지 또는 다양한 엘리먼트의 보더를 지워야 하는 경우도 많을 겁니다.
이럴 때는 묵시적인 표현 방법이 훨씬 더 효과적일 것 같습니다.
물론 개인적인 의견이라 이견이 있을수 있습니다.
안티인거 인정 하시는 건가요? ㅎㅎㅎ. 그런데 안티가 꼭 나쁘다고는 생각 안해요. 받아들이는 사람에 따라서 자기 주장을 다시 되돌아 보게 하는 긍정적인 힘으로 작용할 수 있는 거니까요. 그런 측면에서 조소님은 제게 꽤 괜찮은 안티죠.
한편 저는 id, class를 모두 포함하여 조소님께서 명시적이라고 설명해 주신 방법보다 묵시적 방법을 더 권장하는데요. 그 이유는 HTML 요소가 어떻게 바뀌더라도 CSS 코드에는 덜 영향을 미치는 방법이기 때문입니다.
예를 들어 h2 에 선택자를 지정해 놨는데 이게 나중에 h3로 변경되면서 대신 스타일은 변경이 되지 않는다고 가정 했을 때 묵시적인 방법이 보다 융통성이 뛰어나다고 볼 수 있겠죠.
저도 개인적인 의견이라 이견이 있을 수 있습니다. 다른 사람의 의견이 맞을 수도 있다는 이런 표현 조소님 답지 않은데요. 하지만 매우 좋은 표현인것 같습니다. ^^
// 조소님
조소님의 의견 잘 들었습니다. ^^ 지나가다가 몇 자 덧붙이면.
결론은 #content와 div#content는 둘 다. 같은 엘리먼트를 가리키는 선택자입니다.
그런데. 호랑이가 담배를 피우던 시절에… #content를 인식하지 못 하는 구식 브라우저를 위해 div#content라는 선택자를 사용했었습니다.
하지만. 현재. 는 아무 의미. 가 없잖아요.
아직도. 외국. 의 CSS 코드를 살펴보면 div#content와 같은 잔재(?)를 자주 볼 수 있습니다. 저 또한 그렇게 코딩하는 습관. 을 가지고 있고요. ㅋㅋㅋ
약속된 시간이 지났습니다. ^^; 퀴즈에 참여했거나 의견 주신 모든 분들께 감사 드립니다. 제가 작성했던 페이지도 여기 올립니다.
제 정답도 여러분들과 크게 다르지 않지만 제가 생각하지 못했던 코드를 작성해 주신 분들도 몇 분 계셔서 저도 이참에 이것 저것 많이 배웠습니다.
정찬명의 답
http://naradesign.net/open_content/quiz/anchorNavigation/
참여해 주신 모든 분들께 빌붙기 이용권을 드리니 저를 찾아오시거나 우연한 기회에 마주치게 되시면 꼭 제게 말씀해 주시고 즐거운 식사 함께할 날을 기다려 보겠습니다. ^^
감사합니다.
빌붙기이용권 득템했내요. 이벤트에 당첨된게 얼마만인지…
모범 답안 잘 보았습니다. 머 전문가시니까 코딩이야 완벽하긴 하지만,
[-moz-border-radius:10px] 이 코드에 대해선 얘기 하고 싶습니다.
위 코드의 정체를 잘 모르겠습니다. 핵인지 특정브라우져의 유틸리티 코드인지…
어째든 정체가 모든 상관없이 특정 브라우져의 박스 모델 모서리가 라디우스 처리가 되더군요. 특정 브라우져에서는 적용이 안되고,
결국 크로스브라우져도 않되면서 정규코드도 아니라는 것입니다. 혹 CSS3?
많은 분들이 사용하셨던데 이유가 멀까요?
id, class 명시적, 암시적 선언에 대한 오해가 있을까봐 몇자 더 적어봅니다.
정답은 없습니다.
개인적으로 레이아웃 구조에는 div#header 처럼 명시하는 것이 저 개인적으로 확고부동한 안정적인 느낌 때문에 좋타고 예를 든것입니다.
중요한 것은 논리적인 타당성만 있다면 어떤 방식으로 작업하든 개인 스타일입니다.
정찬명님 처럼 네이밍 규칙을 체계적으로 가져가고 모든 것을 이름표를 때고 암시적으로 선언하여 가변성을 확보한다면 그 역시도 타당한 작업 방법입니다.
트래픽이 많아서 코드에 양을 조금이라도 줄여보겠다는 논리가 있다면 모든 것을 암시적으로 사용해도 그 역시 타당하다고 생각합니다.
바둑에서 9단을 신의 경지에 올랐다고 하여 입신 이라고 부릅니다.
하지만 바둑9단들도 스타일이 다 다릅니다. 수많은 바둑정석이 있다지만 그와중에도
9단들은 개개인마다 스타일이 다 다르고 바둑 둘때 마다 또 다릅니다.
수비후 마무리로 시대를 풍미했던 이창호, 시간 갠세이없는 전투바둑 조훈현국수님
공격만이 내 인생이다 유창혁, 실리 챙긴 후 난장판 싸움하는 이세돌
바둑 스타일에 정답이 없듯이 코딩 스타일에 대한 정답은 없지 않을까요?
CSS3 입니다. -moz 는 파이어폭스에서 적용되는거 같고.. -webkit 은 사파리에서 적용이 되는것 같습니다. 빨리 CSS로 라운드처리를 할수 있는 날이 오길…
아~ 찬명님..
빌붙기이용권은 어떻게 사용하나요?? ^^;
우연히 저를 만나시거나 또는 찾아오시면 됩니다. ㅎㅎㅎ. 후자를 추천 드립니다. 저는 성남시 분당구 서현역 근처에서 근무하고 있구요. 가까운 곳에 계시면 점심식사 시간에 오셔도 괜찮고 좀 멀리서 오시면 퇴근시간 즈음에 찾아오셔도 괜찮습니다. 제가 직접 가서 대접해 드리지 못하는점 양해해 주세요. ^^;
to 황준상님
css 3 는 아닙니다
3 에서는 그냥 border-radius: 라는게 생겼습니다
2.1이나 2 정도쯤에 생긴 브라우저 자체 기능 입니다
-moz-
-webkit-
이 두가지가 붙는다면 웹킷계열이나 모질라에서만 정상 작동 합니다(오페라용은 따로 있죠)
3가 나오기 이전에 만들어졌기 때문에 표준이라 할수 없어서 아마도 -moz- 이런 형식으로 표현 했을거라고 생각 합니다
3 에서 공식 지원하는 text-shadow(이전버전에도 코드는 있었지만 브라우저에서 표현하지 못했죠)와 box-shadow(이게 맞는지는 확실히모르겠네요) 등등 익스플로러에서만 안보일분 다른 브라우저에서는 최신버전에선 html5 와 함께 잘 지원 해주더군요
PS div#content 에 대해서는 그동안 구굴링으로 이해했어요
네, nuzl님 말씀대로 CSS3에 있는 속성을 그대로 지원하지 않고 현재로써는 브라우저별로 확장 속성처럼 지원하고 있지요. 그냥 CSS3 속성을 미리 지원해 버리게 되면 그 속성이 나중에 정식으로 권고안이 되지 못했을 때 함부로 뺄 수도 없는 노릇이라서 확장 형식으로 제공을 하는것 같습니다. ^^
안녕하세요?
항상 여기서 좋은 정보를 얻고 가다가 궁금한 점이 있어 글올립니다.
콘텐츠 부분(회색 영역)에 마우스를 대고 스크롤을 하면 콘텐츠가 위 아래로 움직이는데, 이것에 대한 해결방법은 없나여?
유저들은 마우스 스크롤은 브라우져 스크롤을 생각하고 행동을 취하는데, 콘텐츠가 위 아래로 움직이면 당황해 할꺼 같아서요^^
수잔님 안녕하세요? 문제점을 적절하게 지적해 주셨네요. ^^; 그 문제를 여러가지로 고민해 봤었지만 아직 해결 방법을 찾지 못했습니다. 지금까지의 결론은 자바스크립트를 사용하지 않으면 해결할 수 없다는 것이었는데요. 자바스크립트를 사용하게 되면 이 퀴즈의 룰을 깨는 것이므로 이런 CSS 구현 자체가 사실상 의미가 없어져 버리게 되지요.
연구 대상 입니다. 누군가 이 문제를 푼다면 그 분은 아마 천재일껍니다. ^___^
IE 8.0 6001 32bit 으로 본 여기 답안 전부 다 width 가 800이넘는군요
OS xp SP3입니다. 많게는 75px 적게는 45px 벗어나네요
제가보는브라우저가 이상한가요?
아 제가 잉여네요 깔기귀찮아서 미루다미루다 오늘 깐 IE8이 어느새 확대150%로 되있었네요
잉여라는 표현 왠지 모르게 적절한데요. ㅎㅎㅎ. 덕분에 한참 웃었습니다. 감사합니다. ^^
[...] 했습니다.원래 기획시에 CSS Quiz도 하려는 계획이 있었는데 이건 이미 정찬명님께서 진행하고 [...]
^^ 안녕하세요 미투데이 보다가 발견해서 보게 됐습니다.
퀴즈는 좀 지난거 같고… 공부해 볼려고 소스를 좀 고쳐보다가요
body안에 content를 5개로 나누고 css를 각각 적용 해보았습니다.
아래와같이요. 그러니 ie 와 파폭에서는 스크롤이 생기지 않더라고요.
ㅎㅎ 이미 해보셨을지도 모르지만 스크롤 문제에 대해 도움이 될까해서요
ㅠㅠ 하지만 오페라에서는 안되더라구요. 파폭에서도 악간의문제가 ^^;;;
실력의 한계가 OTL…
여기서는 항상 도움을 받아서 감사한 마음으로 댓글남깁니다.^^
앵커 네비게이션에 오신것을 환영합니다.
이 페이지는 앵커를 이용해서 탐색할 수 있습니다.
자바스크립트를 사용하지 않고도 간단한 인터렉션이 가능하다는 것을 보여줍니다.
웹 표준을 준수하고 접근성도 뛰어나죠.
콘텐츠의 높이가 브라우저의 뷰포트 보다 작고 높이가 고정된 상황에서 적절하게 사용할 수 있습니다.
^^ 코드를 그냥 넣으면 안되는거군요 ㅠㅠ
[div id="body"]
[div id="content"]
[div id="s1" class="section"]
[p]앵커 네비게이션에 오신것을 환영합니다.[/p]
[/div]
[/div]
[div id="content02"]
[div id="s2" class="section"]
[p]이 페이지는 앵커를 이용해서 탐색할 수 있습니다.[/p]
[/div]
[/div]
[div id="content03"]
[div id="s3" class="section"]
[p]자바스크립트를 사용하지 않고도 간단한 인터렉션이 가능하다는 것을 보여줍니다.[/p]
[/div]
[/div]
[div id="content04"]
[div id="s4" class="section"]
[p]웹 표준을 준수하고 접근성도 뛰어나죠.[/p]
[/div]
[/div]
[div id="content05"]
[div id="s5" class="section"]
[p]콘텐츠의 높이가 브라우저의 뷰포트 보다 작고 높이가 고정된 상황에서 적절하게 사용할 수 있습니다.[/p]
[/div]
[/div]
[/div]
앗 그리고 content css에 오바플로우를 다음과 같이 수정하고
배경색이랑 글자를 각각 다르게 줘봤습니다.^^
#content{ height:200px;margin:0 -20px 0 0; background:#f4f4f4; overflow:hidden;}
ㅠㅠ 어제 곰곰히 생각해보니 제 생각이 잛았네요 ㅎㅎ 저렇게 하면 안되는군요.
아 흠 부끄러워라 //^^// 소스 코드 있는 댓글은 삭제 안될까요? ^^
유승래님 안녕하세요? 승래님 코드도 생각해 볼 가치가 있다고 생각합니다. HTML 코드를 변경하지 말라는 것은 단지 이 게임의 룰이었을 뿐 얼마든지 깨셔도 됩니다. 부끄러워 하실 필요가 없습니다. ^^
^^넵 근데 왜 오페라에선 안먹을까요 고민해바야 하겠네요
많이 늦은감이 있지만, 한번 해봤습니다 ㅋ_ㅋ;
다행히도 css오류는 안생기네요…^^; 라운딩 처리는 못했지만…;
재밌었습니다~
솔직히 하구나서 준상님 소스보니, 입이 쩍~ 벌어지더군요 ㅎㅎ;;;
부끄러워서 차마 소스는 못올리겠습니다..ㅋ
@마약
재미있으셨다니 다행입니다. 나중에 퀴즈내기 좋은 문제 있으시면 살짝 귀뜸좀 해주세요. 다음에는 무슨 퀴즈를 낼까 고민중입니다. ㅎㅎ
여러가지 생각을 하게 만드는 퀴즈네요 ^^
나름 정의해보고 머리속으로 풀어봤으나….
복잡한 css구조를 생각하여 대입시켰습니다.
하지만 느낀건 발상의 전환과 틀에 박히지 않아야한다는걸 다시금 상기 시켰네요