4. 화면 요소들의 반응형 처리

4. 화면 요소들의 반응형 처리

4.1 flex

4.1.1 flex(flexbox)란?

<div class="container">
      <div class="item">hello</div>
      <div class="item">flex</div>
      <div class="item">box</div>
</div>

💡

알아두면 좋아요

 

개발자 도구에 flexbox 디버깅 도구가 있습니다. 이 도구를 활용하시면 flexbox 레이아웃에 대한 정보를 직관적으로 확인할 수 있습니다. 개발자 도구 단축키는 f12 누르시면 됩니다.

4.1.2 flex의 두 개의 축

• 주축(main axis) : 플렉스 아이템이 배치되고 있는 방향으로 진행하는 축입니다. 기본값은 행(row) 방향입니다. 주축의 시작과 끝을 일컬어 main start과 main end라고 합니다.

• 교차축(cross axis) : 플렉스 아이템이 내부에 배치되는 방향에 직각을 이루는 축입니다. 교차축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.

4.1.3 flex container

.container {
	display: flex; // display: inline-flex
}

• flex-direction : 플렉스 아이템의 배치 방향을 설정합니다.

• flex-wrap : 플렉스 아이템을 여러 줄 배치합니다.

• flex-flow : 플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정합니다.

• justify-content : 주축 방향으로 다양하게 플렉스 아이템을 배치합니다.

• align-items : 교차축 방향으로 다양하게 플렉스 아이템을 배치합니다.

• flex-direction: row : 주축이 수평 방향입니다. 컨테이너의 아이템들이 수평축(왼쪽에서 오른쪽)으로 배치됩니다.

• flex-direction: row-reverse : row와 동일하게 동작하지만 주축의 시작점과 끝점이 반대로 위치됩니다. 아이템들이 수평축(오른쪽에서 왼쪽)으로 배치됩니다.

• flex-direction: column : 주축이 수직 방향입니다. 컨테이너의 아이템이 수직축(위에서 아래)으로 배치됩니다.

• flex-direction: column-reverse : column과 동일하게 동작하지만 수직축의 시작점과 끝점이 반대로 위치됩니다. 아이템들이 수직축(아래에서 위로)으로 배치됩니다.

• flex-wrap: nowrap : 기본 설정값으로 컨테이너의 영역을 벗어나더라도 아이템들을 한 줄로 배치합니다.

• flex-wrap: wrap : 아이템들이 컨테이너 영역보다 클 때 컨테이너의 영역 내에 한 줄로 배치되지 못하는 상황이 있습니다. 그때 여러 행의 걸쳐 배치되게 하는 속성입니다. 여러행으로 배치되었을 때 각각의 행은 하나의 컨테이너라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않기 때문입니다.

• flex-wrap: wrap-reverse : wrap속성과 동일하지만, 아이템들이 나열되는 시작점과 끝점이 반대가 됩니다. 예시를 보면 더욱 쉽게 이해할 수 있습니다.

flex-flow = <'flex-direction'> || <'flex-wrap'>

• justify-content : flex-start : 컨테이너의 아이템들이 주축의 시작 부분부터 밀착되어 정렬됩니다. 따로 속성 값을 지정해 주지 않으면 기본값으로 들어가는 값입니다.

• justify-content : flex-end : 컨테이너의 아이템들이 주축의 끝부분부터 밀착되어 정렬됩니다.

• justify-content : center : 컨테이너의 아이템들이 주축의 중앙 부분부터 밀착되어 정렬됩니다.

• justify-content : space-between : 컨테이너의 아이템들이 주축을 따라 고르게 분포됩니다. 아이템들 사이의 공간이 동일하게 유지되고 첫 번째 아이템은 주축의 시작점의 가장자리에 마지막 아이템은 주축의 끝점의 가장자리에 밀착됩니다.

• justify-content : space-around : 컨테이너의 각 아이템들의 이전과 이후의 공간의 크기가 동일하게 정렬됩니다. 즉 첫 번째 아이템의 이전과 마지막 아이템의 이후의 공간은 아이템 간의 사이 공간 크기의 절반을 차지합니다.

• justify-content : space-evenly : 컨테이너의 아이템들 간의 공간과 첫 번째 아이템 이전, 마지막 아이템 이후의 공간이 동일하게 정렬됩니다.

• align-items : stretch : 컨테이너의 너비 및 높이에 한해서 아이템들이 교차축 방향으로 가득 채웁니다. 따로 속성 값을 지정해 주지 않으면 기본값으로 들어가는 값입니다.

