네카라쿠배 프론트엔드 취업완성 스쿨 2기[Chapter07](HTML 요소- 멀티미디어&내장콘텐츠& 스크립트)

---

01.멀티미디어  - IMG 1

 

속성              의미                                                                                                    값 

src (필수) :     이미지 URL                                                                                       URL
alt (필수)  :    이미지의 대체텍스트
width        : 이미지의 가로 너비
height       :  이미지의 세로 너비
srcset       :  브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의              (w, x) 사용 
sizes        : 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

 

 

 

코드:

결과: 

 

웹페이지에서 f12 를 누르면  vs code에서 index.html에 쓴 alt 안에 쓴 "하이" 가   마우스를 대면 대체이름 으로 뜨는 모습 

 

---

 

02.멀티미디어  - IMG 2 srcset, sizes 속성

 

 

 

  src와 sizes

src 속성은 srcset을 사용할 수 없는 환경에서 동작

srcset = 출력될 이미지 목록(후보)

sizes=  최적화된 조건

srcset 속성은 쉼표(,)로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정

sizes 속성은 쉼표(,)로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정

 

 

 

 

코드: 

 

<img

  srcset="images/heropy_small.png  400w,   //원본 크기  -400 

          images/heropy_medium.png 700w,    // 원본 크기  - 700

          images/heropy_large.png  1000w"     // 원본 크기  - 1000

 

          sizes="(max-width: 500px) 444px,     //최적화 크기 444(최대500인이미지의)

         (max-width: 800px) 777px,                 //최적화 크기 777 ( 최대 800인 이미지의)

         1222px"

 

 

  src="images/heropy.png"                    //경로

  alt="HEROPY" />                                //대체 텍스트

 

사용 방법

  <img

  srcset="경로 원본크기,

          경로 원본크기,

          경로 원본크기"

  sizes="(미디어조건) 최적화출력크기,

         (미디어조건) 최적화출력크기,

         기본출력크기"

  src="경로"

  alt="대체텍스트" />

  <!-- w 부분은 원본의 크기를 의미 -->

 

 

결과: 

 

 

 

 

f12를 눌러서 콘솔창을 가로로 늘렸다 줄이면 자동으로 맞는 크기의 이미지가 출력됨

 

---

03.멀티미디어  - IMG 3 -W,X 단위

 

 

 

srcset

 

 

• srcset은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정  

 

• 이미지가 2장이상일떄- srcset 사용   
• 디스크립터(Width descriptor)는 이미지의 원본 크기(가로 너비)를 의미
  
  (예를 들어 400x300(px) 크기 이미지의 w 값은 400w)
  
  
  
  
  X descriptor
  x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미 (  곱하기값을 의미 )
  
  
  
  <img
    srcset="images/heropy_small.png 1x,
            images/heropy_medium.png 1.75x,
            images/heropy_large.png 2.5x"
    src="images/heropy.png"
    alt="HEROPY" />

---

04.멀티미디어  - IMG 4 -sizes 속성

 

 

 

• sizes는 미디어의 조건과 조건에 해당하는 이미지의 '최적화 출력 크기' 를 조정
  
  
  
  

 

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


  min-width: 1000px( 브라우저의 가로넓이가 1000px 이상일떄를 의미)

    -> 1000px 이상일때는 700으로 최적화 해라는 의미 

 

 

코드와 예시

 

 

---

05.멀티미디어  - AUDIO

 

 

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


속성 

autoplay :          사이트에 들어가자마자 사이트에서 자동재생됨

controls :       제어 메뉴를 표시 불린(Boolean)

loop :           재생이 끝나면 다시 처음부터 재생 불린(Boolean)


preload :        페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)

preload 값{

none:                로드하지 않음,
metadata:            메타데이터만 로드,
auto:               전체 파일 로드 metadata
}


src     :            콘텐츠 URL      (URL)

muted :            음소거 여부 불린(Boolean)



코드와 예시 :

 

 

 

 

결과:

 

 

 

 

 

---

06.멀티미디어  - VIDEO

 

속성: 

autoplay : 준비되면 바로 재생                         불린(Boolean)

controls  :제어 메뉴를 표시                         불린(Boolean)

loop        :재생이 끝나면 다시 처음부터 재생              불린(Boolean)

muted    :  음소거 여부                                     불린(Boolean)

poster    : 동영상 썸네일 이미지 URL                     URL

preload 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)


preload 속성{

none: 로드하지 않음,
metadata: 메타데이터만 로드,
auto: 전체 파일 로드 metadata
}


src       :  콘텐츠 URL                            
width   :  동영상 가로 너비
height  :  동영상 세로 너비

 

 

 

 

코드와 예시:

 

 

 

 

결과:

 

 

                          poster 로 동영상의 썸네일을 설정,  video src 로 동영상을 불러옴 

 

 

 

 

---

07.멀티미디어  - FIGURE,FIGCAPTION

 

 

 

<figure>는 이미지나 삽화, 도표 등의 영역을 설정.

 

<figcaption>는 <figure>에 포함되어 이미지나 삽화 등의 설명을 표시.(Figure Caption)

 

 

 

코드와 예시:

 

 

 

 

---

 

08.멀티미디어  - IFRAME

 

 

 

다른 HTML 페이지를 현재 페이지에 삽입.

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

속성 


name                         프레임의 이름

src                             포함할 문서의 URL URL

width                         프레임의 가로 너비

height                         프레임의 세로 너비

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

frameborder                     프레임 테두리 사용 여부 0, 1 1

sandbox                         보안을 위한 읽기 전용으로 삽입 불린(Boolean) or

sandbox 속성

{
allow-form:                     양식 제출 가능,
allow-scripts:                  스크립트 실행 가능 ,
allow-same-origin:              같은 출처(도메인)의 리소스 사용 가능

}

 

 

 

코드와 예시 

 

 

 

결과:

 

 

 

인터넷 페이지가 떠야하는데 네이버에서 막아놨는지 안뜬다, 구글도안됨 

 

 

 

---

09.내장 콘텐츠 - CANVAS

 

 

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

속성

width   :캔버스의 가로 너비

height : 캔버스의 세로 너비

 

 

 

코드와 예시:

 

 

 

결과: 

 

 

 

 

 

---

10. 스크립트 - SCRIPT 1

 

 

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

css를 가져올때는 link태그

JavaScript를 가져올 떄는 script 태그

동기적: 순서대로 실행

비동기적 : 순서 x 필요에 의해서만 실행 (건너뛰거나 돌아갈 수 있음)

async   스크립트의 비동기적(Asynchronously) 실행 여부        불린(Boolean)         src 속성 필수

defer   문서 파싱(구문 분석) 후 작동 여부                                 불린(Boolean)         src 속성 필수

src 참조할 외부 스크립트    URL                                                URL                 포함된 스크립트 코드는 무시됨

type                                                                                            MIME 타입           text/javascript(기본값)    

*async 는 거의 사용하지않음 *

 

 

 

코드와 예시:

 

 

 

 

 

 

 

결과:

 

 

 

 

---

11. 스크립트 - SCRIPT 2

 

 

 

 

 

 

코드와 예시:

 

 

 

---

12. 스크립트 - NOSCRIPT

 

 

스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의.

 

 

 

index.html 내용:

 

 

 

index.html 결과:

 

 

 

 

 

 

 

 

 

noscript.html 내용:

 

 

 

noscript.html 결과: