CSS의 box-shadow 속성을 이용하여 픽셀 찍기

CSS의 box-shadow 속성을 이용하여 픽셀을 찍을 수 있다. 방법은 간단하다.

 

우선 1x1 크기의 요소를 만든다.

<div class="canvas"></div>

.canvas {
  width: 1px;
  height: 1px;
}

 

그리고 box-shadow 속성을 사용하여 .canvas 요소와 동일한 크기의 그림자를 만들고 x-offset, y-offset 을 수정하여 그림자를 이동시키면 된다.

 

.canvas {
  width: 1px;
  height: 1px;
  box-shadow: 1px 2px blue, 
              1px 0 red, 
              0 1px yellow, 
              2px 1px green, 
              1px 1px black;
}

 

만약, 더 큰 픽셀을 찍고 싶다면 .canvas 요소의 크기를 조절하면 된다. 이때 box-shadow 속성의 x-offset, y-offset 의 값 수정이 필요할 수 있다. (아니면 CSS Variables를 사용하여 더 쉽게 크기를 조절할 수도 있다.)

 

.big_canvas {
  width: 10px;
  height: 10px;
  box-shadow: 10px 20px blue, 
              10px 0 red, 
              0 10px yellow, 
              20px 10px green,  
              10px 10px black;
}

// ...

:root {
  --pixel-size: 5px;  
}

.resizable_canvas {
  width: var(--pixel-size);
  height: var(--pixel-size);
  box-shadow: calc(1 * var(--pixel-size)) calc(2 * var(--pixel-size)) blue, 
              calc(1 * var(--pixel-size)) calc(0 * var(--pixel-size)) red, 
              calc(0 * var(--pixel-size)) calc(1 * var(--pixel-size)) yellow, 
              calc(2 * var(--pixel-size)) calc(1 * var(--pixel-size)) green, 
              calc(1 * var(--pixel-size)) calc(1 * var(--pixel-size)) black;
}

코드는 아래와 같다.