CSS Quiz – 화면을 가득 채우는 격자 그리기.
몇 일 전에 냈던 “가장 많은 수평선 그리기” 퀴즈는 아직도 진행 중입니다. 물론 전의를 상실할만큼 빠르게 정답(?)에 근접한 댓글들이 제출돼서 김이 조금 새기는 했지만요. 컨닝 얼마든지 하셔도 괜찮아요. 코드를 더 짧게 줄일 수 있다면 말이죠. 저도 퀴즈 내고 여러분의 댓글 보면서 많이 배우고 있습니다. 그래서 하나 더 준비 했습니다.
이번에는 격자 그리기 입니다. 지난 퀴즈의 답을 보면서 이것도 쉽게 가능하겠다는 생각을 했습니다.
도전 과제
- CSS만을 사용하여 화면을 가득 채우는 격자를 그려주세요. body 요소 내부에는 다른 html 코드가 존재하지 않아야 합니다.
- 격자의 규격은 한 셀의 크기가 가로 10px, 세로 10px 이어야 합니다. 셀의 내부 색상은 흰색입니다.
- 격자 선의 두께는 1px이며 색상에 대한 규칙은 없습니다.
- 이미지(base64 인코딩 이미지 포함)는 사용할 수 없습니다.
- 정답은 CSS 코드를 포함하여 댓글로 제출해 주세요.
- 정답은 크롬 브라우저 최신버전에서 확인할께요.
- 똑같은 답을 제출하지 않는다면 컨닝해도 됩니다.
- 정답을 여러번 제출해도 됩니다.
- 정답자가 여러명인 경우 압축(공백 제거, 줄바꿈)된 코드의 양이 적은 분을 최고의 정답으로 간주할께요. 파일 압축하기.
- 제출 기간: 2012년 12월 31일
최고의 답변을 제출해 주신 분께는 ‘커피, 밥, 술‘ 가운데 원하는 것을 쏠께요.
어디서부터 시작해야 할지 모르겠다면 지난 퀴즈 “가장 많은 수평선 그리기“를 참고해 보세요.
이번에도 기대할께요. ^___^
[저는 현재 209byte로 완성했습니다. 이번에도 이게 최선이 아니겠죠? ㅡㅡ;]
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%;
}
가장 많은 수평선 그리기 참고해서 해봤는데 재밌네요 ㅎㅎ
정찬명님 블로그에서 평소에도 많은 정보 얻고 있습니다.
항상 감사합니다~ 좋은 하루 되십시요^^
*{background:-webkit-linear-gradient(red 1px, transparent 1px),-webkit-linear-gradient(0deg, red 1px, #FFF 1px);background-size:10px 10px;}
@지노
현재까지 1등이십니다. ㅎㅎ 코드 양을 줄여서 몇 번이고 다시 도전하셔도 됩니다. ^^
@Toby Yun
제가 모바일 환경이라 아직 실행을 못해봤지만 역시 대단하세요. 맨 뒤에 세미콜론 하나는 없는것으로 칠께요. ㅡㅡb
@Toby Yun
되는군요. margin:0은 규칙에 따로 언급하지 않았지만 포함하셔야 할것 같아요. 포함하면 144byte로 현재 1등이십니다. 제가 구현한 코드보다도 더 짧구요. ^^
좀더 줄여보았습니다 ;)
*{margin:0;background:-webkit-linear-gradient(red, transparent 1px),-webkit-linear-gradient(0, red, #fff 1px);background-size:10px 10px}
@정찬명 네 ㅎㅎ 평소에 봐뒀던 것들이 좀 있다보니 비슷해서 참고했어요. 이런게 있거든요. http://lea.verou.me/css3patterns/
@Toby Yun
제가 퀴즈 수준을 더 높여야 할까요? 이건 뭐 다들 몇 분만에 풀어 버리시니. 공부 좀 더 해야돼겠네요. ㅎㅎ
저… 이건 여담이지만… 저는 조용히 구독하고 있는 애독자인데요 :)
.com 도메인을 소유하고 계시면서 굳이 .net을 사용하시는 특별한 이유가 있으신가요?
저도 블로깅을 하고 있는데, 사용하고 싶은 네이밍의 닷컴 도메인이 선점되어서
닷넷으로 등록해 쓸까 아니면 이름을 바꾸더라도 닷컴을 쓸까 고민중이거든요 ㅠㅠ
@익명
저는 .com 도메인이 특별히 더 좋다거나 그런 생각이 없어서요. 상업적인 사이트 느낌이 날까봐 그냥 가지고만 있습니다.
별짓을 다해봤어도 더이상 줄일수가 없당 ㅠ_ㅡ
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’이 적게 먹나요?
@속삭이는비
저는 일찌감치 포기했어요. ㅎㅎ
@GekkuM
일반적으로 공용선택자 ‘*’가 성능에 더 좋지 않다고 하는데요. 이건 사실 구식 브라우저(IE 6~8)들 이야기라고 하네요. 최신 브라우저들은 거의 성능에 영향이 없다고 봐도 좋을만큼 영향이 미미하다고 합니다. 하지만 한국에서는 아직 IE 7~8 사용자가 많으니 적당히 피하는게 좋겠죠. ^^
*{background:-webkit-linear-gradient(red,transparent 1px),-webkit-linear-gradient(0,red,#fff 1px);background-size:10px 10px}
맨날 관람(?)만하다가 처음으로 냄기네요..ㅋㅋ 컨닝 후 줄여보았어요~
@Suzkim
훌륭합니다. 다음에 저 보시면 밥 사달라고 꼭 말씀하세요. ^^
@Suzkim
@정찬명
margin:0 은 규칙에 포함되어야 하니깐
진우님이 1등이겠군요.
위에 익명은 속삭이는비 임
진우님과 동일한 결과물이 나와버렸네요.. 쉼표 몇개 줄여서.. 전 검은색으로 하는줄 알고 계속 안나오길래 이상하다 했더니.. ‘red’ 발견하고 좌절…..
*{margin:0;background:-webkit-linear-gradient(red,transparent 1px),-webkit-linear-gradient(0,red,#fff 1px);background-size:10px 10px}
133… 이 이상은 도저히… 안되네요..
음 역시 더이상은 답이없나보네요 해봐도 같은답일뿐
ㅋㅋㅋ
죄송하지만 IE는 테스트 하지 않는 것인가요?
정말 끝내줍니다.
@NOOL
이 퀴즈는 IE가 지원하지 않는 스펙입니다. 그래서 크롬 브라우저에서 확인하겠다고 말씀 드렸지요.
글 계속 포스팅 해주세요 정찬명 선생님~
@승승
그러게요. 할 때가 됐는데 안하고 있네요. ㅎㅎ
@전찬명
전 그래도 매일매일 들르고 있답니다. ^0^;;