# iframe

31개의 포스트
post-thumbnail

웹 프로그래밍 2일차

영상,프레임 창을 크게 키우고 줄여도 비율을 계속 차지하도록 설정했다. 큰화면일 경우 작은 화면일 경우 깃허브 내 홈페이지 꾸미기 현재 투데이, 블로그,velog 연동, stack을 표시했다.

2일 전
·
0개의 댓글
post-thumbnail

web 기초/html(tag, video, audio, iframe)

대 단락을 나눌 때 사용

2일 전
·
0개의 댓글

002. 웹 (프론트엔드)개발의 기초(1)

span : 특별한 역할을 하지 않는 영역, display 속성이 inline tag test video : mp4 형태의 비디오를 출력 audio : (

2일 전
·
0개의 댓글
post-thumbnail

유튜브 영상으로 꽉 찬 div 박스 만들기

가져온 유튜브 영상을 컨테이너에 담았을 때, 유튜브 영상이 컨테이너에 꽉 차도록 만들기2가지 방법컨테이너의 width, height를 둘 다 지정하는 방법컨테이너의 height=0으로 놓고, padding을 이용하는 방법유튜브에서 영상의 iframe 코드 전체를 얻을

2022년 5월 20일
·
0개의 댓글
post-thumbnail

[React] 프로젝트에 동영상을 넣고싶어요

첫 입사를 하게 되었던 회사에서는 영상을 다루는 방법을 많이 배운 것 같다. 영상에 관련된 서비스를 하다 보니, 웹페이지를 구성하는데에 있어서 영상이 차지하는 비율이 꽤 컸다. 내가 담당했던 페이지에서 동영상을 다루며 알게 되었던 내용을 기억하기 위해 정리해보는 포스팅

2022년 4월 28일
·
0개의 댓글
post-thumbnail

리액트 iframe 뒤로가기 버그

메인페이지에 있는 영상리스트 중 하나를 클릭하면 해당 페이지로이동하게끔 구현했다. 해당 영상페이지에는 관련영상 리스트를 가지고 있어서 클릭시 해당 파람스를 가지고 해당 페이지로 이동을 하게 된다. 메인에서 영상 하나를 클릭했을때, 뒤로가기를 누르면 메인페이지로 이동을

2022년 4월 27일
·
0개의 댓글
post-thumbnail

React iframe 강제 주입

개인 포트폴리오 페이지를 작업하면서 문제가 발생했다.React로 작업을 진행하고 있었는데..코드를 저장하면 페이지를 새로고침하기 전까지는 클릭이 아무것도 되지 않는 이상한 현상이 발생하기 시작한다..문제의 화면결론부터 말하자면 "react-scriptscreate-re

2022년 4월 4일
·
0개의 댓글
post-thumbnail

004

`` 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용 iframe은 width 혹은 height 속성으로 크기를 조절 따로 값을 설정하지 않는다면 height는 150px, width는 300px이 기본값 src속성으로 링크설정 가능하며

2022년 3월 31일
·
0개의 댓글

[html] vimeo 영상 넣기 with iframe

iframe 및 vimeo 옵션

2022년 3월 12일
·
0개의 댓글
post-thumbnail

<iframe>

HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용되며, 동영상이나 뮤직비디오도 넣을 수 있다.장점쉽게 컨텐츠를 추가할 수 있고, 페이지 이동 없이 바로 보여줄 수 있다.단점유지보수를 힘들게 하고, HTML코드량이 많아져 메모리 과부화가 일어난다.sr

2022년 3월 11일
·
0개의 댓글
post-thumbnail

[HTML] <iframe>

iframe은 inline frame의 약자로 말 그대로 인라인 요소 프레임을 말합니다. 인라인 요소 프레임이라는 것은 다른 HTML페이지를 현재 페이지에 인라인 요소의 형태로 넣는 것을 말합니다. 즉, 한 웹 문서에서 다른 웹 문서를 볼 수 있다는 것 입니다.인라인

2022년 2월 10일
·
0개의 댓글

iframe 높이 자동 조절하기

기존 iframe태그로 video를 삽입하면 높이값이 고정되어 있어서 화면 크기에 따라 반응형으로 조절하려면 iframe를 감싸고 있는 부모 태그 padding값으로 조정하면 된다 html css

2022년 1월 14일
·
0개의 댓글
post-thumbnail

[react] iframe으로 자식창에 메세지 넘기기

📌 기업협업을 하면서 CTO님께서 iframe을 통해 독립된 url로 게임창을 띄우고 싶다고 하셨다. 메세지로 부모와 자식장에 메세지 보내는 것을 먼저 테스트 해보라고 하셔서 그 때 처음 쓰게 되었다.현재 페이지에 다른 html 파일을 포함시키는 중첩된 브라우저로if

2021년 12월 15일
·
0개의 댓글

2일차

기술 스택 컴퓨터2대 필요: 데이터요청-결과값전달(클라이언트-서버) = 프론트엔드-백엔드 프론트엔드: 웹/앱(네이티브) 백엔드: 서버/Database(안정성을위해 2개로 나눠 관리) 프론트엔드 웹 언어: HTML, CSS, JAVASCRIPT 라이브러리/프레임워크: React.js, Vue.js, Angular.js 라이브러리란? 여러줄 필요한 기능을...

2021년 11월 30일
·
0개의 댓글
post-thumbnail

iframe 요소를 반응형으로 만들기

html5에서 추가된 &lt;video> 태그는 영상 요소를 자유롭게 삽입할 수 있도록 한다. 그러나 youtube나 vimeo와 같은 외부 영상 서비스를 삽입할 때는 &lt;video> 태그를 사용하지 못하고 해당 사이트에서 제공하는 소스를 사용하는 경우가 많다. 이

2021년 11월 21일
·
0개의 댓글
post-thumbnail

웹문서에 멀티미디어 삽입하기

object 태그는 오디오, 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다.embed 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있습니다. HTML 초기 버전부터 사용해서 호환성이 매우 높습니다. 따라서 audio, vi

2021년 11월 10일
·
0개의 댓글
post-thumbnail

Html-a,img,iframe

오늘은 기본적인 구조와 HTML의 필수 태그들에 대한 수업을 진행했다.기존에 알고 있던 것들을 베이스로 해서 새롭게 알게된 정보들을 우선 정리하고, 과제를 진행하면서 새롭게 알게된 것을 정리하려고 한다.정말 알면 알수록 세밀한 HTML이다! a태그(anchor tag

2021년 11월 1일
·
0개의 댓글
post-thumbnail

iframe

TinyMCE React integration 에서 TinyMCE는 iframe으로 제공되는 것을 확인했다.그래서 이번에 iframe이 어떤 장단점이 있는지 왜 사용하는지에 대해 알아보자.inline frame, 웹 브라우저 내 또 다른 프레임현재 브라우저에 렌더링되고

2021년 10월 16일
·
0개의 댓글
post-thumbnail

iframe 에서 도메인이 다른 경우 부모, 자식창 제어

Iframe을 사용할 때 부모와 자식간 도메인이 서로 다른 경우 부모창-자식창 통신은 window 객체를 이용하여 할 수 있다.1\. 자식창에서 부모창으로 데이터를 보낼 때자식창(데이터 송신 코드):부모창(데이터 수신 코드):2\. 부모창에서 자식창으로 데이터를 보낼

2021년 10월 3일
·
1개의 댓글
post-thumbnail

Chromium cross-origin iframe의 alert, prompt, confrim 제거 논란

최근 (2021년 7~8월경) 크로미움에 논란이 될 법한 변경점이 있었다. 바로 cross-origin iframe에서 발생하는 alert, prompt, confirm을 제거하는 이슈가 반영되었다는 점이다. Iframe을 활용하는 많은 사이트가 망가질 것으로 예측되는

2021년 8월 17일
·
0개의 댓글