• align-items : flex-start : 컨테이너의 아이템들이 교차축의 시작선에 정렬됩니다.

• align-items : flex-end : 컨테이너의 아이템들이 교차축의 끝선에 정렬됩니다.

• align-items : center : 컨테이너의 아이템들이 교차축의 중앙에 정렬됩니다.

• align-content : stretch

• align-content : flex-start

• align-content : flex-end

• align-content : center

• align-content : space-between

• align-content : space-around

• align-content : space-evenly

4.1.4 flex item

• flex-basis : 아이템의 초기 크기 설정합니다.

• flex-grow : 아이템이 부모 컨테이너에 남은 공간을 얼마나 차지할지 설정합니다.

• flex-shrink : 아이템이 부모 컨테이너의 공간보다 클 때 얼마큼 줄어들지 설정합니다.

.item {
	flex-basis: 150px;
}

• content : 컨테이너의 아이템의 컨텐츠 크기에 따라 자동으로 크기가 바뀝니다.

.item {
	flex-grow : 1;
	/* flex-grow : 0;   기본값 */
}

/* 1:2:1의 비율로 설정할 경우 */
.item1 { flex-grow : 1; }
.item2 { flex-grow : 2; }
.item3 { flex-grow : 1; }

4.2 Grid 레이아웃

4.2.1 Grid 개념

<div class= "container">
    <div class= "item">A</div>
    <div class= "item">B</div>
    <div class= "item">C</div>
</div>

• 그리드 컨테이너 (Grid Container)

• 그리드 셀 (Grid Cell)

• 그리드 아이템 (Grid Item)

• 그리드 트랙 (Grid Track)

• 그리드 라인 (Grid Line)

• 그리드 넘버 (Grid Number)

• 그리드 갭 (Grid Gap)

• 그리드 영역 (Grid Area)

💡

크롬의 개발자 도구에는 그리드 레이아웃을 명확하게 시각화하는 기능이 있습니다. 개발자 도구를 열고 그림과 같이 표시된 영역을 클릭하면 이를 확인할 수 있습니다.

 

4.2.2 Grid Container

.container1 {
    display: grid;
} 
.container2 { 
    display: inline-grid;
}

• grid-template-columns: 열 방향 그리드 트랙의 크기를 설정합니다.

• grid-template-rows: 행 방향 그리드 트랙의 크기를 설정합니다.

.container {
    display: grid;
    grid-template-columns: 100px 200px 300px;
    grid-template-rows: 200px 200px;
}

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: 100px 1fr 2fr;

repeat(반복 횟수, 반복 값);

grid-template-columns: repeat(3, 200px);

grid-template-columns: repeat(4, 1fr 2fr);
grid-template-rows: repeat(2, 1fr);

minmax(최솟값, 최댓값)

grid-template-columns: minmax(100px, 1fr);

• auto-fill: 그리드 아이템이 사용할 수 있는 공간을 모두 채울 때까지 반복됩니다. 그리드 컨테이너에 가능한 한 많은 그리드 행 또는 열을 생성하려고 시도하며, 그리드 아이템이 부족한 경우에는 빈 공간이 남게 됩니다.

• auto-fit: auto-fill과 비슷하지만, 셀의 길이를 나눠서 길이를 딱 맞게 설정해 그리드 아이템과 함께 비어 있는 공간도 고려하여 열 또는 행의 수를 결정합니다. 따라서 그리드 내 아이템이 적더라도 남는 공간 없이 채우려고 합니다.

.container1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.container2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

• column-gap: 그리드 아이템의 열 사이의 간격을 조절합니다.

• row-gap: 그리드 아이템의 행 사이의 간격을 조절합니다.

• gap: 사용해서 행 간격과 열 간격을 한꺼번에 설정할 수도 있습니다.

.container{
    row-gap: 10px; /* row의 간격을 10px */ 	
    column-gap: 20px; /* column의 간격을 20px */
    gap: 10px 20px; /* row-gap: 10px; column-gap: 20px; */
}

• grid-auto-columns: 그리드 아이템의 크기를 자동으로 지정할 때 사용됩니다. 열의 개수를 알 수 없거나 자동으로 생성될 때 자동으로 크기를 지정해 줍니다.

• grid-auto-rows: 그리드 아이템의 크기를 자동으로 지정할 때 사용됩니다. 행의 개수를 알 수 없거나 자동으로 생성될 때 자동으로 크기를 지정해 줍니다.

• grid-auto-flow: 자동으로 생성되는 그리드 아이템의 배치 방법을 정의합니다. 그리드의 배치 방향을 정의합니다. 행 또는 열로 설정할 수 있으며, 빈 공간을 채우는 속성인 dense 옵션도 있습니다.

.container{
    grid-auto-columns: 100px; /* 열의 너비를 100px로 지정합니다. */
    grid-auto-rows: 50px; /* 행의 높이를 50px로 지정합니다. */
}

• start

• center

• end

• space-around

• space-between

• space-evenly

• stretch

• start

• center

• end

• space-around

• space-between

• space-evenly

• stretch

• start

• center

• end

• stretch

• start

• center

• end

• stretch

• place-content: justify-content와 align-content 값을 한 번에 지정할 수 있습니다. align-content, justify-content의 순서로 작성합니다.

• place-items: align-items와 justify-items 값을 한 번에 지정할 수 있습니다. align-items, justify-items의 순서로 작성합니다.

.container1 { 	
    place-content: space-between center; /* <align-content> <justify-content> */
}
.container2 { 	
    place-items: center start; /* <align-items> <justify-items> */
}

4.2.3 Grid -item

• grid-column-start: 열의 시작 번호를 정의하여 그리드 아이템이 몇 번째 열에서 시작할지 지정합니다.

• grid-column-end: 열의 끝 번호를 정의하여 그리드 아이템이 몇 번째 열에서 끝날지 지정합니다.

• grid-column: grid-column-start, grid-column-end를 한 번에 설정하는 단축 속성입니다

• grid-row-start: 행의 시작 번호를 정의하여 그리드 아이템이 몇 번째 행에서 시작할지 지정합니다.

• grid-row-end: 행의 끝 번호를 정의하여 그리드 아이템이 몇 번째 행에서 끝날지 지정합니다.

• grid-row: grid-row-start, grid-row-end를 한 번에 설정하는 단축 속성입니다.

