[패캠 네카라쿠배 2기 도전] HTML/요소 - 멀티미디어&내장 콘텐츠&스크립트

1. 멀티미디어 

1)img

이미지를 삽입 

빈태그 

속성 = 값 

- src (필수) 이미지 url : 경로

- alt  (필수) 이미지의 대체텍스트 

- width 이미지의 가로 너비

- height 이미지의 세로 너비 

=> width or height 하나만 설정하면 비율을 그대로 유지한 채 크기가 조정된다/ px를 쓰지 않아도 된다 

=> 크기는 css로도 조절할 수 있다

- srcset : 브라우저에게 제시할(사용할) 이미지 url과 원본 크기의 목록 정의 값: w,x

이미지를 지원하기 위해 미디어쿼리라고 부르는 css media rule (@media)에서 background-image 속성을 많이 사용

반응형 이미지를 처리하기 위해 뷰포트의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 한다 

html img의 srcset와 sizes를 통해 이미지 크기 설정만으로 대부분 고려 사항을 브라우저에게 넘길 수 있다

 

cf. 테스트에 앞서 이미지 캐싱 되어 새로고침 되지 않는 경우 발생 가능.

그러므로 개발자도구 중 network의 disable cache를 체크해야 한다 

 

ex. <img src = "경로" alt="대체 텍스트" width="">

경로에서 ./없이도 해당 폴더에서 가져갈 수 있다 

 

cf. 개발자 도구의 점3개를 클릭하면 개발자 도구를 어느 쪽에서 실행할 것인지 설정할 수 있다 

 

ex. 경로 (띄어쓰기) 크기(이미지의 원본 크기의 가로너비 400w) 

 - 출력될 이미지들의 목록(후보들)

 - 뷰포트의 너비를 확대축소할 때 이에 맞는 이미지가 후보 목록인 srcset 중에서 하나씩 출력되는 것

 - 사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성한다 (1장만 쓸거면 srcset 필요 없음)

 - 주의사항은 이미지 크기로 px이 아닌 w단위 혹은 x 단위를 입력해야 하며

   작은 크기 이미지부터 순서대로 입력한다

=> srcset가 있는 경우 브라우저는 srcset을 사용할 수 있으면 사용, 안되면 src 사용

 

ex. <img

       srcset = "경로1 400w, 

                   경로2 700w, 

                   경로3 1000w" 

       (width = 400)

       src = ""

       alt = "" />

=> 400 이하면 경로1에 있는 이미지(400), 400~700 사이면 경로2 이미지(700), 700 이상이면 경로3 이미지(1000)

=> 뷰포트보다 이미지가 작으면 이미지를 늘려서 나와야하기 때문에 차라리 줄여서 쓸 수 있는 가장 가까운 사이즈의 이미지를 나오도록 한다

=> 이때 만약 일정하게 나오도록 하고 싶으면 width를 고정해놓으면 된다

(뷰포트의 너비에 따라서 다른 경로에서 이미지가 오는 것은 마찬가지지만 너비는 400으로 고정된다) 

 

w unit 

w단위 (width descriptor)는 이미지의 원본 크기(가로 너비)를 의미한다 

ex. 400X300(px)크기 이미지의 w값은 400w

 

X unit 

이미지의 비율 의도 ( 숫자 1을 기준으로 해서 몇배인지 배수를 정의한다. ex. 두배면 2x )

srcset = "경로1 1x,

                   경로2 1.75x, 

                   경로3 2.5x" 

 

제일 위 이미지를 기준으로 아래 두 이미지가 뷰포트에 나올 범위를 x의 배수로 알려줄 수 있다

x단위는 가늠하기 어렵기 때문에 웬만하면 w단위로 사용한다. 

 

- sizes : 미디어 조건과 그 조건에 해당하는 이미지의 최적화 출력 크기 지정

ex. sizes= "(min-width: 1000px) 700px,

최소가 1000일때 (즉 1000 이상일 때 최적 출력크기로 설정한 700으로 나온다)   

=> 그러므로 라지가 아니라 미디움 이미지가 사용된다 (경로2)

- sizes와 width의 차이: 

width를 500px로 해놓으면 경로는 다르지만 출력하는 크기는 일정하게 500px으로 나온다

sizes = 500px로 하면 모든 경로에서 나오는 것이 아니라 가장 사이즈가 비슷한 경로에서 온다

(최적화 출력 크기: 출력되는 크기는 500

- 여기서 최적화된 이미지는 400, 1000이 아닌 700이 확대, 축소해서 가장 비슷하니까 700대 이미지를 사용한다)

=> width는 출력 크기만 지정하고 경로가 매번 다를 수 있는데 반해

