8_[html]멀티미디어 태그

4 minute read

멀티미디어 태그

이미지 크기를 설정해두려면, 이미지 고유의 비율이 있기 때문에 가로나 세로 중 한 가지 속성만 변경해주는 것을 추천!
srcset과 sizes 속성은 반응형 페이지를 만들 때 사용됨(미디어쿼리와 다르게, 직접적인 환경설정 과정은 건너뛸 수 있음) -srcset 이 활용될 수 있는 환경에서는 src가 적용되지 않음

<img
	srcset="경로 원본크기w,
	경로 원본크기 x,..."
  sizes="(미디어조건) 최적화출력크기"
	src ="~"
  alt="~"
>

**srcset, sizes 속성은 IE에서 지원되지 않음!

img 태그- srcset 속성

srcset 속성 값에 대한 단위 w 또는 x

-srcset은 이미지를 사이즈별로 2장 이상 준비하여 작성해주어야 함

-작은 크기 이미지부터 순서대로 입력하기

-뷰포트 크기에 따라 이미지를 변경해줌

(a) w unit

Width descriptor
원본 크기의 가로 너비를 입력(ex: 400w)
테스트할 때에는 , 개발자 도구의 Network 탭에서 disable cache를 꼭! 체크해주어야 확인을 해볼 수 있다!

<!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>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <img srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w" src="images/heropy.png" alt="HEROPY" />
</body>

</html>

-위의 경우는

뷰포트 너비 ≤ 400px ▶️ small.png
401 px ≤ 뷰포트 너비 ≤ 700 px ▶️ medium.png
뷰포트 너비 ≥ 701px ▶️ large.png

와 같이 적용됨을 보여준다!(브라우저: 이미지가 늘려짐으로써 px이 뭉게어지지 않도록 위와 같은 방식으로 인식함!)

<!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>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <img srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
				 width = "300"
				 src="images/heropy.png" alt="HEROPY" />
</body>

</html>

추가로, 위와 같이 width 속성을 넣어주게 된다면, 이미지 크기는 변하지 않지만, 화면 너비에 따라 small.png, medium.png, large.png로 그림만 변경됨을 확인해볼 수 있다!

(b) x unit

Device pixel ratio descriptor
화면의 비율을 의미 ➡️ 화면이 100% (1x) 등등인지에 따라서 이미지 변경
w 단위가 x 단위보다 상위 개념(super set)이기 때문에, w 단위를 사용하면 x 단위를 사용할 필요 x
대부분 w 단위 사용

img 태그-sizes 속성

미디어 조건과 그 조건에 해당되는 이미지의 최적화 출력 크기를 지정

<img srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w" 
          sizes="(min-width: 1000px) 700px"
          src="images/heropy.png" alt="HEROPY" />

위와 같이 사용하는데, 이때의 의미는, 화면 크기가 1000px 이상에서 이미지를 medium(즉 , 700px 크기에서 해당될 수 있는 이미지 활용)로 출력하겠다는 의미!
미디어 조건 없이 sizes=”500px”로 입력하면 화면을 계속 500px로 활성화

audio태그의 속성

IE에서는 autoplay가 되지만, 크롬에서는 autoplay속성이 작동이 안될 수 있음
자바스크립트를 이용해서 특정 시점부터 재생하는 등의 보다 동적인 작업을 실행해줄 수 있음

동영상 컨텐츠(대표적: mp4) 삽입

video태그의 속성

⚠️ 1개의 video 태그 밑에는 1개의 source 태그를 매칭해주자!

<!DOCTYPE html>
<html lang="ko">
<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>
    <!--1개 video 태그에는 소스 1개! 매칭!-->
    <video controls width="250" poster="heropy.png">
    
        <source src="ocean.mp4"
                type="video/mp4">
    
        Sorry, your browser doesn't support embedded videos.
    </video>
    <video controls width="250" poster="heropy.png">
        
        <source src="https://cdn.videvo.net/videvo_files/video/free/2020-05/small_watermarked/3d_ocean_1590675653_preview.webm"
                 type="video/webm" controls>
     
         Sorry, your browser doesn't support embedded videos.
     </video>
    
</body>
</html>

autoplay속성이 잘 작동되지 않을 수 있음

figure : 이미지나 삽화, 도표 등의 영역을 설정
figcaption : figure에 대한 설명을 표시(figure caption)
사용자보다도, 브라우저나 정보통신보조기기, 검색엔진을 위함!

<!DOCTYPE html>
<html lang="ko">
<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>
    <figure>
        <img src="./heropy.png" alt="heropy">
        <figcaption>heropy 이미지</figcaption>
    </figure>
</body>
</html>

다른 html 페이지를 현재 페이지에 삽입
중첩된 브라우저 컨텍스트(프레임)을 표시할 때 사용됨[컨텍스트는 쉽게 말하면 하나의 웹 페이지라고 생각하면 됨]

iframe태그의 속성

