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;
}
코드는 아래와 같다.
'개발 > HTML-CSS' 카테고리의 다른 글
CSS를 이용한 3D 캔 (0) | 2022.09.10 |
---|---|
CSS를 이용한 3D 책상 (0) | 2022.09.08 |
CSS 3D 축 (0) | 2021.04.25 |
SVG를 이용한 정오각형 그리기 (0) | 2021.02.20 |
aria-current 설정시 센스리더는 어떻게 읽어줄까 (0) | 2021.01.21 |