CSS Quiz – 가장 많은 수평선 그리기.
제가 요즈음 풀고 있는 정답 없는 문제가 하나 있는데요. 여러분도 한번 도전해 보시겠어요?
도전 과제
- 아래 제시된 HTML 코드를 기반으로 CSS만을 사용해서 가장 많은 수평선을 그려보세요.
- 하나의 행에는 100% 너비를 지닌 하나의 라인만 유효합니다. 선의 두께에 관한 기준은 없습니다.
- 선과 선 사이에는 흰색 선이 반드시 포함되어 있어야 합니다. 이 구분 선은 개수로 세지 않겠습니다.
- 이미지(base64 인코딩 이미지 포함)는 사용할 수 없습니다.
- 순수 CSS 코드 용량은 압축(공백과 줄 바꿈 제거)된 것을 기준으로 1KB(1024byte)를 초과하면 안됩니다.
- 작성한 CSS 코드는 이 포스트의 댓글로 제출해 주세요.
- 제출된 답은 크롬 브라우저 최신 버전에서 화면 확대 기능을 사용하지 않은 상태로 확인하겠습니다.
- 정답 제출 횟수는 제한이 없습니다. 여러번 제출해도 됩니다.
- 가장 많은 선을 그린 정답 제출자에게는 제가 ‘커피, 밥, 술‘ 가운데 원하는 것을 쏠께요.
- 정답자 가운데 1등이 두 명인 경우 CSS 코드를 압축(공백과 줄 바꿈 제거)한 결과 용량이 더 적은 분을 최고의 정답자로 인정할께요.
- 정답 제출 기한 2012년 12월 31일 까지.
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개의 수평선을 그려냅니다. 저를 가볍게 뛰어 넘어주실 분을 찾습니다.
그라디언트를 이용하면 요소 높이에 따라 무제한적으로 수평선을 표시할수 있겠지만.. .. 배경이미지를 사용하는 것 방법상 동일하므로… 출제의도에 반하는 것이겠지요
@익명
그라디언트는 이미지가 아니므로 사용해도 상관 없습니다. 그러나 “선과 선 사이에는 흰색 선이 반드시 포함되어 있어야 합니다” 라는 규칙을 지켜야 합니다.
@익명
앗~ 다시 생각해보니 그라디언트로 중간에 흰색을 넣을 수 있으므로 거의 무한대로 가능하겠군요. 코드 용량을 1KB로 제한해야겠네요. 감사해요. ^^
html{height:.4px}body{background:-webkit-linear-gradient(#FFF 50%,red 50%)}
이것도 되나요? 그냥 보면 허연 배경이지만 최대로 확대하면 분명히 수평선이 그어져 있기는 합니다 ㅎㅎ
@BNU
새로운 규칙을 추가할께요. 확대 금지. 하지만 정말 신선했어요. ^^b
*{height:2px}* *{background:-webkit-linear-gradient(red,#FFF 1)}
(주워먹기;;) 확대 없이도 되네요. ^^;;
최소코드 재도전!
*{height:2px;background:-webkit-linear-gradient(red,#fff 50%)}
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;
}
^^
앗 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조절하면 은근히 많이 나오네요.
ㅋㅋㅋ 다들 재밌어 하시네요~
주어진 조건내의 정답은 이미 나온 것 같네요.
김군우님 방법보다 짧게 하기는 어려울 것 같은데요 ㅎㅎ
참여하고 싶지만, 이미 군우님께서 최상의 방법을 찾으신듯 하여.
그냥, 술이나 한잔해요 형님. ㅋㅋㅋㅋㅋ
*{height:2;background:-webkit-linear-gradient(red,#fff 1)}
4byte 더 줄이는게 가능하네요 ㅎㅎ
html{height:2;background:-webkit-linear-gradient(red,#fff 1)}
body{height:99999em;}
스크롤을 만들면 더 많은 수평선을 그릴 수 있겠군요.
@김군우 대박~ ^___^b
@Toby Yun
작성해 주신 코드가 화면에 표시 안돼요. ㅎㅎ
@김군우 @Toby Yun
이론상 무한대라고는 하지만 실제로 몇 번까지 제대로 표시해 주는지를 테스트 해 봤어요.
html{height:2px;background:-webkit-linear-gradient(red, #fff 50%)}
body{height:17895693px}
박스 높이 17,895,693(천칠백팔십구만오천육백구십삼)픽셀 이상은 표시해 주지 않네요. 이 숫자를 반으로 나누면 선의 개수가 나오니까… 음…
실제로는 무한대가 아니라 8,947,847(팔백구십사만칠천팔백사십칠)개의 선을 그릴 수 있어요.
@어거
박스 쉐도우의 값을 이렇게도 작성할 수 있다는 것을 처음 알았어요. 감사해요. ㅎㅎ
박스쉐도우를 사용해서 이런 것도 만들 수 있더라구요 ㅋ
http://codepen.io/headvoy/pen/GAcml
@Toby Yun
어머나~ ㅎㅎ
@장정식
그래~ 술 먹을때 지갑 필요하면 불러~ ㅎㅎ
크롬에서
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
@림천-재
제출하신 코드는 유효하지만 실제로 표현되는 라인 수는 설정된 높이만큼 되지 않고 절반부터 생략됩니다. 그래서 실제로 표현된 라인 수는 8,947,847개 입니다. 결과를 다시 한번 확인해 봐주시겠어요? ^^
여러분이 답을 제출하기 전에 제가 작성했던 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픽셀 이상으로 설정하면 더 이상 선을 표시하지 않더라구요.
이런 시도가 현실적인 문제를 해결하는 것도 아닌데 왜 하는지 계속 스스로에게 질문중입니다.
재미있네요!
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로 장난 많이 치는거 같던데 이것도 나름 재밌네요.
@진우
오오~ body, body:before, body:after 이렇게 세 개의 선택자를 사용하시면 8,947,847 x 3 = 26,843,541 개의 라인이 그려지겠는데요? @@ (아직 해보지는 않았어요 ㅡㅡ)
@정찬명
반이 짤려보이는 문제 해결하였습니다.
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
@림천-재
고생하셨습니다. 새로운 문제를 또 낼께요. ㅎㅎ
[...] 일 전에 냈던 “가장 많은 수평선 그리기” 퀴즈는 아직도 진행 중입니다. 물론 전의를 상실할만큼 빠르게 [...]
*{background:-webkit-linear-gradient(#000 1px,#fff 1px);background-size:1px 2px;height:35791386px}
지금까지 중에서는 젤 적은 것같은데 98… 아닌가요… margin:0 요 8개를 지우면 height를 8픽설 못쓰지만 마진만큼 백그라운드는 정상 표현되더라구요..
(크롬 최신버전에서 정상 출력 확인함)
#000 1px 요놈을 #000 으로 바꾸니 94까지 가능
#fff 1px에서 1px 빼서 90.. 더이상은 포기합니다. 밥먹고 이거 뭐하는건지 ㅠㅠ
@JUL
고생하셨습니다. 즐기셨길 바래요. ^^