.container {
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.box1 {
    background-color: ;
    grid-row-start: 1;
    grid-row-end: 2; 
    grid-column-start: 1;
    grid-column-end: 4;
}
.box2 {
    background-color: ;
    grid-row: 2/3;
    grid-column: 1/2;
}
.box3{
    background-color: ;
    grid-row: 2/3;
    grid-column: 3/4;
}
.box4 {
    background-color: ;
    grid-row: 3/4;
    grid-column: 1/span 3;
}

.container {
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "box1 box1 box1"
      "box2 . box3"
      "box4 box4 box4"
}
.box1 {
    background-color: ;
    grid-area: box1;
}
.box2 {
    background-color: ;
    grid-area: box2;
}
.box3{
    background-color: ;
    grid-area: box3;
}
.box4 {
    background-color: ;
    grid-area: box4;
}

• start

• center

• end

• stretch

• start

• center

• end

• stretch

.item { 	
    place-self: start center; 
}

.box1 {
    order: 3;
}
.box2 {
    order: 1;
}
.box3 {
    order: 2;
}

.box1 { 
    grid-area: 1 / 1 / 2 / 3; 
} 
.box2 {
    grid-area: 1 / 2 / 3 / 3; 
    z-index: 1; 
} 
.box3 { 
    grid-area: 2 / 2 / 3 / 4; 
}

.container{
    grid: auto-flow / 1fr 1fr 1fr;

    grid: auto-flow dense / 40px 40px 1fr;
}

4.3 이미지

4.3.1 이미지 포맷 선택

• 용도: 이미지가 어떤 용도로 사용되는지 고려합니다. 사진, 로고, 아이콘 등 다양한 용도에 맞는 포맷을 선택합니다.

• 화질 요구: 화질이 중요한 경우에는 손실 압축이 적용된 JPEG나 PNG를 사용하고, 더 높은 화질이 필요한 경우에는 AVIF와 같은 고화질 포맷을 고려합니다.

• 파일 크기: 대역폭 제한이나 페이지 로딩 시간을 고려하여 파일 크기를 최적화합니다.

• 투명도 및 애니메이션: 투명한 배경이나 애니메이션을 지원해야 하는 경우에는 PNG 또는 WebP와 같은 포맷을 고려합니다.

• 브라우저 호환성: 대상 브라우저에서 지원하는 이미지 포맷을 고려하여 선택합니다.

JPEG (Joint Photographic Experts Group)

• 장점: 손실 압축을 사용하므로 파일 크기를 줄이고 화질을 유지할 수 있습니다.

• 단점: 투명한 배경을 지원하지 않으며, 비손실 압축은 제공하지 않습니다.

• 용도: 사진 및 복잡한 이미지에 적합합니다.

PNG (Portable Network Graphics)

• 장점: 비손실 압축을 사용하여 높은 화질 유지하고 투명한 영역 및 알파 채널 지원합니다.

• 단점: JPEG에 비해 파일 크기가 큰 경우가 있습니다.

• 용도: 일반 이미지 및 그래픽에 적합하고 투명한 배경을 지원합니다.

GIF (Graphics Interchange Format)

• 장점: 애니메이션 및 반복 이미지를 지원합니다.

• 단점: 색상 제한이 있고, 비손실 압축을 제공하지 않습니다.

• 용도: 간단한 애니메이션 및 간단한 그래픽에 적합합니다.

SVG (Scalable Vector Graphics)

• 장점: 크기가 조절 가능하며, 해상도에 영향을 받지 않습니다. 텍스트 기반 형식이므로 파일 크기가 작습니다.

• 단점: 복잡한 비트맵 이미지에는 적합하지 않습니다.

• 용도: 벡터 그래픽 및 아이콘에 적합합니다.

WebP

• 장점: 작은 파일 크기와 높은 화질 제공하고 투명한 배경 및 애니메이션 지원 가능합니다.

• 단점: 모든 브라우저에서 지원하지는 않을 수 있습니다.

• 용도: Google에서 개발한 형식으로, JPEG 및 PNG 대체용으로 사용 가능합니다.

AVIF (AV1 Image File Format)

• 장점: 최신 비손실 압축 형식으로, 작은 파일 크기와 높은 화질을 제공합니다.

• 단점: 모든 브라우저에서 지원하지는 않을 수 있습니다.

• 용도: 고화질 이미지에 적합한 최신 형식입니다.

4.3.2 반응형 이미지 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
    <img src="image.jpg" alt="반응형 이미지">
</body>

• src: <img> 태그에서 이미지의 URL을 지정하는 속성입니다.

• alt: 대체 텍스트를 제공하는 속성으로, 이미지가 로드되지 않거나 스크린 리더가 페이지를 읽어줄 때 사용됩니다.

img {
    max-width: 100%; /* 이미지 최대 너비 설정 */
    height: auto;
}

• max-width: 요소의 최대 너비를 설정하여 속성의 크기가 지정 값보다 커지는 것을 방지합니다.

• height: 이미지의 높이를 지정합니다. 값을 auto로 줄 경우 세로는 이미지의 비율에 맞게 자동으로 조절됩니다.

/* 기본 이미지 스타일 */
img {
    width: 100%;
    height: auto;
}

/* 미디어 쿼리를 사용하여 화면 크기에 따라 이미지 크기 조절 */
@media (max-width: 768px) {
    .image-container img {
        width: 50%; /* 화면 너비가 768px 이하일 때 이미지 크기를 50%로 줄임 */
    }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
    <img srcset="image-small.jpg 300w,
                 image-medium.jpg 600w,
                 image-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            25vw"
     src="image-medium.jpg" alt="반응형 이미지">
</body>

• image-small.jpg 300w: 뷰포트 너비가 300px 이하일 때 image-small.jpg 사용

• image-medium.jpg 600w: 뷰포트 너비가 600px 이하일 때 image-medium.jpg 사용

• image-large.jpg 1200w: 뷰포트 너비가 1200px 이하일 때 image-large.jpg 사용

• (max-width: 600px) 100vw: 화면 너비가 600px 이하일 때 이미지 크기를 100%로 설정

• (max-width: 1200px) 50vw: 화면 너비가 1200px 이하일 때 이미지 크기를 50%로 설정

• 25vw: 그 외에는 25%로 설정

• srcset: 여러 해상도의 이미지 버전을 나열합니다.

• sizes: 각 미디어 조건에 따라 이미지가 화면을 얼마나 차지할지 나열합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
  <picture>
    <source srcset="image-small.jpg" media="(max-width: 600px)">
    <source srcset="image-medium.jpg" media="(max-width: 1200px)">
    <img src="image-default.jpg" alt="반응형 이미지">
</picture>
</body>

• srcset: 이미지의 경로

• media: 이미지 선택을 위한 미디어 쿼리(조건) 지정

• type: 이미지 파일의 유형

<source srcset="image.jpg" type="image/jpeg">

• max-width: 600px: 화면 너비가 600px 이하일 때 image-small.jpg 사용

• max-width: 1200px: 화면 너비가 1200px 이하일 때 image-medium.jpg 사용

• 화면 너비가 1200px 초과일 때 image-default.jpg 사용 (기본 이미지 적용)

4.4 미디어

4.4.1 미디어 포맷 선택

MP4 (H.264 codec)

• 장점: MP4는 효율적인 압축률과 높은 호환성을 가진 동영상 포맷입니다. 대부분의 웹 브라우저와 디바이스에서 지원되며, 고품질의 비디오를 제공합니다.

• 단점: 특허권 문제로 인해 일부 오픈 소스 프로젝트에서 사용이 제한될 수 있습니다.

• 용도: 웹 스트리밍 서비스(YouTube 등), 멀티미디어 콘텐츠 배포 등 다양한 웹 기반 비디오 콘텐츠에 널리 사용됩니다.

WebM (VP8/VP9 codec)

• 장점: WebM은 Google이 개발한 오픈 소스 동영상 포맷으로서 라이센스 문제가 없으며, 고효율의 압축률을 가지고 있습니다.

• 단점: 아직 모든 브라우저에서 완벽하게 지원되지 않아 호환성 문제를 겪을 수 있습니다.

• 용도: 웹 기반 비디오 스트리밍 서비스에 주로 사용되며 HTML5기반의 게임 및 앱에서도 많이 활용됩니다.

Ogg (Theora codec)

• 장점: Ogg Theora는 오픈 소스 동영상 포맷으로서 라이센스 문제가 없습니다.

• 단점: 압축률과 비디오 품질 면에서 MP4나 WebM보다 상대적으로 낮으며 일부 브라우저(옛 버전의 Internet Explorer 등)에서 지원하지 않아 호환성 문제를 겪을 수 있습니다.

• 용도: 인터넷 방송, 게임 사운드 클립 등 다양한 멀티미디어 콘텐츠에 사용됩니다.

4.4.2 미디어 태그

<video controls src="video.mp4" width="320" height="240">
</video>

• controls: 비디오 컨트롤(재생, 일시정지, 볼륨 등)을 표시

• width, height: 영상의 너비, 높이를 지정

• autoplay: 웹 페이지가 로드될 때 비디오가 자동 재생되도록 지정

• loop: 비디오 반복 재생

• muted: 비디오의 사운드를 음소거로 시작

• poster: 비디오 썸네일의 이미지 경로 지정

• src: 비디오 파일의 경로를 지정

• type: 비디오 타입을 설정

<video controls width="320" height="240">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogg" type="video/webm">
</video>

<div class="responsive-video">
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
    </video>
</div>

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 종횡비 */
    height: 0;
}

.responsive-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

• padding-bottom: 56.25%: 16:9의 종횡비를 나타내며, 이를 통해 비디오는 항상 16:9의 비율을 유지

• height: 0: 컨테이너의 높이를 0으로 설정하여 실제 높이는 ‘padding-bottom’에서만 조절 가능

• width: 100%, height: 100%: 비디오의 크기를 컨테이너 크기에 맞게 조절

<iframe 
    src="https://www.example.com" 
    width="500" 
    height="300" 
    sandbox="allow-same-origin allow-popups allow-scripts" 
    allowfullscreen 
    loading="lazy">
</iframe>

• width, height: iframe의 크기 지정

• src: iframe의 경로 지정

• sandbox: iframe에 대한 보안 및 기능 제한을 설정
다양한 값을 사용하여 특정 기능을 활성화하거나 비활성화함
• allow-forms: 폼 제출을 허용
• allow-popups: 팝업 창을 허용
• allow-same-origin: 동일한 출처 정책을 허용
• allow-scripts: 스크립트 실행을 허용
• allow-top-navigation: 상위 탐색을 허용

• seamless: iframe 내용이 상위 문서와 완벽하게 통합되도록 함

• srcdoc: iframe의 내용을 직접 명시 (iframe 내부에 표시될 HTML 문자열)

• allowfullscreen: iframe 내에서 전체 화면 모드를 허용

• loading: iframe의 로딩 전략을 지정

• 보안이 문제가 된 사례
• XSS 공격 (크로스 사이트 스크립팅)으로 해커들이 iframe을 이용하여 웹 페이지에 악의적인 코드를 넣어 다른 웹사이트를 가장한 후 사용자의 정보를 훔치거나 다른 해킹 시도를 시도한 적이 있습니다.
• 클릭재킹 공격으로 iframe을 사용하여 사용자가 의도하지 않은 클릭을 유도하고 악의적인 동작을 유도하는 사례도 있었습니다.

• 웹 접근성이 문제가 된 사례
• iframe을 사용한 웹사이트는 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 접근하기 어려운 경우가 있어서, 웹 접근성을 준수하기 어려웠습니다.

• 검색 엔진 최적화(SEO)가 문제 된 사례
• iframe 안의 콘텐츠는 검색 엔진에서 색인화되지 않거나 적절하게 표시되지 않을 수 있어서, 웹페이지의 SEO에 부정적인 영향을 미친 경우가 있습니다.

• 모바일 호환성이 문제 된 사례
• iframe은 모바일 기기에서 화면 크기에 맞게 자동으로 조절되지 않아서, 모바일 환경에서 사용자 경험을 저해하는 문제가 있었습니다.

<!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">
    /* youTube API를 사용하기 위해 해당 script를 import */
    <script src="https://www.youtube.com/iframe_api"></script>

    <title>YouTubeAPI</title>
</head>

<body>
    <div id="player"></div>
</body>

</html>

<script>
    // IFrame Player API를 비동기로 로드합니다.
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    /*
    여기까지 IFrame Player API를 비동기 로드 한다는 의미로 해당 코드를 사용하지 않는다면 
    html코드에서 script를 이용해서 import 해야 합니다.
    */

    let player; // YouTube 동영상 플레이어 객체

    // API 로드 후 호출될 함수
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '720', // 동영상 플레이어의 높이
            width: '1280', // 동영상 플레이어의 너비
            videoId: 'M7lc1UVf-VE', // 재생할 동영상의 고유 ID
            playerVars: {
                autoplay: 1, // 자동 재생 여부
                controls: 1, // 동영상 컨트롤러 표시 여부
                modestbranding: 1, // YouTube 로고 표시 여부
                showinfo: 0, // 동영상 정보 표시 여부
                loop: 1 // 반복 재생 여부
            },
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 동영상 플레이어가 준비되면 호출되는 함수
    function onPlayerReady(event) {
        // 동영상 플레이어 크기를 자동으로 조정
        const aspectRatio = 16 / 9; // 원하는 가로:세로 비율
        const playerElement = document.getElementById('player');
        const containerWidth = playerElement.offsetWidth;
        const newHeight = containerWidth / aspectRatio;

        // 플레이어 크기 조정
        player.setSize(containerWidth, newHeight);
    }
</script>

4.4.3 오디오 포맷 선택

MP3

• 장점: 대부분의 브라우저와 디바이스에서 지원됩니다.

• 단점: 소리의 품질이 압축률에 따라 변화하며, 높은 압축률을 사용하면 소리 품질이 저하될 수 있습니다.

• 용도: 음악 스트리밍 서비스, 음악 다운로드, 팟캐스트 등 웹 기반 오디오 콘텐츠에 널리 사용됩니다.

WAV

• 장점: 무손실 압축을 사용하여 높은 오디오 품질을 제공합니다.

• 단점: 파일의 크기가 많이 크기 때문에 웹 배포에는 부적절하며, 스트리밍에는 적합하지 않습니다.

• 용도: 음악 제작 및 편집, 고품질 사운드를 요구하는 전문 오디오 작업 영역에서 사용됩니다.

OGG

• 장점: 오픈 소스이기 때문에 라이센스 비용의 문제가 없습니다.

• 단점: 파일의 크기가 많이 크기 때문에 웹 배포에는 부적절하며, 스트리밍에는 적합하지 않습니다.

• 용도: 게임 사운드 클립, 인터넷 방송 등 멀티미디어 콘텐츠에 사용됩니다.

4.4.4 오디오 태그

<audio controls preload="metadata" volume="0.8">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.wav" type="audio/wav">
</audio>

• controls: 오디오 컨트롤(재생, 일시정지, 볼륨 조절 등)을 표시

• autoplay: 웹 페이지가 로드될 때 오디오가 자동 재생되도록 지정

• loop: 오디오 반복 재생

• muted: 오디오의 사운드를 음소거로 시작

• volume: 오디오의 초기 볼륨 지정 (0.0 음소거 ~ 1.0 최대 볼륨)

• preload: 오디오 파일을 사전에 로드할지 여부를 지정
• none(로드하지 않음), meta(메타 데이터만 로드), auto(전체 오디오 파일 로드)

• type: 오디오 타입 설정