<a> 링크 </a> : 이동의 맥락이므로 어디로..? 가 빠질 수 없다.

<a href="어디로"> 링크 </a>

<href 주소값 표기 방법>

 

 (1) 웹 URL

<a href="www.naver.com"> 링크 </a>

 (2) 프로젝트 내 위치에 대한 상대 경로

<a href="./SpecialPage.html"> 스페셜 페이지 </a>

SpecialPage.html

<h1>스페셜 페이지</h1>

(3) 페이지 내 이동

이동하고자 하는 태그 id 어트리뷰트를 적어준다.

<a href="#hello"> 다음 섹션으로 이동 </a>

(4) 메일 쓰기

<a href="mailto:아무아이디@gmail.com">아무에게 메일쓰기</a>

(5) 통화연결 : 모바일 페이지에서 사용가능

<a href="tel:01012345678>전화걸기</a>

<target="_blank">

기존의 브라우저 창이 아니라 새탭을 열어서 이동할 수 있도록 설정할 수 있는 어트리뷰트

<a href="www.naver.com" target="_blank"> 네이버 </a>

'MarkUp > HTML' 카테고리의 다른 글

[HTML/ Canvas] MDN 캔버스 기본 사용법(1)  (0) 2022.06.05

 

 

캔버스(Canvas) 기본 사용법 - Web API | MDN

<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리

developer.mozilla.org

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<script type="application/javascript">
		function draw() {
			var canvas = document.getElementById("canvas");
			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>
</head>

<body onload="draw();">
	<canvas id="canvas" width="150" height="150"></canvas>
</body>

</html>

 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있습니다. 

 

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 

 

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오.

 

</canvas> 태그 필수

대체 컨텐츠가 제공되는 방식때문에, <img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.

 

 

렌더링 컨텍스트

<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 

 

 

캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. <canvas> 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다.  getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, CanvasRenderingContext2D (en-US)을 얻기위해 "2d"로 지정합니다.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

첫 번째 줄의 스크립트는  document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다.  요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

 

템플릿 뼈대

다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

'MarkUp > HTML' 카테고리의 다른 글

[HTML] 링크 Anchor 태그  (0) 2022.06.11

+ Recent posts

티스토리툴바