sizes는 이미지의 '출력 크기' + '최적 크기'를 동시에 활용해서 경로 바뀌지 않고 한가지 이미지만 사용

=> 단, width, sizes를 같이 작성할 경우 width가 우선

srcset와 sizes는 IE에서 지원하지 않는다

 

2)audio 

- 소리 콘텐츠(mp3)를 삽입 

- autoplay가 지정된 경우 preload는 무시됨 

속성 = 값 (값이 불린이면 값을 넣지 않아도 된다) 

autoplay = 불린 : 오디오 콘텐츠가 페이지에 들어가자마자 바로 재생이 된다 

controls = 불린 : 제어 메뉴를 표시 ex. 재생, 정지 버튼 등을 출력하기 위해 필요

                      컨트롤러가 없으면 화면에 아무것도 뜨지 않는다

loop = 불린 : 재생이 끝나면 다시 처음부터 재생할

preload = metadata(기본적인 정보를 불러오는 정도)

             /none(로드하지 않다가 재생되면 로드)

            /auto(전체 파일을 미리 로드)  : 페이지 로드될 때 파일을 로드할지 지정(힌트 제공)

src = url : 콘텐츠 url (소스)

muted = 불린 : 음소거 여부 (속성 control 있으면 mute된 거 다시 바꿀 수 있다) 

페이지를 로딩했을 때 바로 muted한 상태로 뜬다 

인라인 요소 

 

3)video

동영상 콘텐츠(mp4)를 삽입 

- autoplay가 지정된 경우, preload는 무시된다 

속성 = 값 

autoplay : 준비되면 바로 재생. 없으면 사용자가 재생 버튼을 바로 눌러야 한다

controls : 제어 메뉴를 표시 => 화면에 나오려면 필요하다, 없으면 프로필 사진처럼 이미지만 뜬다

crossorigin : 외부에서 동영상을 가져올 때 동일한 출처인지 확인을 할 것인지 물어보는. 

loop: 재생이 끝나면 다시 처음부터 재생 

muted: 음소거 여부 

poster = url : 동영상 썸네일 이미지 url, 경로(재생되기 전 썸네일 이미지를 poster를 통해서 넣을 수 있다)/

                  autoplay로 하면 백퍼 썸네일 없이 나온다 

preload = metadata(기본값, 메타데이터만 로드) : 페이지가 로드될 때 동영상 컨텐츠를 조금 불러올지 전체를 불러올지 불러오지 않을지 지정

src = url : 콘텐츠 url 

width : 동영상 가로 너비 

height : 동영상 세로 너비 

인라인 요소 

<video src = "url" controls autoplay loop muted poster = "url" > => controls 없으면 이미지로 나온다 

  

4)figure, figcaption

(1)figure

이미지나 삽화, 도표 등의 영역을 설정 

이미지를 삽입하고 해당하는 설명을 밑에 놓으면 분리되어 있으니까 관련 있는 내용인지 모른다(브라우저 입장에서는) 

그러므로 figure 안에 img, figcaption을 넣는다 

<figure> 

<img src = "./(주변)images(폴더 이름)/heropy.png(파일 이름)"> 

<figcaption>이미지에 대한 설명</figcaption> 

 

(2)figcaption 

figure에 포함되어 이미지나 삽화 등의 설명을 표시 

=> 이 둘은 사용자보다 브라우저가 인식할 수 잇도록 한다

 

2.내장 콘텐츠

1)iframe 

다른 html 페이지를 현재 페이지에 삽입 

(중첩된 브라우저 컨텍스트(프레임)을 표시) 

ex. youtube등을 삽입할 때 사용 

인라인 요소 

 

속성 

name 

src

width 

height

 

ex. <p>우리 페이지야<p> 

<div> 

     <img src = "경로" alt = " "> => 이미지가 들어간다 

</div>

<div> 

     <iframe src = "네이버 주소"

            frameborder = "0"

            width = "70%"

            height = "400px"

            style = "border: 4px solid red"></iframe> => 네이버 창이 작게 뜬다!

</div>

다른 html 페이지를 현재 페이지에 삽입 

(중첩된 브라우저 컨텍스트(프레임)을 표시 ) 

 

속성 = 값 

동영상 우클릭 소스코드 복사 

<iframe width="788" height="443" src="https://www.youtube.com/embed/Frs7j21R4Cc" 

title="YouTube video player" frameborder="0" allow="accelerometer; 

autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

name : 프레임의 이름 => iframe의 이름. 

src = url : 포함할 문서의 url  

width : 프레임의 가로 너비 

height : 프레임의 세로 너비 

allowfullscreen : 전체 화면 모드 사용 여부 (불린)

frameborder = 0, 1(기본값은 1) : 프레임 테두리 사용 여부, 안 쓸거면 0으로 

