NARADESIGN

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


CSS Quiz 3 : Rounded Corner!

본문 건너 뛰기

CSS Quiz 1~2탄이 다소 아쉬운 분들을 위해 바로 3탄을 준비 했습니다. 이번 문제는 조금 더 실용적이고 조금 더 쉽습니다. 주어진 마크업을 이용하여 제시된 화면을 구현하는 것이 이번 퀴즈 입니다. 늘 그렇지만 정답은 하나가 아닐 수 있습니다.

주어진 Markup은 다음과 같습니다.

<ul>
    <li><a href="#">메뉴 하나</a></li>
    <li><a href="#">메뉴 둘</a></li>
    <li><a href="#">메뉴 셋</a></li>
    <li><a href="#">메뉴 넷</a></li>
    <li><a href="#">메뉴 다섯</a></li>
</ul>

코드 설명 : 전형적인 메뉴 네비게이션 마크업 입니다. 이 코드를 사용해야 하고 이것을 수정하거나 다른 요소 또는 속성을 추가할 수 없습니다. html, head, style, body 와 같은 문서 기본 코드는 물론 사용해야 함.

다음 화면을 CSS로 구현하세요.

모서리가 둥근 수직 메뉴 네비게이션

화면 설명 : 문서의 배경색이 #EEEEEE 이고 상자의 보더 색이 #CCCCCC 이며 상자의 배경색이 #FFFFFF 인 수직 메뉴 네비게이션. 상자의 모서리는 라운딩 처리가 되어 있다.

다음과 같은 제한이 있습니다.

  1. HTML은 주어진 마크업을 사용해야 하고 절대로 변형하거나 다른 코드를 추가해서는 안됩니다.
  2. HTML/CSS 이외 다른 언어는 사용할 수 없으며 HTML/CSS 표준 문법을 준수해야 합니다. HTML Validation, CSS Validation.
  3. CSS 코드 작성시 오직 타입 선택자하위 선택자만 사용할 수 있습니다. 1번 규칙에 따라서 당연히 ID 선택자, CLASS 선택자는 사용할 수 없습니다.
  4. CSS 는 UL, LI, A 요소 이외 요소에 적용하지 않습니다.
  5. 단 하나의 이미지만을 사용할 수 있습니다. 이미지는 스스로 창작해서 준비하세요.
  6. 상자는 고정폭 너비(200px)를 갖지만 높이는 메뉴의 개수에 따라 가변적으로 대응이 가능해야 합니다.
  7. 문서의 배경색이 달라지더라도 상자의 배경은 흰색으로, 둥근 모서리는 자연스럽게 유지되어야 합니다.
  8. IE 6~8, Firefox 3, Safari 3, Opera 9, Chrome 1 브라우저에서 깨지지 않고 거의 동일하게 보여야 합니다. 단, 제시한 화면과 픽셀 그리드를 정확하게 일치시킬 필요는 없습니다.

퀴즈 참여자에 대한 특전.

  1. 가장 먼저 정답을 제출하신 한 분께는 프리미엄 빌붙기 1회 허용권.
  2. 늦더라도 ‘양심껏 도전'(정답을 보지 않고 스스로 해결하신)해서 정답을 제출하신 선착순 아홉 분께는 빌붙기 1회 허용권.

그냥 빌붙기프리미엄 빌붙기의 차이에 대해 궁금하신 분들은 CSS Quiz 2! 결과를 확인하세요! 포스팅 하단을 참고해 주세요. 농담이 아니라 어느 곳에서든 정답자 가운데 저를 보시는 분께는 밥을 쏘겠습니다. 집사람에게 결재도 다 받아 놨습니다!

