본문 바로가기

달밤에 코딩하기/HTML CSS 공부하기

#10 - HTML 태그 - 내장 컨텐츠/스크립트

내장 컨텐츠 / 스크립트 태그 

내장 컨텐츠와 noscript 태그는 body에 위치하며, script 태그는 일반적으로 head 내 위치합니다.

태그 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본 포멧 설명</title>
    <meta name="author" content="rosa.kim">
    <meta name="description" content="rosa.kim's test">
    <meta name="viewport" content="width=device-width, initial-scal=1.0">
    <link rel="stylesheet" href="./main.css">
    <!-- 외부 스크립트 -->
    <script src="./main.js"></script>
    <!-- 내부 스크립트 -->
    <script defer>
      스크립트 내용
    </script>
</head>
<body>
  <iframe
     src="https://www.youtube.com/embed/Q9yn1DpZkHQ"
     frameborder="0"
     allowfullscreen>
  </iframe>
  
  <canvas
      width="100px"
      height="100px">
      캔버스 내용
  </canvas>
  
  <noscript>
     <p>브라우저가 자바 스크립트를 지원하지 않습니다.</p>
  </noscript>
</body>
</html>

태그 설명

카테고리 태그 속성 의미
내장 컨텐츠 iframe 다른 웹사이트를 삽입할 수 있는 태그  
name 이름  
src 사이트 경로 URL
width 가로 크기  
height 세로 크기  
allowfullscreen 전체 화면 모드 여부 Boolean
frameborder 테두리 사용 여부
1은 사용, 0은 사용 안함
1, 0
sandbox 보안을 위해 읽기전용으로 불러올지 여부.
보안은 강화할 수 있으나 일부 스크립트가 동작하지 않을 수 있음

allow-form: 양식 제출 허용
allow-scripts: 스크립트 실행 허용 
allow-same-origin: 같은 출처(도메인)의 리소스 만 허용
Boolean을 사용하거나 아래 옵션 추가
allow-form
allow-scripts
allow-same-origin
canvas 캔버스 API 또는 WebGL API를 사용해 그래픽과 애니메이션을 그릴 수 있도록 함.
그림은 자바스크립트로 그림
 
width 가로 크기  
height 세로 크기  
스크립트 script 외부 스크립트를 읽어오거나, 내부에 스크립트를 작성할 때 사용하는 태그  
async 비동기 실행 여부
동기 : 순차 실행
비동기 : 필요에 의해 순서를 바꾸어 실행
Boolean
src 필수
defer body의 내용을 다 읽고 스크립트를 읽을지 여부 Boolean
src 외부 스크립트 경로 내부 스크립트와 src를 동시 적용시, 외부 스크립트가 노출
type mime type. 콘텐츠의 미디어 유형을 설명.
기본적으로 적용되어 있음
text/javascript
noscript 스크립트가 실행되지 않는 환경에서 사용 될 html 삽입