내장 컨텐츠 / 스크립트 태그
내장 컨텐츠와 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 삽입 | |||
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
| #12 - HTML 태그 - form (0) | 2021.04.21 |
|---|---|
| #11 - HTML 태그 - 표 (0) | 2021.04.18 |
| #9 - HTML 태그 - 이미지/동영상/오디오 (0) | 2021.04.18 |
| #8 - HTML 태그 - 텍스트 (0) | 2021.04.09 |
| #7 - HTML 태그 - 컨텐츠 구분 (0) | 2021.04.08 |
