여러 가지 HTML 태그 알아보기
- 최근까지 나는 내가 HTML과 CSS에 대해 잘 알고 있다고 생각했다.
프로젝트를 할 때에도 HTML로 레이아웃을 원하는 대로 설계할 수 있고, CSS로 스타일링을 하는데 있어 어려움을 느끼지 않았기 때문이다.
하지만, 내가 몰랐던 태그들이 굉장히 많다는 것을 느꼈고, 해당 태그들을 알아보는 시간을 가지려고 공부를 시작하게 되었다.
1. <canvas> 태그란
<canvas>: 그래픽 캔버스 요소HTML
<canvas>요소는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있다.
- 캔버스 스크립팅 API
JavaScript와 HTML<canvas>엘리먼트를 통해 그래픽을 그리기 위한 수단을 제공한다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. (주로 2D 그래픽에 중점)- WebGL (Web Graphics Library)
플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API이다.
주의 사항
- 태그 생략 불가능!
height: 좌표 공간의 높이, 기본값 150pxwidth: 좌표 공간의 너비, 기본값 150px- 캔버스의 표시 크기는 CSS로도 수정할 수 있으나, 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로 최종 그래픽의 변형이 있을 수 있다.
- 그러므로
<canvas>요소의width/height특성을 통해 직접 크기를 바꾸는 것이 좋다. <canvas>블록 안에 콘텐츠를 추가해 대체 콘텐츠로 사용 가능
<canvas>요소는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않는다. 시맨틱 HTML 같은 접근성 도구에 노출되지 않아, 일반적으로 접근성 웹 사이트나 앱에서는 캔버스의 사용을 피해야한다.
참고 : Canvas Accessibility Use Cases / 대화형 캔버스 엘리먼트의 모범 사례
사용 방법
-
HTML 문서에 캔버스를 추가한다.
대체 텍스트를 추가해 브라우저가 캔버스를 렌더링할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비한다. -
<canvas id="canvas" width="300" height="300"> 캔버스의 내용을 설명하는 대체 텍스트 </canvas> -
JavaScript 코드 내에서
HTMLCanvasElement.getContext()를 호출해 그리기 맥락을 얻어 캔버스 위에 그린다. -
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); -
여기에서
HTMLCanvasElement.getContext()메소드는 캔버스의 드로잉 컨텍스트를 반환한다. 컨텍스트 식별자가 지원되지 않을 경우null을 반환한다. -
<canvas>는 src 및 alt 속성이 없다는 점을 제외하면<img>요소처럼 보인다.
일반적인 이미지 처럼 스타일을 적용시킬 수 있다. (하지만 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않는다.)
캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어 있다. (참고 : 스타일과 색 적용하기) -
id 속성을 사용해주는 것이 좋은데, 이유는 스크립트 내에서 구분을 쉽게 해줄 수 있기 때문이다.
직접 적용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("area");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
<style>
#area {
border: 1px solid red;
}
</style>
</head>
<body onload="draw();">
<canvas id="area" width="500px" height="500px">캔버스 테스트를 위한 태그입니다.</canvas>
</body>
</html>예제를 따라 해보니 다음과 같은 결과가 나왔다.
아직 익숙하진 않지만, <canvas>가 이런 태그구나... 를 알게 되었다.
<canvas>를 활용해 재미 요소가 있어 사용자가 흥미를 가질 수 있는 웹을 만들어 보고 싶다!!!🤤