현재까지 퀴즈에 참여하신 분들.

  1. 황준상 – http://www.webpeace.net/test3.html 정답 인정. 프리미엄 빌붙기 1회 허용권 획득.
  2. 지기지 – http://www.zigizi.net/rc.html 메뉴가 짝수인 경우에 대한 고려 필요. 고치시면 인정해 드립니다. ^^
  3. dohoons – http://dohoons.com/test/cssQ/quiz3/index.html 정답 인정. 빌붙기 1회 허용권 획득.
  4. 김성준 – http://temp.azki.org/ 정답 인정. 빌붙기 1회 허용권 획득.
  5. 나에 – http://rhplus.kr/dev/naradesign_quiz/003/quiz.html 정답 인정. 빌붙기 1회 허용권 획득.
  6. 청설모 – http://reedids.springnote.com/pages/3245732 정답 인정. 빌붙기 1회 허용권 획득.
  7. terijoon – http://terijoon.tistory.com/entry/CSS-Quiz-3-Rounded-Corner 정답 인정. 빌붙기 1회 허용권 획득.
  8. 이현석 – http://ecstatic.monoless.com/quiz_3.html 정답 인정. 빌붙기 1회 허용권 획득.
  9. hong! – http://viewbox.hosting.paran.com/asdf.html 정답 인정. 빌붙기 1회 허용권 획득.
  10. 초식동물 – http://image.gmarket.co.kr/test/quiz3.htm 정답 인정. 빌붙기 1회 허용권 획득.
  11. 아이단 – http://rgbmix.ft.co.kr/naraquiz/03/index.html 정답 인정. 빌붙기 1회 허용권 획득.
  12. 양영복 – http://cfs.tistory.com/custom/blog/23/233747/skin/images/test.html 정답 인정. 빌붙기 허용권은 다음 기회에. ^^
  13. 최영은 – http://203.229.188.8/DMMail/test/roundBox.html 정답 인정. 빌붙기 허용권은 다음 기회에. ^^
  14. 정찬명 – http://naradesign.net/open_content/quiz/roundCorner/ 정답을 살짝 응용 또는 확장한 예제.

 

분류: CSS,웹 표준 | 2009년 4월 28일, 4:48 | 정찬명 | 댓글: 97개 |
트랙백URI - http://naradesign.net/wp/2009/04/28/801/trackback/

