07_내장요소
FrontEnd/HTML&CSS

07_내장요소

728x90

내장요소로 iframe, canvas, script를 배웠다. iframe은 다른 html을 불러오는거, canvas 는 js를 이용하여 그림을 그릴 수있는공간이고 script는 말 그대로 스크립트들을 가지고 올 수있는 것이다.

 

더보기

iframe 다른 HTML가져오기
name 프레임의 이름
src 포함할 문서의 URL URL
width 프레임의 가로 너비
height 프레임의 세로 너비
allowfullscreen 전체 화면 모드 사용 여부 불린(Boolean)
frameborder 프레임 테두리 사용 여부 0, 1 1
sandbox 보안을 위한 읽기 전용으로 삽입 불린(Boolean) or
allow-form: 양식 제출 가능,
allow-scripts: 스크립트 실행 가능 ,
allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>우리 페이지!</p>
    <img src="./images/heropy.png" alt="mingyu">
     <iframe src="https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/" 
            frameborder="0"
            width = "70%"
            height = "400"
            style="border : 4px solid red;"></iframe> 

            <iframe width="1280" height="720" src="https://www.youtube.com/embed/Q9yn1DpZkHQ" frameborder="0" allowfullscreen></iframe>
    
</body>
</html>

유튜브 딱 나오는데 엄청 신선했다. 빨리 HTML이랑 CSS를 배워서 내 페이지를 만들어보고 싶다.

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="./JS/main.js" defer></script> <!-- defer << 모든 부분을 분석한 다음에 실행 -->

</head>

<body>

  <div id = "my-name"> 정민규! </div>



  <script src="./JS/main.js" defer>  

    console.log('안녕하세요~')

  </script>   <!-- src가 있다면 안녕하세요가 무시된다.-->

 

</body>

</html>

스크립트에서 가장 중요한거는 js에서 id(my-name)을 읽는 부분이 있을시 위에서부터 읽기때문에 인식을 못한다.

마치 c언어에서 함수를 위에다가 선언하지 않으면 main문에서 읽어오지 못하는것과 동일하다.

그래서 body의 맨 밑에 선언을 하던, defer을 사용하여 모든부분을 분석한 다음에 실행하던지의 역할이 필요하다.

 

 

 

 

 

나머지내용으로는..

더보기

canvas
canvas API , WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링
> 그림은 JS로 그릴 수 있다

<script> 스크립트 코들르 문서에 포함하거나 참조

sync 스크립트의 비동기적(Asynchronously) 실행 여부 불린(Boolean) src 속성 필수
defer 문서 파싱(구문 분석) 후 작동 여부 불린(Boolean) src 속성 필수
src 참조할 외부 스크립트 URL URL 포함된 스크립트 코드는 무시됨
type MIME 타입 text/javascript(기본값)


<noscript>
스크립트를 지원하지 않는 경우에 삽일할 HTML을 정의

위에정도만 알아두면 될 것같다.

 

 

728x90

'FrontEnd > HTML&CSS' 카테고리의 다른 글

09_Form,input  (0) 2021.11.01
08_표 콘텐츠  (0) 2021.11.01
06_멀티미디어(img,audio,video)  (0) 2021.10.31
05_HTML 인라인 요소  (0) 2021.10.31
04_content 구분 & 문자콘텐츠  (0) 2021.10.30

    티스토리툴바