NARADESIGN

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


CSS Quiz 1!

본문 건너 뛰기

세상 만사 모든일에는 동기가 있습니다. 하지만 그 동기를 추측할 수 없는 일들을 보면 우리는 괴팍하다거나 이해할 수 없다는 말들을 하곤 하죠. 오늘은 제가 그런 소리를 좀 들어볼 각오로 괴상한 퀴즈 하나를 준비 했습니다. CSS(Cascading Style Sheet)를 이용하여 도무지 이해할 수 없는 일을 하려고 합니다. 이것은 실무에 거의 도움이 되지 않을지도 모릅니다. 하지만 정답을 알게 된 순간 여러분들은 생각의 가지를 펼쳐서 창의적으로 이것을 실무에 적용할 수도 있습니다. CSS에 자신있는 분들은 도전하세요!

HTML/CSS를 이용하여 화면에 보이는 삼각형의 너비와 높이 및 꼭지점 위치가 동일한 도형을 만들어 보세요.

밑변이 130px이고 높이가 100px인 검정색 삼각형

단, 이것을 만들기 위하여 준수해야 하는 조건은 다음과 같습니다.

  1. HTML과 CSS만을 사용하고 문법적으로 유효해야 합니다. HTML Validation Test, CSS Validation Test
  2. Image, Javascript, SVGScalable Vector Graphics 등 다른 언어는 전혀 사용하지 않습니다.
  3. body 엘리먼트 안쪽에는 다른 엘리먼트나 문자등 아무것도 넣지 않습니다.
  4. Internet Explorer 6~8, Firefox 2~3, Safari 3.x, Opera 9.x, Chrome 브라우저에서 동일하게 보여야 합니다.

조건이 좀 까다롭죠? ^^; 아주 조금 힌트를 드리자면 실무에서는 거의 사용되지 않는 기교라서 여러분들은 고정관념에서 벗어나셔야 할껍니다. 문제를 해결하신 분은 자신의 계정에 문서를 업로드 하신 다음 댓글로 URL을 남겨 주세요. 정답을 가장 먼저 맞추시는 분께는 제가 식사를 한끼 대접하도록 하죠. 언제 만나냐구요? 언젠간 보겠죠? ^^;

정답 확인 : http://naradesign.net/open_content/quiz/triangle/

분류: CSS,웹 표준 | 2008년 10월 28일, 14:12 | 정찬명 | 댓글: 33개 |
트랙백URI - http://naradesign.net/wp/2008/10/28/165/trackback/

