스크립팅 요소들

<script>

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

속성

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

예시

<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 적용하기

HTML에서 CSS를 적용하는 3가지 방법

<link>요소를 사용해서 CSS 파일 불러오기
<style>요소를 사용해서 HTML 파일에 직접적으로 CSS 속성 적용하기
style 속성으로 인라인 스타일 적용하기

<!-- <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>

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

예시

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

<canvas>

JavaScript를 사용하여 그래픽(비트맵)을 그릴 때 사용한다.
<canvas> 요소로부터 2D 또는 WebGL 컨텍스트 객체를 추출해 그래픽을 그릴 수 있다.
SVG는 확대 했을 때 이미지가 깨지지 않지만 canvas는 이미지가 깨진 그래픽 처럼 보이게 된다.

예시

<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>

참고

<script> 스크립트 요소 → MDN
<noscript> 노 스크립트 요소 → MDN
<canvas> 캔버스 요소 → MDN
Scripting → HTML 5.2 표준 기술 사양

실습 자료

2KB

scripting-elements.zip