> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-14.md).

# 스크립팅 요소들

## \<script>

JavaScript 코드 또는 파일을 HTML 문서에 작성하거나, 연결할 때 사용한다.

### 속성&#x20;

* src : 외부 스크립트를 가리키는 URI이다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있다.
* type : 스크립트의 유형을 나타낸다.&#x20;
* async&#x20;
* defer

### 예시&#x20;

```markup
<body>
  <!-- HTML 문서 외부에 있는 JavaScript 파일을 호출하고자  때는 src 속성 사용-->
  <script src="./js/app.js"></script>

  <!-- HTML 문서 내부에 JavaScript 코드를 작성할 경우-->
  <!-- (HTML5에서는 타입값을 명시하지 않아도 기본적으로 자바스크립트 코드임을 알고 있기 때문에 생략가능) -->
  <script tyep="text/javascript">
      // JavaScript 코드
      console.log('JavaScript 코드를 실행했습니다.');
      console.log(document.characterSet);
      console.log(document.doctype);
  </script>
</body>
```

## CSS 적용하기&#x20;

HTML에서 CSS를 적용하는 3가지 방법&#x20;

1. \<link>요소를 사용해서 CSS 파일 불러오기&#x20;
2. \<style>요소를 사용해서 HTML 파일에 직접적으로 CSS 속성 적용하기 &#x20;
3. style 속성으로 인라인 스타일 적용하기&#x20;

```markup
<!-- <link>요소를 사용해서 CSS 파일 불러오기 ----------------------------->
<!--`rel` : 현재 파일과의 관계-->
<link rel="stylesheet" href="css/app.css" />

<!-- <style>요소를 사용해서 HTML 파일에 직접적으로 CSS 속성 적용하기 --------->
<style>
  body {
    background-color: #17cc89;
    margin: 0;
    min-height: 100vh;
    width: 100vw;
  }
</style>

<!-- style 속성으로 인라인 스타일 적용하기 ------------------------------->
<body
  style="background-color: #17cc89; margin: 0; min-height: 100vh; width: 100vw;"
>
</body>
```

## \<noscript>&#x20;

* 사용자의 웹 브라우저 환경에서 스크립트를 지원되지 않거나, 스크립트가 꺼져있는 경우, 문서에 표시될 문구를 삽입한다.

### 예시 &#x20;

```markup
<noscript>
  <p>JavaScript를 지원하지 않습니다.</p>
</noscript>
```

## \<canvas>&#x20;

* JavaScript를 사용하여 그래픽(비트맵)을 그릴 때 사용한다. &#x20;

  &#x20;`<canvas>` 요소로부터 2D 또는 WebGL 컨텍스트 객체를 추출해 그래픽을 그릴 수 있다.
* SVG는 확대 했을 때 이미지가 깨지지 않지만 canvas는 이미지가 깨진 그래픽 처럼 보이게 된다.

### 예시

```markup
<canvas width="800" height="600"></canvas>

<script>
  // canvas 드로잉
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  ctx.translate(200, 40);
  ctx.beginPath();
  ctx.moveTo(180, 175);
  ctx.fillStyle = "#ff0";
  ctx.arc(180, 175, 60, Math.PI * -0.35, Math.PI * -1.05, true);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(190, 190);
  ctx.fillStyle = "#ff0";
  ctx.arc(190, 190, 100, Math.PI * -0.35, Math.PI * 0.95);
  ctx.fill();
</script>
```

## 참고&#x20;

* \<script> [스크립트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/script) → MDN
* \<noscript> [노 스크립트 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript) → MDN
* \<canvas> [캔버스 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Canvas) → MDN
* [Scripting](https://www.w3.org/TR/html/semantics-scripting.html#semantics-scripting) → HTML 5.2 표준 기술 사양

## 실습 자료

{% file src="/files/-MRJS3BcmYSV-0HjSz5Q" %}
