scrset= 브라우저에 제시할 이미지들과 그 이미지의 원본 크기를 제시한다. 사용할 후보 이미지의 경로와 원본의 크기를 작성하는데, scrset의 경우 사용할 이미지의 크기가 2장이상일 때 사용이 가능하며, px단위가 아닌 w와 x의 단위를 사용하여 작은 이미지부터 순서대로 입력을 하면된다. 1장일 경우 scr을 이용하며, scrset이 되지않을 경우 사용할 이미지를 scr에 입력한다. 개발자 도구를 이용하여 px의 크기를 살펴봄으로 브라우저의 최적화소스를 확인할 수 있다.
w unit = 원본크기의 가로너비를 의미한다. 예를 들어 400*300px의 경우 w =400w을 작성한다.
이미지파일은 css보다 srcset으로 쉽게 최적화가 가능하다.
audio = 소리컨텐츠를 삽입하는 태그 <속성>auto paly : 준비가 되면 바로 재생 controls : 제어창만듬 loop :재생이 끝나면 다시 재생(반복) preload :들어갈때 미리준비 -기본값으로는 metadata로 설정이되어있으며 , none 로드하지않음 auto 전체파일로드 설정이 가능하다. src: img의 경로 명시한것처럼 오디오 파일의 경로를 작성할 수 있다. muted : 음소거 ->controls로 조절가능하며, 특정구간조절과 어느부분부터 시작할지에 대한 설정은 java string으로 가능하다.
video = 동영상을 삽입하는 태그, 동영상의 경우 웹에서 많이 mp4를 사용하고 있으며, 속성의 경우 audio와 동일하다. 추가적으로 poster -> 썸네일 이미지를 삽입하며, 영상은 직삭각형으로 가로와 세로를 지정할 수 있다.
figure =전체적으로 rapping하여 이미지와 연결되는 부가적인 설명을 적을 수 있다. 정보통신기계들이 연결된 것을 확인 할 수 있다.
figcaption = 부가적인 text부분에만 적어준다.
내장컨텐츠
iframe =다른 html페이지를 현재 page에 삽입할 수 있다. 코드
실행시 나타나는 형태
중첩된 브라우저의 프레임을 표시한다. html에 인터넷 홈페이지에 삽입한다.
선을 입력할 때 두께, 어떤선으로 넣을 것 인지, 색상 순으로 입력하면 된다.
iframe의 속성은 name :여러가지를 넣을 때 구별이 가도록 이름을 넣어주는 속성 allowfullscreen : 프레임을 전체화면모드로 적용할 것인지 framborder =외곽선 기본값은 1로 설정되어있으나 많이 0으로 설정한다. sandbox =보안적인 문제시 사용을 하며 java strip실행이 어려울 수 있다. 보안을 설정하기 때문에 자유롭게 사용하는 것을 막으며 보안이 강하게 작용되어 읽기만 가능하다. 특정문제가 있을 수 있기 때문에 설정된다.
canvas = canvas API와 webGL API(고성능api)를 사용할때 그래픽이나 애니메이션의 랜터링 범위를 지정한다. JAVA strip에서 사용하기 때문에 모를 경우에 이용 할 수 없다.script태그로 만들거나 파일로 작성이 가능하다. 이번에는 태그로 설정하였다.
처음에 작업할 html요소를 설정하기위해 "canvas"을 입력하였고, 넓이와 높이를 설정하였다. script태그를 설정하고 const(상수) canvas(명칭) =document.getElementById('canvas');(다큐멘터리에서 canvas를 찾기,공급,호출하기)입력후 const ctx = canvas.getContext('2d'); (요소를 2d로 입력함) 이후 fillStyle(카밀표기법)으로 rgb를 설정하였다.
rgb색상표 :http://www.n2n.pe.kr/lev-1/color.htm
http://www.n2n.pe.kr/lev-1/color.htm rgb 색상표 퍼온 곳
ctx.fillRect로 사각형을 그려서 (x ,y, w, h)의 설정을 하였고 2개의 사각형을 만들기 위해 2번째도 입력을 하였다.
완성
script =내부에서 직접 작성, 외부에서 src로 스트립트 가져오는 작업, css를 가져오기 위해서는 link를 이용했으나 script는 src로 이용하여 가져올 수 있다. (속성) async : src의 필수 속성으로 비동기적인 실행여부에 대해서 의미한다. 동기란 순차적(순서대로)진행할 것 , 비동기란 필요에 따라서 사용되는 것을 의미한다. ★중요한 속성으로 defer이 있다. 문서를 분석하고 작동시키는 속성으로 scrip의 경우 언제 동작할 것인지 실행시점을 정할 수 있는 장점이 있는데, script scr를 head에 작성을 하고 실행을 하고 , body안에 js파일을 만들어 불러올 경우 head에 속성이 있기 때문에 body안에 글을 출력하지 못하는 단점이있다. 그렇기 때문에 body안쪽에 실행하도록 물리적으로 변경이 가능하며(실무에서 사용), 혹은 defer을 사용하여 전체적으로 1번분석후 불러올 수 있게 하는 방법(물리적 변경 X) 이 있다.
외부 스트립트를 가지고 올 경우 scr은 원래 기존에 포함된 스크립트 코드는 무시한다. console.log로 가져오기를 진행한다고 하더라도 무시하게된다.
script type ="text/java stript"로 입력을 해야하지만 MINE TYPE이기 때문에 기본값으로 설정되어있어 따로 작성하지 않아도 된다.
no stript = sandbox와 같이 스트립트를 지원하지 않을 경우 삽입할 html을 정의한다.iframe처럼 html을 가져와 삽입한다.
