NARADESIGN

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


CSS Quiz – 화면을 가득 채우는 격자 그리기.

본문 건너 뛰기

몇 일 전에 냈던 “가장 많은 수평선 그리기” 퀴즈는 아직도 진행 중입니다. 물론 전의를 상실할만큼 빠르게 정답(?)에 근접한 댓글들이 제출돼서 김이 조금 새기는 했지만요. 컨닝 얼마든지 하셔도 괜찮아요. 코드를 더 짧게 줄일 수 있다면 말이죠. 저도 퀴즈 내고 여러분의 댓글 보면서 많이 배우고 있습니다. 그래서 하나 더 준비 했습니다.

10*10 픽셀 규격의 화면을 가득 채우는 그리드

이번에는 격자 그리기 입니다. 지난 퀴즈의 답을 보면서 이것도 쉽게 가능하겠다는 생각을 했습니다.

도전 과제

  1. CSS만을 사용하여 화면을 가득 채우는 격자를 그려주세요. body 요소 내부에는 다른 html 코드가 존재하지 않아야 합니다.
  2. 격자의 규격은 한 셀의 크기가 가로 10px, 세로 10px 이어야 합니다. 셀의 내부 색상은 흰색입니다.
  3. 격자 선의 두께는 1px이며 색상에 대한 규칙은 없습니다.
  4. 이미지(base64 인코딩 이미지 포함)는 사용할 수 없습니다.
  5. 정답은 CSS 코드를 포함하여 댓글로 제출해 주세요.
  6. 정답은 크롬 브라우저 최신버전에서 확인할께요.
  7. 똑같은 답을 제출하지 않는다면 컨닝해도 됩니다.
  8. 정답을 여러번 제출해도 됩니다.
  9. 정답자가 여러명인 경우 압축(공백 제거, 줄바꿈)된 코드의 양이 적은 분을 최고의 정답으로 간주할께요. 파일 압축하기.
  10. 제출 기간: 20121231

최고의 답변을 제출해 주신 분께는 ‘커피, , ‘ 가운데 원하는 것을 쏠께요.

어디서부터 시작해야 할지 모르겠다면 지난 퀴즈 “가장 많은 수평선 그리기“를 참고해 보세요.

이번에도 기대할께요. ^___^

[저는 현재 209byte로 완성했습니다. 이번에도 이게 최선이 아니겠죠? ㅡㅡ;]

분류: CSS,생활의 발견,웹 디자인,웹 표준 | 2012년 10월 24일, 23:17 | 정찬명 | 댓글: 31개 |
트랙백URI - http://naradesign.net/wp/2012/10/24/1902/trackback/

