[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션

빼뺴로데이

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 24일차입니다!

오늘은 내장 콘텐츠를 표현하는 2가지 태그에 대하여 공부했어요.

<iframe> 태그는 티스토리 블로그 글 안에 JS Fiddle에서 만든 자료를 첨부할 때 사용하고 있고,

<canvas> 태그는 전에 다닌 회사에서 인턴 프로젝트 할 때 사용해본 경험이 있습니다.

 

내일이면 7번째 커리큘럼도 끝납니다.

오늘은 08~09. 내장 콘텐츠 - iframe / canvas 에 대하여 공부했습니다.

---

<Today I Learned>

<iframe>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe

🔸 외부 HTML 페이지를 현재 페이지에 삽입.

    🔹 티스토리 블로그 페이지에 JS Fiddle 페이지를 삽입하듯이

🔸 속성 종류 (1~4) : name, src, width, height

🔸 속성 (5) allowfullscreen : Boolean 타입, 이 속성을 적어주지 않으면 삽입 페이지를 전체 화면으로 볼 수 없음.

🔸 속성 (6) frameborder : 기본값은 1(=테두리 있음), 보통 0 값으로 사용하며 값이 0일 때 CSS style에서 테두리선을 넣을 수 있음

🔸 속성 (7) sandbox : 보안을 위한 읽기 전용 페이지로 만듦, 외부에서 가져오는 링크를 부분(전체)적으로 보안 적용, 값으로 Boolean 또는 allow-form(양식 제출 가능), allow-scripts(스크립트 실행 가능), allow-same-origin(같은 출처(도메인)의 리소스 사용 가능)을 가짐. 

    🔹 Boolean 값을 가질 때, 페이지 내 외부 광고 등을 불러오지 못하는 것을 볼 수 있음.

 

<canvas>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/canvas

🔸 Canvas API나 WebGL API를 사용하여 그래픽이나 애니메이션을 렌더링함.

✨ API: Application Programming Interface, 응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 (출처-위키백과)

 

🔸 속성: width, height

🔸 JavaScript로 제어함.

 

- 예제

<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>

<script>
	var canvas = document.getElementById('canvas'); 
	var ctx = canvas.getContext('2d'); 
	ctx.fillStyle = 'green'; 
	ctx.fillRect(10, 10, 100, 100);
</script>

 

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM