NARADESIGN

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


CSS Quiz – 가장 많은 수평선 그리기.

본문 건너 뛰기

제가 요즈음 풀고 있는 정답 없는 문제가 하나 있는데요. 여러분도 한번 도전해 보시겠어요?

도전 과제

  1. 아래 제시된 HTML 코드를 기반으로 CSS만을 사용해서 가장 많은 수평선을 그려보세요.
  2. 하나의 행에는 100% 너비를 지닌 하나의 라인만 유효합니다. 선의 두께에 관한 기준은 없습니다.
  3. 선과 선 사이에는 흰색 선이 반드시 포함되어 있어야 합니다. 이 구분 선은 개수로 세지 않겠습니다.
  4. 이미지(base64 인코딩 이미지 포함)는 사용할 수 없습니다.
  5. 순수 CSS 코드 용량은 압축(공백과 줄 바꿈 제거)된 것을 기준으로 1KB(1024byte)를 초과하면 안됩니다.
  6. 작성한 CSS 코드는 이 포스트의 댓글로 제출해 주세요.
  7. 제출된 답은 크롬 브라우저 최신 버전에서 화면 확대 기능을 사용하지 않은 상태로 확인하겠습니다.
  8. 정답 제출 횟수는 제한이 없습니다. 여러번 제출해도 됩니다.
  9. 가장 많은 선을 그린 정답 제출자에게는 제가 ‘커피, , ‘ 가운데 원하는 것을 쏠께요.
  10. 정답자 가운데 1등이 두 명인 경우 CSS 코드를 압축(공백과 줄 바꿈 제거)한 결과 용량이 더 적은 분을 최고의 정답자로 인정할께요.
  11. 정답 제출 기한 20121231일 까지.

HTML 코드

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS Quiz – 가장 많은 수평선 그리기</title>
</head>
<body>
</body>
</html>

CSS 정답 제출 예시

html,
body,
body:before,
body:after { content:””; display:block; border:30px double #000; border-left:0; border-right:0; padding:10px 0 0 0; margin:0 0 10px 0 }

예시 코드는 이 문제를 생각하면서 처음 작성해 본 코드로 16개의 수평선을 그려냅니다. 저를 가볍게 뛰어 넘어주실 분을 찾습니다.

분류: CSS,생활의 발견,웹 표준 | 2012년 10월 22일, 19:32 | 정찬명 | 댓글: 33개 |
트랙백URI - http://naradesign.net/wp/2012/10/22/1877/trackback/

33개의 댓글이 있습니다.

  1. 익명 댓글:

    그라디언트를 이용하면 요소 높이에 따라 무제한적으로 수평선을 표시할수 있겠지만.. .. 배경이미지를 사용하는 것 방법상 동일하므로… 출제의도에 반하는 것이겠지요

  2. 정찬명 댓글:

    @익명
    그라디언트는 이미지가 아니므로 사용해도 상관 없습니다. 그러나 “선과 선 사이에는 흰색 선이 반드시 포함되어 있어야 합니다” 라는 규칙을 지켜야 합니다.

  3. 정찬명 댓글:

    @익명
    앗~ 다시 생각해보니 그라디언트로 중간에 흰색을 넣을 수 있으므로 거의 무한대로 가능하겠군요. 코드 용량을 1KB로 제한해야겠네요. 감사해요. ^^

  4. BNU 댓글:

    html{height:.4px}body{background:-webkit-linear-gradient(#FFF 50%,red 50%)}
    이것도 되나요? 그냥 보면 허연 배경이지만 최대로 확대하면 분명히 수평선이 그어져 있기는 합니다 ㅎㅎ

  5. 정찬명 댓글:

    @BNU
    새로운 규칙을 추가할께요. 확대 금지. 하지만 정말 신선했어요. ^^b

  6. 김군우 댓글:

    *{height:2px}* *{background:-webkit-linear-gradient(red,#FFF 1)}
    (주워먹기;;) 확대 없이도 되네요. ^^;;

  7. 김군우 댓글:

    최소코드 재도전!
    *{height:2px;background:-webkit-linear-gradient(red,#fff 50%)}

  8. 어거 댓글:

    1번. 그라디언트로 넣기; 패딩,
    html, body{
    height:100px;
    padding:20px 0 0 0;
    margin:0 0 20px 0;
    background:-webkit-linear-gradient(top, #000 1px, #fff 1px);
    background-size:1px 2px;
    background-position:0 1px;
    }
    2번. box-shadow로 넣기 패딩, 마진 조절 하면 그라디언트처럼 가능할 것 같아요.
    html, body{
    padding:20px 0 0 0;
    margin:0 0 20px 0;
    border:solid #fff;
    border-width:10px 0;
    background:#000;
    box-shadow:0 0 0 2px #000,
    0 0 0 3px #fff,
    0 0 0 4px #000,
    0 0 0 5px #fff,
    0 0 0 6px #000,
    0 0 0 7px #fff,
    0 0 0 8px #000,
    0 0 0 9px #fff,
    0 0 0 10px #000,
    0 0 0 11px #fff,
    0 0 0 12px #000,
    0 0 0 13px #fff,
    0 0 0 14px #000,
    0 0 0 15px #fff,
    0 0 0 16px #000,
    0 0 0 17px #fff,
    0 0 0 18px #000,
    0 0 0 19px #fff,
    0 0 0 20px #000;
    }
    body:after,
    body:before{
    content:”;
    display:block;
    height:20px;
    padding:50px 0 0 0;
    margin:0 0 20px 0;
    border:solid #fff;
    border-width:100px 0;
    box-shadow:0 0 0 2px #000,
    0 0 0 3px #fff,
    0 0 0 4px #000,
    0 0 0 5px #fff,
    0 0 0 6px #000,
    0 0 0 7px #fff,
    0 0 0 8px #000,
    0 0 0 9px #fff,
    0 0 0 10px #000,
    0 0 0 11px #fff,
    0 0 0 12px #000,
    0 0 0 13px #fff,
    0 0 0 14px #000,
    0 0 0 15px #fff,
    0 0 0 16px #000,
    0 0 0 17px #fff,
    0 0 0 18px #000,
    0 0 0 19px #fff,
    0 0 0 20px #000,
    0 0 0 21px #fff,
    0 0 0 22px #000,
    0 0 0 23px #fff,
    0 0 0 24px #000,
    0 0 0 25px #fff,
    0 0 0 26px #000,
    0 0 0 27px #fff,
    0 0 0 28px #000,
    0 0 0 29px #fff,
    0 0 0 30px #000;
    }

    ^^

  9. 어거 댓글:

    앗 2번 다시올릴께요. 수정 안 된것을 올렸네요.
    html, body {
    padding: 1px 0;
    margin: 1px 0;
    border: solid white;
    border-width: 30px 0;
    background: black;
    box-shadow: 0 0 0 2px black, 0 0 0 3px white, 0 0 0 4px black, 0 0 0 5px white, 0 0 0 6px black, 0 0 0 7px white, 0 0 0 8px black, 0 0 0 9px white, 0 0 0 10px black, 0 0 0 11px white, 0 0 0 12px black, 0 0 0 13px white, 0 0 0 14px black, 0 0 0 15px white, 0 0 0 16px black, 0 0 0 17px white, 0 0 0 18px black, 0 0 0 19px white, 0 0 0 20px black;
    }
    body::after, body::before {
    content: ”;
    display: block;
    height: 26px;
    padding: 1px 0;
    margin: 2px 0;
    border: solid white;
    border-width: 1px 0;
    box-shadow: 0 0 0 2px black, 0 0 0 3px white, 0 0 0 4px black, 0 0 0 5px white, 0 0 0 6px black, 0 0 0 7px white, 0 0 0 8px black, 0 0 0 9px white, 0 0 0 10px black, 0 0 0 11px white, 0 0 0 12px black, 0 0 0 13px white, 0 0 0 14px black, 0 0 0 15px white, 0 0 0 16px black, 0 0 0 17px white, 0 0 0 18px black, 0 0 0 19px white, 0 0 0 20px black, 0 0 0 21px white, 0 0 0 22px black, 0 0 0 23px white, 0 0 0 24px black, 0 0 0 25px white, 0 0 0 26px black, 0 0 0 27px white, 0 0 0 28px black, 0 0 0 29px white, 0 0 0 30px black;
    }
    box-shadow늘리면서 html,body의 border-width값늘리고
    after,before는 height조절하면 은근히 많이 나오네요.

  10. 아크몬드 댓글:

    ㅋㅋㅋ 다들 재밌어 하시네요~

  11. Toby Yun 댓글:

    주어진 조건내의 정답은 이미 나온 것 같네요.
    김군우님 방법보다 짧게 하기는 어려울 것 같은데요 ㅎㅎ

  12. 장정식 댓글:

    참여하고 싶지만, 이미 군우님께서 최상의 방법을 찾으신듯 하여.
    그냥, 술이나 한잔해요 형님. ㅋㅋㅋㅋㅋ

  13. Toby Yun 댓글:

    *{height:2;background:-webkit-linear-gradient(red,#fff 1)}

    4byte 더 줄이는게 가능하네요 ㅎㅎ

  14. Toby Yun 댓글:

    html{height:2;background:-webkit-linear-gradient(red,#fff 1)}
    body{height:99999em;}

    스크롤을 만들면 더 많은 수평선을 그릴 수 있겠군요.

  15. 정찬명 댓글:

    @김군우 대박~ ^___^b

  16. 정찬명 댓글:

    @Toby Yun
    작성해 주신 코드가 화면에 표시 안돼요. ㅎㅎ

  17. 정찬명 댓글:

    @김군우 @Toby Yun

    이론상 무한대라고는 하지만 실제로 몇 번까지 제대로 표시해 주는지를 테스트 해 봤어요.

    html{height:2px;background:-webkit-linear-gradient(red, #fff 50%)}
    body{height:17895693px}

    박스 높이 17,895,693(천칠백팔십구만오천육백구십삼)픽셀 이상은 표시해 주지 않네요. 이 숫자를 반으로 나누면 선의 개수가 나오니까… 음…

    실제로는 무한대가 아니라 8,947,847(팔백구십사만칠천팔백사십칠)개의 선을 그릴 수 있어요.

  18. 정찬명 댓글:

    @어거
    박스 쉐도우의 값을 이렇게도 작성할 수 있다는 것을 처음 알았어요. 감사해요. ㅎㅎ

  19. Toby Yun 댓글:

    박스쉐도우를 사용해서 이런 것도 만들 수 있더라구요 ㅋ
    http://codepen.io/headvoy/pen/GAcml

  20. 정찬명 댓글:

    @Toby Yun
    어머나~ ㅎㅎ

  21. 정찬명 댓글:

    @장정식
    그래~ 술 먹을때 지갑 필요하면 불러~ ㅎㅎ

  22. 림천-재 댓글:

    크롬에서
    body{background:-webkit-linear-gradient(top,#fff 1px, #00f 1px);background-size:100% 2px;height:35791386px}

    35,791,386/2 = 17,895,693
    css 크기:107b

  23. 정찬명 댓글:

    @림천-재
    제출하신 코드는 유효하지만 실제로 표현되는 라인 수는 설정된 높이만큼 되지 않고 절반부터 생략됩니다. 그래서 실제로 표현된 라인 수는 8,947,847개 입니다. 결과를 다시 한번 확인해 봐주시겠어요? ^^

  24. 정찬명 댓글:

    여러분이 답을 제출하기 전에 제가 작성했던 264byte 코드로 4,106개의 라인을 생성했는데요. 이미 저를 뛰어넘는 분이 나오셔서 제가 작성했던 코드도 공개합니다.

    body{overflow-x:hidden;margin:1px 0}
    body:before,body:after{content:””;display:block;height:4097px;width:0;border:1px dotted #000;border-top:0;border-bottom:0;-webkit-transform:scaleX(2528);margin:1px 0}
    html,body{border:3px double #000;border-left:0;border-right:0}

    :before :after 요소로 박스 두개를 생성한 다음 수직으로 점선을 그려서 x 축으로 늘린겁니다. 재미있는것은 body의 높이는 4097픽셀 이상으로 설정하면 더 이상 선을 표시하지 않더라구요.

    이런 시도가 현실적인 문제를 해결하는 것도 아닌데 왜 하는지 계속 스스로에게 질문중입니다.

  25. 진우 댓글:

    재미있네요!

    body {
    position: relative;
    width: 100%;
    height: 17895692px;
    margin: 0;
    background: -webkit-linear-gradient(top,#fff 1px, #00f 1px);
    background-size: 100% 2px;
    }
    body:before {
    display: block;
    position: absolute;
    left: 0;
    top: 17895692px;
    width: 100%;
    height: 7px;
    content:”;
    background:-webkit-linear-gradient(top,#fff 1px, #f00 1px);
    background-size:100% 2px;
    }

    전 이런식으로 장난을 쳐봤더니.. html 박스 영역 아래로 추가공간이 생기면서 라인을 2~4개 정도 더 표현할 수 있었습니다.
    파폭에서도 비슷하게 렌더링 되던데 이건 무슨 상황인지 @@a
    http://jsbin.com/ugabal/1

    사실 처음 아이디어는 body에 상하여백값을 주고 :before, :after를 absolute로 띄워서 세개의 박스를 사용해 보려는거였는데 뜻대로 안되네요. 위 구현도 :before의 높이나 body에 여백값 수치를 더 늘린다고 더 표현되지도 않구요.

    해외엔 css3로 장난 많이 치는거 같던데 이것도 나름 재밌네요.

  26. 정찬명 댓글:

    @진우
    오오~ body, body:before, body:after 이렇게 세 개의 선택자를 사용하시면 8,947,847 x 3 = 26,843,541 개의 라인이 그려지겠는데요? @@ (아직 해보지는 않았어요 ㅡㅡ)

  27. 림천-재 댓글:

    @정찬명

    반이 짤려보이는 문제 해결하였습니다.

    html{height:100%}body{margin:0;background:-webkit-linear-gradient(top,#fff 1px, #00f 1px);background-size:100% 2px;height:35791394px}

    body실제 높이:35791392px

    35,791,392/2 = 17,895,696
    css 크기:133b

  28. 정찬명 댓글:

    @림천-재
    고생하셨습니다. 새로운 문제를 또 낼께요. ㅎㅎ

  29. […] 일 전에 냈던 “가장 많은 수평선 그리기” 퀴즈는 아직도 진행 중입니다. 물론 전의를 상실할만큼 빠르게 […]

  30. JUL 댓글:

    *{background:-webkit-linear-gradient(#000 1px,#fff 1px);background-size:1px 2px;height:35791386px}

    지금까지 중에서는 젤 적은 것같은데 98… 아닌가요… margin:0 요 8개를 지우면 height를 8픽설 못쓰지만 마진만큼 백그라운드는 정상 표현되더라구요..

    (크롬 최신버전에서 정상 출력 확인함)

  31. JUL 댓글:

    #000 1px 요놈을 #000 으로 바꾸니 94까지 가능

  32. JUL 댓글:

    #fff 1px에서 1px 빼서 90.. 더이상은 포기합니다. 밥먹고 이거 뭐하는건지 ㅠㅠ

  33. 정찬명 댓글:

    @JUL
    고생하셨습니다. 즐기셨길 바래요. ^^

댓글 쓰기

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

필수 아님

필수 아님