31개의 댓글이 있습니다.

  1. 지노 댓글:

    html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: -1px;
    background:-webkit-linear-gradient(top,#dfdfdf 1px, #fff 1px);
    background-size:100% 10px;
    }
    body {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin:0;
    content:”;
    background:-webkit-linear-gradient(left,#dfdfdf 1px, rgba(1,1,1,0) 1px);
    background-size:10px 100%;
    }

    가장 많은 수평선 그리기 참고해서 해봤는데 재밌네요 ㅎㅎ
    정찬명님 블로그에서 평소에도 많은 정보 얻고 있습니다.
    항상 감사합니다~ 좋은 하루 되십시요^^

  2. Toby Yun 댓글:

    *{background:-webkit-linear-gradient(red 1px, transparent 1px),-webkit-linear-gradient(0deg, red 1px, #FFF 1px);background-size:10px 10px;}

  3. 정찬명 댓글:

    @지노
    현재까지 1등이십니다. ㅎㅎ 코드 양을 줄여서 몇 번이고 다시 도전하셔도 됩니다. ^^

  4. 정찬명 댓글:

    @Toby Yun
    제가 모바일 환경이라 아직 실행을 못해봤지만 역시 대단하세요. 맨 뒤에 세미콜론 하나는 없는것으로 칠께요. ㅡㅡb

  5. 정찬명 댓글:

    @Toby Yun
    되는군요. margin:0은 규칙에 따로 언급하지 않았지만 포함하셔야 할것 같아요. 포함하면 144byte로 현재 1등이십니다. 제가 구현한 코드보다도 더 짧구요. ^^

  6. 진우 댓글:

    좀더 줄여보았습니다 ;)

    *{margin:0;background:-webkit-linear-gradient(red, transparent 1px),-webkit-linear-gradient(0, red, #fff 1px);background-size:10px 10px}

  7. Toby Yun 댓글:

    @정찬명 네 ㅎㅎ 평소에 봐뒀던 것들이 좀 있다보니 비슷해서 참고했어요. 이런게 있거든요. http://lea.verou.me/css3patterns/

  8. 정찬명 댓글:

    @Toby Yun
    제가 퀴즈 수준을 더 높여야 할까요? 이건 뭐 다들 몇 분만에 풀어 버리시니. 공부 좀 더 해야돼겠네요. ㅎㅎ

  9. 익명 댓글:

    저… 이건 여담이지만… 저는 조용히 구독하고 있는 애독자인데요 :)
    .com 도메인을 소유하고 계시면서 굳이 .net을 사용하시는 특별한 이유가 있으신가요?
    저도 블로깅을 하고 있는데, 사용하고 싶은 네이밍의 닷컴 도메인이 선점되어서
    닷넷으로 등록해 쓸까 아니면 이름을 바꾸더라도 닷컴을 쓸까 고민중이거든요 ㅠㅠ

  10. 정찬명 댓글:

    @익명
    저는 .com 도메인이 특별히 더 좋다거나 그런 생각이 없어서요. 상업적인 사이트 느낌이 날까봐 그냥 가지고만 있습니다.

  11. 속삭이는비 댓글:

    별짓을 다해봤어도 더이상 줄일수가 없당 ㅠ_ㅡ

  12. GekkuM 댓글:

    html{
    background:
    -webkit-linear-gradient(top,#aaa 1px, rgba(0,0,0,0) 1px),
    -webkit-linear-gradient(left, #aaa 1px, #fff 1px);
    background-size: 10px 10px;
    }

    ‘*’ 선택자가 메모리를 적게 먹나요? ‘html’이 적게 먹나요?

  13. 정찬명 댓글:

    @속삭이는비
    저는 일찌감치 포기했어요. ㅎㅎ

  14. 정찬명 댓글:

    @GekkuM
    일반적으로 공용선택자 ‘*’가 성능에 더 좋지 않다고 하는데요. 이건 사실 구식 브라우저(IE 6~8)들 이야기라고 하네요. 최신 브라우저들은 거의 성능에 영향이 없다고 봐도 좋을만큼 영향이 미미하다고 합니다. 하지만 한국에서는 아직 IE 7~8 사용자가 많으니 적당히 피하는게 좋겠죠. ^^

  15. Suzkim 댓글:

    *{background:-webkit-linear-gradient(red,transparent 1px),-webkit-linear-gradient(0,red,#fff 1px);background-size:10px 10px}

    맨날 관람(?)만하다가 처음으로 냄기네요..ㅋㅋ 컨닝 후 줄여보았어요~

  16. 정찬명 댓글:

    @Suzkim
    훌륭합니다. 다음에 저 보시면 밥 사달라고 꼭 말씀하세요. ^^

  17. 익명 댓글:

    @Suzkim
    @정찬명
    margin:0 은 규칙에 포함되어야 하니깐
    진우님이 1등이겠군요.

  18. 속삭이는비 댓글:

    위에 익명은 속삭이는비 임

  19. JUL 댓글:

    진우님과 동일한 결과물이 나와버렸네요.. 쉼표 몇개 줄여서.. 전 검은색으로 하는줄 알고 계속 안나오길래 이상하다 했더니.. ‘red’ 발견하고 좌절…..

    *{margin:0;background:-webkit-linear-gradient(red,transparent 1px),-webkit-linear-gradient(0,red,#fff 1px);background-size:10px 10px}
    133… 이 이상은 도저히… 안되네요..

  20. 태희 댓글:

    음 역시 더이상은 답이없나보네요 해봐도 같은답일뿐

  21. 익명 댓글:

    ㅋㅋㅋ

  22. NOOL 댓글:

    죄송하지만 IE는 테스트 하지 않는 것인가요?

  23. 익명 댓글:

    정말 끝내줍니다.

  24. 정찬명 댓글:

    @NOOL
    이 퀴즈는 IE가 지원하지 않는 스펙입니다. 그래서 크롬 브라우저에서 확인하겠다고 말씀 드렸지요.

  25. 승승 댓글:

    글 계속 포스팅 해주세요 정찬명 선생님~

  26. 정찬명 댓글:

    @승승
    그러게요. 할 때가 됐는데 안하고 있네요. ㅎㅎ

  27. 승승 댓글:

    @전찬명
    전 그래도 매일매일 들르고 있답니다. ^0^;;

  28. 익명 댓글:

    alert[‘감사합니다’];

  29. 송송 댓글:

    호옷..다니는 현재회사는 아직 익스에 목숨거는 회사인데 이거참 신기한 일이군요!! ㅠ.ㅠ 따라갈려면 참 멀었어요~ 정말 유익합니다!감사합니다.

  30. 한정현 댓글:

    매니저님이랑 같이 일해서, 항상 행운이라고 생각하고있습니다 ㅎㅎ 블로그글, 다 읽어봐야겠네요. ( 생각만했는데.. 실천은 못함 )

  31. 정찬명 댓글:

    @한정현
    저도 정현 매니저님처럼 실력있고 친절한 개발자와 함께 일해서 행운이라고 생각하고 있었어요. 저도 매니저님한테 도움을 많이 받고 배우고 있는걸요. 감사해요. ㅎㅎ

댓글 쓰기

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

필수 아님

필수 아님