97개의 댓글이 있습니다.

  1. 정찬명의 생각…

    CSS Quiz 3 : Rounded Corner!…

  2. 이군 댓글:

    일등! 저 서현 분당에서 일하는데 혹시 프리미엄 빌붙기 1회 허용권을 타게된다면.. 2인 동반해도 되는지…..

  3. 정찬명 댓글:

    오우~ 노우~ ㅜㅜ; (정답 어디?)

  4. 정찬명 댓글:

    와~ 황준상님 이번에도 일등 하셨군요! 하지만 목록이 하나인 경우의 수까지도 고려해 주시면 인정 해드리겠습니다. 메뉴의 개수는 하나 일 수도 있는 거니까요. ^^;

  5. 행복한고니 댓글:

    다 했는데… ( -_-);;
    이미지를 만들어야 하는군요. 이미지 프로그램이 없는데…
    (슬픈 맥 사용자 -_-;;)

  6. 정찬명 댓글:

    앗.. 댓글 쓰기 무섭게 ㅎㅎㅎ. 인정 합니다! 황준상님께 프리미엄 빌붙기 1회 허용권 드림!

  7. 정찬명 댓글:

    지기지님 현재 메뉴 개수가 2개일 때 상자가 깨지네요. ^^; 안타깝게 1등을 놓치셨어요. 와… 아침부터 경쟁 치열. ㅎㅎㅎ.

  8. 이군 댓글:

    ……………………………………………………. Oh my god. 엄청나게 스피드 하네요.ㅋㅋ

  9. 정찬명 댓글:

    @행복한고니
    형한테 달라고 하지 그랬니~ ㅎㅎㅎ.

  10. 정찬명 댓글:

    이군님은 정답은 없고 해설자로 참여 하시는 건가요? ㅎㅎㅎ

  11. 황준상 댓글:

    휴..전 9시반출근이라 10분만에 뚝딱하느라 한개까진 신경못썻네요..5개이상만 신경을.. 또 프리미엄 인정인가요?? 2갠데요?? ㅋㅋ

  12. dohoons 댓글:

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

    우물쭈물거리다 늦었네요 ㅋㅋ 보기는 젤 먼저 본거같은데
    결과물이 만족스럽진 않군요 이거 ㅋ

  13. 황준상 댓글:

    엇 확인해본 결과 한개도 되는데요??

  14. 이군 댓글:

    노 해설자로 참여하는 척 문제 푸는 중 (중요한건 오기가 발동해서 아직도 문제를 풀고 있다는 거임)

    hint : margin-top:-3px; margin-bottom:-3px;

    죄송~ㅋㅋ

  15. 박대리 댓글:

    정찬명님 준상씨가 회사일보다 여기에서 퀴즈푸는걸 더 좋아해요~
    빌붙기 허용권 취소해주세요 ㅋㅋㅋ

  16. 정찬명 댓글:

    황준상님 프리미엄 1회 빌붙기 인정 합니다. ^^; 벌써 2개나 획득 하셨네요. 마치 준상님을 위한 잔치인듯. ㅋㅋㅋ.

  17. 정찬명 댓글:

    dohoons님 body에 스타일 먹인건 인정하지 않기로 해요. ㅜㅜ; 미리 고지 못한 제 불찰 입니다. 수정하시면 인정해 드립니다.

  18. 정찬명 댓글:

    박대리님, 이렇게 열정적인 준상님 같은분과 함께 회사 생활 하시니 얼마나 좋으세요~. ㅎㅎㅎ.

  19. e2goon's me2DAY 댓글:

    이군의 생각…

    퀴즈전문 블로그…

  20. 김성준 댓글:

    http://temp.azki.org/

    아침에 출근해서 만들다가 회의를 잠시 다녀오느라 좀 늦었네요 /핑계/

    문제 봤을땐 아무도 없었는데 ㅋㅋㅋ

    문제 ㄳㄳ.

  21. 정찬명 댓글:

    김성준님, 메뉴가 짝 수일 때 깨지네요. ^^; 수정 하시면 정답으로 인정해 드리겠습니다.

  22. cdk's me2DAY 댓글:

    스탠다드매거진의 생각…

    재미있는 CSS의 세계…

  23. 나에 댓글:

    업무가 많지 않은 아침 시간 짬내서 처음으로 (…) 퀴즈에 본격 참석하는 나에 (…)

    http://rhplus.kr/dev/naradesign_quiz/003/quiz.html

    아 떨려;;;;

  24. 김성준 댓글:

    엥 그림 파일을 잘못올렸네요 =_=; 24짜리 올려야 대는데ㅡㅡ 이거 원 ㅋㅋ 수정했습니다.

  25. 크랜의 느낌…

    난생 처음으로 CSS Quiz 참여….

  26. dohoons 댓글:

    아.. -ㅅ-;
    괜히 잔머리 굴렸네요ㅋㅋㅋㅋ 수정했습니다~
    근데 브라우저마다 다른 line-height 땜에 얼굴이 후끈거리네영;

  27. 나에 댓글:

    dohoons// li에서는 line-height 안 쓰는게 정답 -_-;; 그냥 padding으로 간격 띄워주는게 차라리 나아요;;

  28. dohoons 댓글:

    저 위에 메뉴가 짝수개일때 깨지는 상황은 버그인가요?? 머지;;;

  29. 나에 댓글:

    제가 볼 땐, (안써본 방법이라 맞는지는 모르지만) line-height랑 height를 동일하게 지정하게 해서 사용하는 꼼수인데 그래서 발생하는 문제 같습니다.

  30. 청설모 댓글:

    일하면서 딩가딩가 풀고나니 답안들은 벌써 올라와있고…
    올릴곳은 없네요.
    파일 받아서라도 봐주실건가요? ;ㅂ;

    http://reedids.springnote.com/pages/3245732

  31. 나에 댓글:

    청설모님 // 스프링노트에 올린 김에 노트에다가 소스 넣어주셔도 좋을 듯?a

  32. terijoon 댓글:

    저도 한번 해봤어요.. 올릴만한 계정이 없는관계로…

    http://terijoon.tistory.com/

  33. 정찬명 댓글:

    청설모님 정답 확인. 인정해 드립니다. ^^;

  34. 정찬명 댓글:

    terijoon님, 메뉴가 하나일 때 아래쪽이 약간 깨집니다. 10위권 이내 진입하신 다른 분들보다 먼저 고치시면 인정해 드립니다. ^^

  35. terijoon 댓글:

    수정했어요… bg_box.gif 이미지에서 상단부분에 쓰일 이미지의 높이를 줄여서 맞추니 잘되네요^^

  36. 정찬명 댓글:

    terijoon님 정답 확인 했습니다. 인정 합니다! ^^;

  37. 정찬명 댓글:

    이현석님, 결과물이 다소 깨집니다. ^^; 10위권 이내 진입하신 다른 분들보다 먼저 잘 수정하시면 인정해 드립니다! 감사합니다.

  38. 크랜의 느낌…

    청설모님과 함께 정찬명님에게 빌붙기 1회권을 get 하였습니다….

  39. 이현석 댓글:

    에궁… safari 3 / opera 9 / chrome 다 깔고 한번 테스트 해봐야겠네요

  40. 청설모 댓글:

    나에님// 아 노트에 소스를 넣어도 되는군요 ^^;

  41. 나에 댓글:

    현석님꺼 IE6에서 하단 라운드 처리가 안되네요.
    (7은 잘 나오고)
    safari랑 chrome은 렌더링 거의 비슷하니까 (같은 엔진 사용)
    한 쪽만 테스트하심 될 것 같고 (테스트해본 결과 안 깨집니다)

  42. reedids' me2DAY 댓글:

    청설모의 생각…

    CSS Quiz 3 : Rounded Corner! 참여, 크랜님과 함께 빌붙기 1회권 받음 흐흐…

  43. 이현석 댓글:

    아 진짜 징하네요 ie6 ㅠㅠ
    싫다….

  44. 이현석 댓글:

    IE Tester 설치해서 모두 확인했습니다.
    Chrome / Safari / Opera도 설치해서 모두 확인했습니다.

    헥헥…

    http://ecstatic.monoless.com/quiz_3.html

  45. 정찬명 댓글:

    으아~ 현석님 고생하셨습니다. 그런데 여전히 IE 6~7에서 깨지는데요. 이를 어쩌죠. ㅎㅎ. 다시 한번 확인해 주세요.

  46. 이현석 댓글:

    왜 그럴까요 -_-

    a:hover / a:focus시 underline 효과가
    부여되었을때 깨지던데…

    그냥 꼼수로 underline 말고,
    border 속성으로 underline효과를 흉내내니까
    해결되네요…

    뭔가 찜찜한데 다시 한번 구현해봐야겠습니다.

  47. 정찬명 댓글:

    현석님 축하드립니다! 미션을 완수하셨네요. ^^;

  48. 이군 댓글:

    와 반응 정말 좋습니다.ㅎ 전 과중한 업무때문에~ 다음기회를 노릴께요. 이왕이면 주말이면 좋을텐데요~ㅋㅋ
    8명이라~ 날잡아서 8명이 한꺼번에 모일 수 있었으면 좋은데 과연 어느 분이 식사모임을 주선하실지 기대되네요.ㅋㅋ

  49. hong! 댓글:

    오.. 아직 기회가 남은건가요?
    저도 한번 살짝콩 ^^…

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

  50. 황준상 댓글:

    와..전코딩으로 치면 꼴지네요..실무에 엄청 유용할 퀴즈 감사합니다. 많이 배워갑니다.

  51. 정찬명 댓글:

    @이군
    가능하다면 다음 부터는 주말에 즐기실 수 있도록 시간 안배를 위해 노력하겠습니다. ㅎㅎㅎ. (이군님~ 식사 주선은 굳이 해주지 않으셔도 괜찮아요~ ㅋㅋㅋ) 10분이 한꺼번에 모이시면 그날 제 일당 날아가요~ ㅋㅋㅋ.

  52. 정찬명 댓글:

    @hong!
    오와~ 깔끔하게 한방에 처리하셨군요! 인정! ㅎㅎㅎ.

  53. 정찬명 댓글:

    @황준상
    제일 빨리 잘 하셨는데 무슨 그런 겸손의 말씀을. ^^;

  54. exign's me2DAY 댓글:

    hong!의 느낌…

    CSS Quiz 3 : Rounded Corner! 에 저도 참여! :) 빌붙기 1회 획득!…

  55. 나에 댓글:

    어차피 코딩엔 정답이 없는데 꼴치라는 말은 정말 너무 겸손한 표현 같네요. ;ㅁ;

  56. 초식동물 댓글:

    참여도가 엄청나네요!!=ㅁ=

    아무래도 꼴지겠지만..;; 참여하는 데 의의를 두고~

    제대로 한 건지는..;;

    http://gtenimage.gmarket.com/service_image/quiz3.htm

    (개인계정이 없어서 구석에 있는 서버 살짝 빌렸..;; 이러면 안 되는데..ㅠㅠ;;)

  57. 정찬명 댓글:

    초식동물님, 참여 감사합니다. 그런데 외부 접근이 차단되어 있는것 같아요. ^^;

  58. 초식동물 댓글:

    앗. 그런가요-0- 영문 서버라 그런가보네요..

    프론트는 업로드 사유를 적어야돼서 저기다 올렸더니..ㅡ _-;;

    http://image.gmarket.co.kr/test/quiz3.htm

  59. 정찬명 댓글:

    초식동물님 잘하셨어요. ^^; 그런데 style 요소는 반드시 head 안쪽에 있어야 유효한 HTML 문법이 됩니다. 지금은 style이 잠깐 머리 식히러 나왔나 보네요. ㅎㅎㅎ. 유효한 문법이 되도록 수정하시면 인정해 드릴께요! 참, 이미지의 코너 부분은 투명하게 처리하셔야 해요. 그래야 배경색이 바뀌어도 끄떡 없겠죠. ^^

  60. 이군 댓글:

    안녕하세요. 현장리포터 이군(해설자)이라고 합니다.
    인기블로그에서 세번째 퀴즈가 업데이트 됐는데요. 와우! 정말 다양한 분들이 적극적으로 참여해주셨습니다. 문제의 난이도가 적절해진 탓일까요~? 오늘 분위기 정말 좋습니다. 누가 코딩을 잘하느냐가 중요한게아니라 여기는 정말 참여하기에 정말 좋고, 편안한 분위기를 가진 우아한 퍼블리셔들이 기술을 뽐내는 곳 인 것 같습니다. 모든 분들이 훈훈하게 정찬명님의 일당을 깎기위해 다들 분주 하시는데요. 저는 1000명이 참여하실정도로 분위기가 과열되었으면 하는 바램입니다!

    앞으로도 네번째 퀴즈의 문제가 어떨지 귀추가 주목되는데요. 여러분들이 나라디자인을 홍보해주셔서 1만명의 참여를 유도해주셨으면 하는 바램입니다. (ㅋㅋㅋ)

  61. 정찬명 댓글:

    와~ 이군님~ 해설 너무 재미있어요! 덕분에 기분좋게 퇴근 하네요. ㅋㅋㅋ. 이군님 오늘 특별히 좋은밤 되세요~! 블로그 빨리 고치시구요. ㅎㅎ. (안되는줄 알면서 자꾸 눌러보게 되요~)

  62. 초식동물 댓글:

    헉;; 스타일 쟤가 왜 저기 가 있죠?ㅡㅡ;;;;;; 아하하;; 요새 정신이 없어서ㅠㅠ
    이미지도 코너를 투명으로 할까 하다가 퇴근시간이 임박-_-;해서 그냥 냅뒀다는 핑계- _-ㅋ;;
    내일 수정해서 다시 올리겠습니다!

  63. mooo 댓글:

    와우 엄청나네요! 많이 배우고 갑니다. :)
    사실 도전해볼려고 왔다가 이미 많은 분들이 정답을 올려주셔서 올리기가 민망하네요 히히~

  64. HYLA 댓글:

    li에 포지션을 주는 이유가 뭐예요 궁금

  65. 정찬명 댓글:

    @mooo
    지금도 늦지 않았습니다. 아직 한분에게 더 기회가 있거든요. 정답에 의존하지 않고 도전 하시면 됩니다. ^^;

  66. 정찬명 댓글:

    @HYLA
    제 경우는 ul보다 li의 위치를 위로부터 3px 아래쪽으로 옮겨서 메뉴가 하나인 경우라도 ul의 아래 배경과 li의 아래 배경이 겹치지 않도록 했기 때문입니다. li에 position:relative 속성이 있어야만 ul 보다 li가 3px 아래쪽으로 내려가도록 하는것이 가능했기 때문입니다. 코드를 말로 설명하려니까 이거 참 쉽지 않네요. ^^;

    잘 이해가 되지 않으시면 제 코드에서 li를 하나만 남겨두고 li에 적용된 position:relative 값을 지워보시면 됩니다. 그럼 아마도 ul과 li의 배경이미지가 겹치는 모습을 보실 수 있습니다.

  67. 빽짱구 댓글:

    비밀글 기능이 없나보네요.
    자연스럽게 다른분들이 한걸 보게되네요..ㅋㅋ

  68. 정찬명 댓글:

    네, 독자분들을 믿으니까요. ㅎㅎㅎ.

  69. 나에 댓글:

    역시 신뢰있는 나라디자인 [..]

  70. 정찬명 댓글:

    감사합니다. ^^;

  71. 아이단 댓글:

    아이쿠… 재밌는곳이네여 ㅋㅋ
    참여합니다~

    http://rgbmix.ft.co.kr/naraquiz/03/index.html

  72. 아이단 댓글:

    저는 밑쪽에 붙어있는 점 세개가 찍고 싶은데 글 올리면 가운데 점 세개로 바꿔리네요 ㅠㅠ

  73. 이군 댓글:

    웹표준 퀴즈클럽 개설 어떤가요 +_+

  74. 정찬명 댓글:

    아이단님 참여 감사합니다. 정답으로 인정되어 마지막 남은 하나의 빌붙기 허용권을 획득 하셨습니다. ^^

  75. 정찬명 댓글:

    이군님, 좋아요~ 어떤 의견이든 내주세요. ^^

  76. 양영복 댓글:

    하하 이렇게 재미있는걸 이제야 보다니 아쉽네요.
    늦었지만 지각생 링크 하나 남기고 갑니다^^

    http://cfs.tistory.com/custom/blog/23/233747/skin/images/test.html
    좋은 하루되세요~~

  77. 정찬명 댓글:

    양영복님 참여 감사합니다. 정답은 인정 되셨습니다. 단, 빌붙기 허용권은 순위권 밖이라서 지급이 안되는점 양해해 주세요. 다음 기회에 또 도전해 주세요. 감사합니다. ^^

  78. 아이단 댓글:

    어제 밥 잘 먹었습니다~
    초면인데도 어색하지 않았네요. 제 국수가 먼저 나왔을때 빼고는 ㅋㅋ

  79. 정찬명 댓글:

    아이단님, 얼굴 익혔으니 이제 옥상에서 종종 뵙죠. ㅎㅎ.

  80. 아이단 댓글:

    네~ 내일 정혁주임님이랑 옥상갈때 내선 한통 드려야겠네요 ㅋㅋ

  81. 정찬명 댓글:

    콜미 애니타임 애니웨어 애니시츄에이션! ㅎㅎㅎ.

  82. 황준상 댓글:

    밥사주세요. 배고파요.. 혹시 사진찍으세요?

  83. 정찬명 댓글:

    황준상님 밥 사드리려고 항상 지갑에 여분의 비상금을 챙겨 다니고 있습니다. ^^ 저도 사진 찍는것을 좋아하는데 지금은 주로 가족 사진을 ㅎㅎㅎ. 혹시 분당 정자나 서현쪽에 방문하시게 되면 꼭 연락 주세요. 제 연락처는 010-3405-9380 입니다. 혹은 웹 표준이나 접근성 관련 무료 세미나에서 뵙게 될 수도 있습니다. ^^

  84. 황준상 댓글:

    ㅋㅋ 가까워서 금방갑니다~~ 전 장지동이어서.. 어제도 새사진좀 찍느라..탄천따라 걸었더니 모란이더라구요. 찬명님 번호만 알았다면~ “밥사주세요~” 했을텐데..ㅋ 이제 알았으니..긴장하세요~

  85. 황준상 댓글:

    헉 글구..9380 제 차넘버인데..ㅡㅡ

  86. 정찬명 댓글:

    네, 긴장하고 있겠습니다. 좋은 차번호를 배당받으셨네요. ㅋㅋ.

  87. 최영은 댓글:

    저도 늦었지만
    반가운 마음에 작업 해 봤습니다~
    이런 재미난 작업 많았으면 좋겠습니다~~

    http://intermajor.eplantopia.co.kr:8080/eplantopia/skin/2009/05/test/roundBox.html

  88. 정찬명 댓글:

    최영은님 ^^ 반갑습니다. 그런데 링크 접근이 안되요. 외부 접근이 허용되지 않은 공간인것 같습니다.

  89. 최영은 댓글:

    그렇군요. 이런..
    다시 남깁니다. ; )

    http://203.229.188.8/DMMail/test/roundBox.html

  90. 정찬명 댓글:

    영은님, 합격 입니다. ^^;

  91. […] 이군님의 요청에 따라 이번 퀴즈는 주말에 나갑니다. ^^ 퀴즈의 난이도는 지난번보다 더 쉽지만 이번 퀴즈는 이미지를 사용하면 안된다는 제약이 있습니다. […]

  92. 오현 댓글:

    한참 지나서나 뒷북을 치는군요.
    몇 몇 분들의 소스도 그렇고 정찬명님의 소스도 그렇고
    리스트 백그라운드 이미지가 화면을 벗어난 다음에 다시 들어오면
    익스플로6, 7에서 깨지는군요.
    display:inline-block를 넣어서 해결은 했지만
    왜 깨지는 현상이 생기는지 알고 싶습니다.

  93. 정찬명 댓글:

    IE 6~7 브라우저의 버그네요. 저도 왜 그런 버그가 발생하는지는 잘 모르겠습니다. 어쨌든 한 가지 해결 방법을 제시해 주셔서 감사합니다. ^^

  94. […] 사이트   http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm  http://naradesign.net/wp/2009/04/28/801/ , http://naradesign.net/open_content/quiz/roundCorner/ […]

댓글 쓰기

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

필수 아님

필수 아님