33개의 댓글이 있습니다.

  1. SOL군 댓글:

    SOL군이 맞추고 얻어먹으면 되는건가? 흠…
    난 디폴트로 사져여~

  2. 정찬명 댓글:

    그래 넌 디폴트로 제치고 시작하자. ^^; 재미있는 글감 제공해 줘서 고맙다!

  3. SOL군 댓글:

    뭥미!!
    출처는 SOL군이삼!!
    사죠요~~~~~~~~~~~~~~

  4. 정찬명 댓글:

    예끼~! 어디서 도배질이냐 너~. 알았다. 사줄께. ㅎㅎ.

  5. 정찬명의 생각…

    CSS Quiz!풀어보세요. ^^; (맞히시면 밥 한끼 쏘죠!)…

  6. song 댓글:

    마침 글 읽고 있었는데..
    새로고침하니 새 글이 등록되었더라고요. -_-;
    http://isitte.com/css.html

  7. 정찬명 댓글:

    허걱 ㅡㅡ; 이거 혹시 저만 모르고 있었던가 봐요. 허무합니다. ㅎㅎ. song님 언제 저를 보시거든 꼭 밥 사달라고 하세요. ^^; 수치는 약간 다르지만 정답으로 인정 됩니다!

  8. song 댓글:

    수치값도 알았습니다. -_-;
    캡쳐해서 너비랑 높이 찍어봤어요.
    세미나에 가려고 지난주에 알아봤는데.. 대기순번이 100번이 넘어서
    어떻게 될 지 모르겠네요.

  9. 정찬명 댓글:

    앗, 저런.. 하지만 지금까지의 제 경험으로는 세미나 신청하시고 참석하지 않으시는 분들이 1/4 정도 되십니다. 대기자라도 참석하셔서 꼭 듣고 싶다고 말씀하시면 입장하실 수 있을껍니다. 만약 안된다고 하시면 저를 찾아 주세요. 어떻게 해서든 입장시켜 드리겠습니다. 정찬명 016-405-9380. 참고로 정확한 수치는 0px 100px 100px 30px 입니다. ^^;

  10. 이흥섭 댓글:

    오 맙소사 저게 border였다니 ㅋㅋㅋ 해키쉬하네요!

  11. 황규연 댓글:

    문제내신건 답 안보고 한번 풀어봐야겠네요..
    세미나 참석하고 싶었는데 아무래도 일도 있고 해서 취소를 했습니다.
    에고 아깝네요…-_-;

  12. 더마음 댓글:

    헉;;; 보더로… ^ ^;;;

  13. 꿈트리 댓글:

    위의 border를 이용해서 뒤집기 애니메이션도 구현가능하네요

    으미 잼나구로~

    http://firejune.com/1353

  14. 정찬명 댓글:

    저같은 사람은 명함도 못내밀 정도의 고수 이시군요. ㅎㅎ.

  15. 정찬명 댓글:

    황규연님같은 자세 좋아요~. ㅎㅎ. 하지만 어쨌든 이미 정답이 드러났으니 저런 기교를 가지고 뭘 좀 더 해볼 수 있을까 라는 생각을 가진 분들을 위해 다른 샘플도 한번 준비해 봤습니다. 이미지가 아니라 실제 코드로 구현한 샘플이니까 웹 브라우저에 Developer Toolbar 와 같은 확장기능이 있으신 분들은 살펴보세요. ^^

    이번 예제는 span 엘리먼트 하나를 사용한 예제 입니다. 사실 IE 브라우저만 아니라면 :after :before :first-letter 와 같은 가상 선택자를 사용해서 엘리먼트 없이도 이와같은 표현이 가능하겠지요.

    표준계열 브라우저에서는 샘플이 6개가 보이고 IE 브라우저에서는 샘플이 4개만 보일 껍니다. IE에서 샘플 2개가 누락된 것은 MS 쪽에 문의해 주세요. ^^

  16. 희주 댓글:

    border를 저렇게 주면 저렇게도 가능한 거였군요.
    정말 몰랐던 부분입니다
    전 아직 멀었나 봅니다. 끊임없는 수행을..

  17. 희주 댓글:

    아 위의 예제를 보니 solid랑 dashed랑 dotted랑 랜더링차이가 있는거네요.
    전에 호기심에 브라우저별로 border에 solid속성을 주고 시험한게 있는데 관련글 트랙백 보냅니다.

  18. jugug.net 댓글:

    브라우저별 DIV객체에 부여한 border에 대한 실험….

    서론 문득 DIV객체에 위, 아래, 오른쪽, 왼쪽에 각각 border를 다른 색상으로 주면 모서리 부분은 어느쪽이 우선하게 될까라는 의문이 들었습니다. 쉽게 말해 왼쪽과 위쪽에 테두리를 설정하고 …

  19. 정찬명 댓글:

    저도 오늘 오전에 알았습니다. 수행 같이 가시죠. ㅜㅜ;

  20. daybreaker 댓글:

    얼마 전에 border를 이용한 삼각형 만들기에 대한 글을 보았는데 역시 그거였군요. 흐흐;

  21. 신현석 댓글:

    파이어준님 블로그에서 봤던게 이거였군요. ㅎㅎ

  22. 정찬명 댓글:

    파이어준님 블로그에 링크된 문서에는 이런 것도 있더군요. 아래 3D 이미지 아닙니다. 기절 초풍할 노릇. @@;

    3D Rendering via CSS Borders : http://www.tumuski.com/code/3dCSS.php

  23. 이흥섭 댓글:

    파이어준 님 블로그 링크 가보고 무척 놀랐습니다! 삼각형 하나에서 나오는 가능성은 정말 무궁무진하네요!

  24. 강규영 댓글:

    사실 입체의 기본은 삼각형이죠. 직감삼각형을 잘 조합하면 임의의 다각형을 얻어낼 수 있으니까요. 다만 문제는 성능 ㅎㅎ

  25. 미희 댓글:

    책보다가 azimuth란 함수가 있길래 이녀석에 보더값을 주면!! 이라고 생각하고 삽질하다가 그냥 판도라의 상자를 열었습니다. 하하 ~~

    역시 심오한 세계 =_=… -_ㅜ…

  26. 똑띠 댓글:

    역시 이곳엔 배울게 많네요. 이런게 있다는걸 알았다는 것만으로도…^^
    (언제 배울진…언젠간 이해하겠죠.)

  27. 정찬명 댓글:

    아, 이런건 굳이 안배우셔도 괜찮아요. 그다지 실용적이지는 않은것 같아요. ^^

  28. 똑띠 댓글:

    굳이 안배워도 된다는 말씀이 오히려 더 고맙게 느껴지네요.^^
    만약 ‘배워두시면 좋죠’ 라고 댓글을 남기셨다면 아마 좌절하신분들 많을꺼에요.

  29. 정찬명 댓글:

    하하. 똑띠님같은 분이라면 아마 제가 어떻게 답변을 달았더라도 긍정적으로 받아들여 주실것 같은데요. ^^;

  30. […] 가을에 제 블로그를 통해서 CSS Quiz! 라는 것을 처음 시도했었습니다. 실무에 전혀 도움이 되지 않고 오히려 […]

  31. […] Quiz 1~2 탄이 다소 아쉬운 분들을 위해 바로 3탄을 준비 했습니다. 이번 문제는 […]

  32. 낭망백수의 알림…

    CSS Quiz [1] [2] [3]….

댓글 쓰기

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

필수 아님

필수 아님