# iframe

58개의 포스트

유튜브 매개변수 - 영상 자동 재생, 연속재생, 컨트롤러 숨김 등

iframe의 src 링크 뒤에 ?amp;autoplay=1삽입(정지=0, 재생=1 이며 기본값은 0)스마트폰, 태플릿 등 모바일 기기에서는 영상재생 시 데이터가 소모되기 때문에 기기 설정에 따라 자동영상 재생에 제한이 있다고함.iframe의 src 링크 뒤에 ?amp

2023년 11월 17일
·
0개의 댓글
·

반응형 iframe

이렇게 css를 주면 창 크기에 맞게 반응한다.하지만 iframe은 아니다.

2023년 11월 14일
·
0개의 댓글
·
post-thumbnail

반응형 iframe

이렇게 css를 주면 창 크기에 맞게 반응한다.하지만 iframe은 아니다.

2023년 11월 14일
·
0개의 댓글
·

iframe 로드 시 상위 jsp에 function연결하기

iframe 사용시 ajax로 파일 전송하기 및iframe이 로드되는 상위 jsp의 function 사용하도록 하기

2023년 11월 7일
·
4개의 댓글
·
post-thumbnail

iframe test

iframe : 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.gcp에 서버를 생성하고 nginx 를 활용하여 https ssl 인증서를 다운받았고고정 ip로

2023년 10월 26일
·
0개의 댓글
·
post-thumbnail

[postMessage, message 이벤트] iframe과 소통하기

브라우저에서는 iframe과 부모가 도메인이 다르다면 서로의 컨텐츠를 직접 조작할 수 없도록 막아 놨기 때문에 메세지를 통해 iframe과 부모 같의 정보를 교환할 수 있습니다.

2023년 10월 23일
·
0개의 댓글
·
post-thumbnail

split 메소드를 이용해 YouTube 링크를 Embed 형식으로 변환하기 (iframe) (문제 해결)

개요 > 페이지에서 props로 받은 각각의 데이터에 해당하는 유튜브를 iframe 태그를 이용해 삽입해야하는 상황이다. 하지만 어째서인지, 해당 페이지에서 오류 메세지가 나오는 것을 발견했다. 코드를 살펴보자. 문제상황 부모 컴포넌트에서 youtubeData를

2023년 10월 2일
·
0개의 댓글
·
post-thumbnail

iframe 을 사용해서 게시판 뷰어 만들기

최근 구버전의 사내서비스를 마이그레이션(거의 리빌딩..) 하는 업무를 진행하면서 컴포넌트들을 하나씩 옮기고 있습니다. 그 과정에서 게시판 기능을 하는 공지사항 페이지를 옮기던 중에 겪은 문제와 해결 방안을 기록해보려고 합니다.마이그레이션을 하기 전에 유관부서 미팅을 진

2023년 7월 29일
·
0개의 댓글
·

[iframe] 으로 창을 열고 특정 동작 후 parent tap이 있는 경우에만 close하기

window.opener 라는 객체가 존재한다.window.open()으로 열린 브라우저 창에서는 window.close() 메서드에 의해 창을 close 할 수 있다.필요없는 코드 일 수 있으나 추후 가독성을 위해서 코드를 작성하기로 했다.이제 누가봐도 window.

2023년 6월 5일
·
0개의 댓글
·

HTML #6 - Area Tag

📍 Area Tag > 영역 태그에는 div와 span이 있다.

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

2023-04-20 목요일

어제 시도했을 때는 실패했다. 자기 전에 문제 무엇이고 문제와 관련된 것들은 무엇이 있고 어떻게 풀어나가면 좋을지 글로 적어놨는데 이게 큰 도움이 됐다. 오늘 다시 시도하면서 글로 써놨던 것을 보면서 따라가니까 길을 잃지 않을 수 있었다.여튼 어떻게 했느냐. 무엇이 문

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

2023-04-19 수요일

window.postMessage 메서드는 브라우저의 동일 출처 정책을 지키면서도 서로 다른 origin끼리 안전하게 통신할 수 있게 해준다.부모 컴포넌트와 iframe이 있는 자식 컴포넌트 간에 데이터를 주고 받아야 하는 문제가 있어서 공부하게 됐다.MDN windo

2023년 4월 19일
·
0개의 댓글
·

험난했던 하루

내일배움단 미니프로젝트 cheese_projectyoutube 음악을 자동재생 하는 것은 chrome 문제로 불가능하다..는 것을 알았다..음소거로 하면 자동재생이 가능하다는 이상한 점도 알게 됌..유튭 음악을 재생하는 박스를 만드는 것은 정말 쉬웠는데 이걸 버튼과 연

2023년 3월 16일
·
0개의 댓글
·

iframe

콘솔탭 전환 iframe https://github.com/storybookjs/storybook/issues/11348

2023년 3월 8일
·
0개의 댓글
·

[Nuxt3] API Key 없이 iframe으로 구글 지도 넣기

frameborder: 테두리 없애기!!!!!scrolling: no로 설정하여 쓸데없는 스크롤 없애기margin: 말 그대로 여백의 미src: 구글 지도에 좌표 찍으면 나오는데 대충 위도 경도 기타 등등이 들어있어요.구글 행님이 도움을 주면 다 가능하다아아구글 지도에

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

2023.03.03 background,iframe,position,video 태그

오늘 배운 주제는 크게 두가지 이다. background,그리고 position사실 둘 다 너무 많이 쓰기 때문에 짧고 굵게 공부했다고 할 수 있다.background-color와 같은 색을 넣는 법은 이미 배웠으니 이미지를 넣는 방법을 알아보자백그라운드 이미지는 ur

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

결제창에서 CORS 대응하기

콘솔창에서 이런 에러 만나본 적 있으시죠? 이번 아티클에서는 CORS를 알아보고 토스페이먼츠 결제창에서 CORS 에러를 만났을 때 해결하는 방법도 알아봅니다.

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

Frame + IFrame 태그

iframe 태그는 inline-frame 태그의 줄임말로 다양한 형태의 plugin을 보여주기 위해 여러 사이트에서 사용되고 있다.

2023년 1월 23일
·
0개의 댓글
·
post-thumbnail

HTML - Iframe, Font

URL이 바뀌지 않으면서 페이지 전환이 되는 기능.Header, side, footer는 바뀌지 않고 body만 변한다.새로고침하면 메인 페이지로 이동한다.body 부분에 iframe 태그를 넣어주고 name을 bodyFrame이라고 설정변하지 않는 head 부분에 로

2023년 1월 20일
·
0개의 댓글
·