단, sandbox 속성은 보안에는 강력하나, 자바스크립트 등 일부 속성의 적용을 저해할 수 있음(이를 allow-~로 적절히 대응해주기)

-일부 이미지나 애니메이션 등의 표시가 무시될 수도 있음

Canvas API나 WebGL API를 사용하여 그래픽이나 애니메이션을 렌더링
속성 : width, height- 캔버스의 가로 or 세로 너비

<!DOCTYPE html>
<html lang="ko">
<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>canvas</title>
</head>
<body>
    <canvas id="canvas" width="200px" height="150px"></canvas>
    <script src="./canvas.js"></script>
</body>
</html>

const canvas = document.querySelector("#canvas");
const context = canvas.getContext('2d');
context.fillStyle = 'rgb(200,0,0)';
context.fillRect(10,10,50,50);//x좌표, y좌표, width,height
context.fillStyle = 'rgb(0,0,200,0.5)';
context.fillRect(30,30,50,50);

스크립트 코드를 문서에 포함시키거나 외부 스크립트를 가져와서 페이지 내에 포함시키기 위해서 사용
동기적인 방식: From top to bottom 으로 실행
비동기적인 방식: 비순차적인 방식으로 코드 실행

script 태그의 속성

*동기 vs 비동기

<!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">
    <script src="./script.js"></script>
</head>
<body>
    <div id="my-name">HEROPY!</div>
    
    <title>Script Tag</title>
</body>
</html>

위의 경우, html이 From top to bottom으로 실행되기 때문에, 위와 같은 경우는, html 요소를 캐치할 수 없어서

script.js:2 Uncaught TypeError: Cannot read property ‘innerText’ of null at script.js:2

에러가 나올 수 있다!! 즉, 동기적으로 동작하기 때문이라는 것!

(1) 해결방안1 - async 속성이용 ▶️ 페이지가 파싱되는 동안에도 작동 가능

<!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">
    <script src="./script.js" async></script>
</head>
<body>
    <div id="my-name">HEROPY!</div>
    
    <title>Script Tag</title>
</body>
</html>

(2) 해결방법 2- script 태그 위치를 순차적으로 적용될 수 있는 body 태그 최하단으로 이동! ▶️ 물리적인 위치를 고려한 것

<!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">
    
</head>
<body>
    <div id="my-name">HEROPY!</div>
    
    <title>Script Tag</title>
	  <script src="./script.js" async></script>
</body>
</html>

(3) 해결방법 3- defer 속성을 이용해서 문서 파싱

<!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">
    <script src="./script.js" defer></script>
</head>
<body>
    <div id="my-name">HEROPY!</div>
    
    <title>Script Tag</title>
</body>
</html>

html 문서를 먼저 다 파싱을 한 후 src에 있는 파일을 해석하도록 한 것!

(2)+(3)을 실무에서 가장 많이 사용!

⚠️ 외부 스크립트를 연결해서 사용할 경우, script 태그 내부의 내용은 무시됨!

<script src="./script.js" >
        **console.log("안녕하세요~");**
</script>

즉, 위와 같은 경우, console.log(“안녕하세요~”); 부분이 무시되어 콘솔에 기록되지 않는다!

대부분 웹에서 javascript는 표준으로 적용되고 있기 때문에, “type=”text/javascript”“을 생략해주어도 됨!(이미 지정되어 있음)[MIME Type]

스크립트를 지원하지 않는 경우에 삽입할 html을 정의
이전에 js가 동작하지 않았던 웹 브라우저를 지원하기 위한 태그로써 등장했었음
이전에 iframe의 sandbox로 인하여 일부 js 동작이 어려울 때에도 용이
반대로, js를 실행할 수 있는 환경에서는 noscript 부분이 실행되지 않음

지금은 js를 지원받을 수 있는 환경이므로 iframe과 sandbox를 이용해서 간단하게 테스트 해보자

1) 내부프레임으로 넣을 html 문서

<!DOCTYPE html>
<html lang="ko">
<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>tester</title>
</head>
<body>
    <div id="my-name">Hello!</div>
    <noscript>
        자바스크립트를 지원하지 않는 환경입니다!
    </noscript>
    <script src="script.js"></script>
</body>
</html>

2) 1)을 포함시킬 메인 html 문서

<!DOCTYPE html>
<html lang="ko">
<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>no-script</title>
</head>
<body>
    <iframe src="./index.html" style="border:2px solid teal;" frameborder="0"sandbox></iframe>
</body>
</html>

noscript 태그

이렇게 실행된다면, noscript로 인해서 아래와 같은 화면이 나타난다

Twitter Facebook LinkedIn

J. S. Jeong

8_[html]멀티미디어 태그

멀티미디어 태그

img 태그- srcset 속성

img 태그-sizes 속성

You May Also Enjoy

1_[spring]rest api 구축에 힘을 실어주는 hateoas

2_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하는 경우

1_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하지 않는 경우

2_[spring]websockethandler를 이용한 웹소켓 서버 구현