sandbox = allow-form(양식 제출 가능), allow-script(스크립트 실행 가능), allow-same-origin(같은 출처(도메인)의 리소스 사용가능)  : iframe은 외부에 있는 사이트를 가져와서 삽입하는 것 그러므로 보안 문제 생길 수 있으니까

sandbox로 보안을 더 강하게 한다. 사이트에서 사용하는 기본적인 입력 양식, 자바스크립트 등이 잘 안될 수 있다. 보안을 위한 읽기 전용으로 삽입(페이지가 노출되는 정도, 추가적인 코드가 동작하지 않을 수 있다) 

 

2)canvas

그래픽이나 애니메이션을 렌더링 (범위를 정하는 용도) 

Canvas API, WebGL API(웹에서 그림, 그래픽 등을 사용할 수 있게 고성능 지원)

를 사용하여 그래픽이나 애니메이션 랜더링

속성 

height : 캔버스의 세로  

width : 캔버스의 가로 => 둘 다 px 필요 없음

<canvas id = "canvas" width="200" height="150"></canvas>

<script> 

const canvas = document.getElementById('canvas')' 

const ctx = canvas.getContext('2d') => 이 canvas에 2d그림을 그릴거라고 선포

ctx.fillStyle = 'rgb(200,0,0)';  

ctx.fillRect(10,10,50,50) => x, y에서의 거리, 가로, 세로 사이즈

ctx.fillStyle = 'rgba(0,0,200,0.5)'

ctx.fillRect(30,30,50,50);

 

3.스크립트

1)script

스크립트 코드를 문서에 포함하거나 참조(외부 스크립트) 

내부에 JS를 삽입하거나 외부에 있는 script를 src로 가져올 때 쓴다 

 

(1) async = 불린 : (src 필수) 스크립트의 비동기적 실행 여부, 비동기적 코드를 만들었을 때 js을 html에 연결할 때 비동기적으로 할지 여부를 async로 사용할 수 있다

(동기적 실행: JS가 순차적으로 실행될 때 이전 코드가 실행된 다음에 다음이 실행되는 방법

비동기적 실행 : 순서대로가 아니라 돌아가거나 다른 코드를 실행할 수 있다. )

외부에서 가져올 때 src를 가지고 외부 파일을 가져올 수 있다. src는 내부에 있는 JS를 활용하지 않는다는 것을 명시 

=> src 속성 필수 

 

(2)defer = 불린: 문서 파싱(구문 분석) 후 작동 여부 

html에 있는 내용을 JS로 찾아서 실행해야 하는 경우가 발생, 이때 JS가 언제 작동되는지에 따라서 실행 여부 확인할 수 있다

=> src 속성 필수 

ex. <div id="my-name">HEROPY!</div> 

=> JS로 이 태그의 내용을 알아내서 console에 찍는 것이 목표 

 

자바스크립트 파일 main.js 

const myName = document.getElementById('my-name'); 

console.log(myName.innerText); => 하지만 이렇게 하면 못찾는다 왜? 

html파일에서 순서대로 처리를 하다가 마지막에 script태그를 보기 때문에 마지막에 실행하게 된다

그러므로 찾아야 하는 요소보다 밑에 script를 찾는 태그가 있어야 html파일을 읽고 해당 태그를 찾아줄 수 있다. 

그러므로 body의 마지막 줄에 넣어주기[방법1]

html파일에서 <head>태그 안에

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

 

=> 이런 불편함을 피하기 위해 <script src = "./js/main.js defer></script> 

defer 속성을 주면 마지막에 읽는다 [방법2]

 

 

(3) src = "url" : 참조할 외부 스크립트 url 

포함된 스크립트 코드는 무시됨(내부에 작성된 JS 코드는 무시된다. 외부 파일 안에 포함되어 있는 내용이 읽힌다)

 

(4) type = "text/javascript" (기본값) : 굳이 새롭게 명시하지 않아도 된다

 

2)noscript

스크립트를 지원하지 않은 경우에 삽입할 html 정의

- 자바스크립트가 동작하지 않는 브라우저들도 있었기 때문에 

- iframe을 쓸 때도 sandbox로 JS가 실행이 안되니까 

<noscript> 

 안에 있는 텍스트는 JS가 실행될 때 나타나지 않고 

JS가 실행되지 않을 때 나타난다

</noscript> 

noscript.html

<iframe src = "./index.html" frameborder = "0" style= "border: 4px red" sandbox> </iframe> 

현재 페이지에서 다른 페이지를 불러올 때 사용 

index.html을 띄우는데 sandbox을 이용해서 script가 막혔기 때문에 index.html에서 실행될 수 있는

파일이 없으니까 해당 텍스트가 나온다