[코비] SONSU 웹서비스 제작기3

✅ embed 태그 | iframe 태그 | video 태그

✔️ embed 태그는 외부 콘텐츠를 사용할 수 있도록 설정해주는데, 현재 대부분의 최신 브라우저는 플러그인 지원을 중단하고 있어서 권하지 않는다고 한다.

✔️ iframe은 설정한 크기의 공간을 만들어놓고, 그 안에 다른 사이트나 다른 페이지의 소스를 불러와서 보여주는 역할을 하기 때문에 보통 유튜브 영상을 보여줄 때 사용한다.

✅ video태그 사용예제

<video width='360' height='280' controls="controls">
    <source src="../ㄱ.mp4"type="video/mp4"/>
</video>

❗영상이 로드되지 않는 문제 발생

1. video를 import 해주기
2. require 함수 사용하기

import video from "../ㄱ.mp4"; 

<video width='360' height='280' controls="controls"> 

<source src={video} type="video/mp4"/>

 </video>

 

<video width='360' height='280' controls="controls"> 

<source src={require("../ㄱ.mp4")} type="video/mp4"/> 

</video>

✅ 웹캠 연결하기

npm install react-webcam

<Webcam/>

✅ display:flex;

div는 기본적으로 block 속성을 가지고 있기 때문에 수직으로 차곡차곡 쌓이게 되는데, display:flex; 속성을 적용하면 수직 정렬이던 내부의 flex item들이 수평으로 정렬된다.

✅ div 안 text 가운데 정렬

수평 정렬 : text-align: center;
수직 정렬 : line-height: div의 height;

https://blog.pumpkin-raccoon.com/70
https://kuzuro.blogspot.com/2018/08/blog-post_18.html
-> ‘레이아웃’ 이 어떤 식으로 구성되고, 적용되는지 알 수 있는 사이트

https://intrepidgeeks.com/tutorial/using-html-and-css-sidebar-menus
https://www.daleseo.com/react-side-navigation/
-> 사이드 바를 처음에 만들기 전 참고했던 사이트다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button
-> html 버튼 속성

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=heartflow89&logNo=221153992682
-> 목록 태그 리스트

https://velog.io/@boyfromthewell/React-%EA%B0%81%EA%B0%81%EC%9D%98-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C-%EC%83%89%EC%83%81-%EB%B3%80%EA%B2%BD-map%EC%9C%BC%EB%A1%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%95%9C-%EA%B2%BD%EC%9A%B0

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=280028&page=67

https://programacion.tistory.com/96
-> 반응형 css 작성을 위해 참고한 자료들