원하는 문구 넣어보기

App.jsx 파일을 수정해 원하는 문구가 내 앱에 나타나게 해보자.

// src\App.jsx
function App() {

  return (
    <>
      <h1>웃긴 유튜브 영상 모음</h1>
    </>
  )
}

export default App

App.jsx파일에 아래 한줄 추가했다.

<h1>웃긴 유튜브 영상 모음</h1>

이제 이 아래에 유튜브 영상을 추가해 보자.

// src/App.jsx

function App() {

  return (
    <>
      <h1>웃긴 유튜브 영상 모음</h1>

      <iframe width="560" height="315" src="https://www.youtube.com/embed/5ru4shNLokA?si=3tzsQHuDBipu0-o-&start=412" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </>
  )
}

export default App

이렇게 유튜브 영상이 나타난다.

유튜브 영상 가져오는 법

유튜브를 보다가 재밌는 장면이 나오면 멈춘다.

[공유] 버튼을 누른다.

[1] 시작 시간을 체크한다.
[2] 퍼가기 버튼을 누른다.

[복사] 버튼을 누른다.

App.jsx 파일에 붙여 넣는다.

만약 웹브라우저에서 클릭했을 때 시작위치가 맞지 않으면,

저 부분이 시작위치를 초로 나타내는 부분이니, 1-2초 단위로 조정하며 맞춰준다.

몇 개 더 추가해 보자.

// src\App.jsx
function App() {

  return (
    <>
      <h1>웃긴 유튜브 영상 모음</h1>

      <iframe width="560" height="315" src="https://www.youtube.com/embed/5ru4shNLokA?si=3tzsQHuDBipu0-o-&amp;start=412" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/CVfksjKuaPQ?si=4NnG8NyNJzZf58Ot&amp;start=126" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/_6hSZhy_6DI?si=e2sM3ET_D4gCXtEK&amp;start=126" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </>
  )
}

export default App

음악 등 다른 분야의 영상도 추가해 보자.

가운데 정렬

왼쪽에 치우쳐 있으니 가운데 정렬을 하자. 가운데 정렬은 css의 도움을 받는다.

우선 이 영상을 가운데로 정렬할 영역을 잡자. 영역은 div 태그를 이용한다.

여기서는 “웃긴 유튜브 영상 모음”, “음악” 같은 제목부터 유튜브 영상까지 모두 한 번에 가운데 정렬이 되어야 하기 때문에 한 번에 div를 이용해 영역으로 잡아준다.

App.jsx 파일 수정

function App() {

  return (
    <>
      <div>
        <h1>웃긴 유튜브 영상 모음</h1>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/5ru4shNLokA?si=3tzsQHuDBipu0-o-&amp;start=412" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/CVfksjKuaPQ?si=4NnG8NyNJzZf58Ot&amp;start=126" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/_6hSZhy_6DI?si=e2sM3ET_D4gCXtEK&amp;start=126" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

        <h1>음악</h1>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Wl_GTYOid2o?si=BffPzSWFULhXAuP9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Fh8dU0SPYyg?si=rYUZaTWEGpT8yed0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/sJK2l7g5Yl8?si=pPk87U8r8Stgm3Mh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
    </>
  )
}

export default App

css 클래스 생성

이제 가운데로 보내주는 css 클래스를 만들어 이 div에 적용해 주자.

index.css 파일의 맨 밑에 다음을 추가하자.

// src\index.css

.center_div
{
  text-align: center;
}

이 클래스를 전체 영역으로 잡은 영역 div에 적용하자.

// src\App.jsx

<div className="center_div">

그러면 아래와 같이 전체 영역이 다 가운데 정렬이 된다.