iFrame을 중앙에 맞추는 방법

게시 됨: 2022-04-20

웹 페이지에 iFrame을 추가한 적이 있다면 콘텐츠가 원하는 대로 표시되지 않는다는 사실이 얼마나 답답한지 알 것입니다. HTML에 익숙한 사람들은 이러한 어려움과 처음부터 iFrame을 포함하려는 욕구를 이해할 것입니다.

iFrame에 익숙하지 않은 경우 iFrame 은 한 웹페이지의 콘텐츠를 다른 웹페이지로 표시하는 HTML 요소입니다 . 웹사이트를 방문하는 동안 알지 못하더라도 iFrame을 본 적이 있을 것입니다. 많은 iFrame은 광고주 웹사이트의 정보를 표시하는 광고입니다. 다른 사람들은 비디오, 게시물, 심지어 지도까지 통합합니다. 항상 HTML을 편집하든 코딩 여정을 막 시작하든 이 기사는 iFrame을 중앙에 배치하기 위해 알아야 할 모든 것을 알려줍니다.

먼저 iFrame이 무엇이고 왜 iFrame을 중앙에 배치하고 싶은지 자세히 설명하겠습니다. 그런 다음 HTML과 HTML에서 iFrame을 사용하는 방법에 대한 몇 가지 기본 사항을 다룹니다. 마지막으로 align 속성을 사용하여 웹 페이지에서 iFrame을 중앙에 배치하는 단계를 안내합니다.

아이프레임 HTML

아이프레임이란?

iFrame은 인라인 프레임의 약어입니다. 인라인 프레임은 다른 HTML 요소 와 Facebook 또는 YouTube와 같은 다른 웹사이트의 코드를 표시할 수 있는 HTML 요소입니다. 간단히 말해서 iFrame은 다른 웹 페이지의 콘텐츠를 볼 수 있는 웹 페이지 내의 창입니다. iFrame은 웹 페이지에 무언가를 빠르고 쉽게 통합할 수 있는 좋은 방법입니다. 약간의 HTML 지식이 필요하지만 웹 페이지를 향상시키는 매우 간단한 방법이 될 수 있습니다. 기업은 특히 웹사이트 내에서 iFrame을 사용하여 이점을 얻을 수 있습니다. 링크나 정적 이미지 대신 iFrame을 사용하면 비즈니스 웹사이트를 보다 전문적으로 보이게 할 수 있습니다. 다른 비즈니스의 광고를 표시하는 데 사용되는 경우에도 수익원이 될 수 있습니다.

iFrame을 사용하여 광고 , YouTube 동영상, 소셜 미디어 게시물, 심지어 온라인 지도까지 웹페이지에 통합할 수 있습니다. iFrame을 사용하면 이 콘텐츠가 웹 페이지에 직접 포함되므로 지속적으로 정보를 업데이트할 필요가 없습니다. 대신 소스 자료와 함께 자동으로 업데이트됩니다. 예를 들어 iFrame을 사용하여 소셜 미디어 게시물을 포함하면 독자가 게시물에 직접 액세스할 수 있습니다. 게시물이 삭제, 편집되거나 새로운 상호 작용이 발생하면 iFrame에 이를 반영합니다. 스크린샷은 일부 정보를 표시할 수 있지만 iFrame만큼 동적이지는 않습니다. 스크린샷에는 콘텐츠 자체에 대한 링크도 포함되지 않습니다. 종종 iFrame을 클릭하면 해당 소스로 바로 이동합니다. 그러나 iFrame의 몇 가지 단점 중 하나는 iFrame이 삭제될 경우 콘텐츠에 액세스하지 못할 수 있다는 사실입니다.

내 웹 페이지에서 iFrame을 사용하고 싶은 이유는 무엇입니까?

iFrame은 사용자가 콘텐츠에 직접 액세스할 수 있도록 하여 웹 페이지의 전체적인 모양을 향상시킵니다. 예를 들어 iFrame을 사용하여 포함된 YouTube 비디오는 웹 페이지에서 직접 재생됩니다. 웹 페이지가 링크를 따라가거나 비디오를 검색할 때까지 기다릴 필요가 없습니다. 이렇게 하면 독자는 페이지를 떠나지 않고도 비디오를 볼 수 있습니다. 이렇게 하면 비디오를 페이지 내의 페이지로 포함하여 로드 시간을 줄일 수도 있습니다. 페이지를 로드하는 데 걸리는 시간 은 웹사이트의 트래픽 양에 심각한 영향을 미칠 수 있습니다 .

Google 지도와 같은 항목을 포함하면 길을 찾지 않고도 쉽게 길을 찾을 수 있습니다. iFrame은 다른 웹 페이지에 직접 액세스하기 때문에 지침은 항상 최신 상태입니다. 이것은 관광 명소에 대한 기사와 같이 특정 위치에 초점을 맞춘 모든 웹 페이지에 유용한 추가 기능이 될 수 있습니다. 마찬가지로 기업은 웹사이트 의 Google 지도에 주소의 핀 을 포함할 수 있습니다. Google 지도의 iFrame을 사용하면 방문자가 iFrame을 클릭하여 길찾기를 빠르게 가져올 수 있습니다.

iframe을 중앙에 배치

iFrame 중앙에 맞추기

iFrame은 웹 페이지의 기능과 모양을 향상시키기 위한 것이므로 올바르게 통합하는 것이 매우 중요합니다. YouTube 동영상이나 소셜 미디어 게시물이 웹 페이지 중앙에 있지 않으면 이상하게 보일 수 있습니다. 기업은 특히 웹사이트의 외관을 고려해야 합니다. 콘텐츠는 웹사이트를 크게 개선할 수 있으므로 올바르게 표시되는지 확인해야 합니다. 그렇지 않으면 웹 사이트가 매우 전문적이거나 잘 만들어지지 않을 수 있습니다. 운 좋게도 iFrame을 중앙에 맞추는 것은 간단합니다. 표면 수준의 HTML 지식만 있으면 됩니다.

아이프레임 HTML

HTML 또는 Hypertext Markup Language 는 웹 브라우저에 웹 사이트의 특정 페이지를 표시하는 방법을 알려주는 정보입니다. 코드 섹션을 추가하거나 삭제하여 편집 및 변경할 수 있는 긴 코드 문자열로 구성됩니다. 이러한 변경 사항은 웹 페이지가 표시되는 방식과 기능에 영향을 줍니다.

HTML은 태그, 요소 및 속성으로 구성됩니다. 태그는 요소 주위의 시작 및 종료 코드입니다. 요소가 시작되고 끝나는 위치를 웹 브라우저에 알려줍니다. 이를 통해 요소가 다른 코드 사이에서 손실되지 않고 적절하고 완전하게 표현될 수 있습니다. 요소는 웹 페이지에서 표현될 구조입니다. 예를 들어 iFrame은 HTML 요소입니다. 두 태그 사이에 배치하면 HTML 코드의 iFrame 요소가 웹사이트에 iFrame을 표시합니다. 마지막으로 속성은 요소가 표시되는 방식에 영향을 줍니다. 이는 크기, 위치에 영향을 미치거나 이미지에 추가된 텍스트를 포함할 수도 있습니다.

웹 사이트의 HTML 코드를 편집하면 모양과 기능이 변경됩니다. HTML 편집에는 메모장 또는 KompoZer와 같은 HTML 편집기가 포함될 수 있습니다. 이러한 편집 프로그램에서 코드를 직접 편집하여 HTML을 변경할 수 있습니다. 이것은 특히 기술에 정통한 경우 웹사이트를 구축하거나 개발할 수 있는 좋은 방법입니다. HTML을 직접 편집하면 이미지를 포함 하고, 텍스트를 변경하고, iFrame을 통합할 수 있습니다.

iframe을 가운데에 맞추는 방법

웹사이트에서 iFrame 사용하기

iFrame을 웹사이트에 통합하는 첫 번째 단계는 표시하려는 콘텐츠를 찾는 것입니다. YouTube 동영상을 포함하려면 "공유" 버튼을 클릭하세요. 이렇게 하면 비디오를 공유할 수 있는 몇 가지 옵션이 제공됩니다. "embed" 옵션을 클릭합니다 . 이 버튼을 클릭하면 포함하려는 정확한 iFrame HTML 텍스트가 나타납니다. 이제 이 정보를 복사하여 HTML에 붙여넣기만 하면 됩니다. 마찬가지로 소셜 미디어 게시물에도 게시물을 포함할 수 있는 옵션이 있습니다.

다른 유형의 콘텐츠의 경우 HTML 내의 웹사이트 링크를 사용하는 것이 더 쉬울 수 있습니다. 이러한 유형의 iFrame을 웹사이트에 통합하려면 우선 선호하는 HTML 편집기를 여십시오. 편집기에서 iFrame을 추가할 코드를 찾습니다. "<iframe src="를 입력하여 시작합니다. 여기서 "src"는 소스를 의미하므로 다음 내용은 iFrame에 표시되는 콘텐츠의 소스로 간주됩니다. 여기에서 표시하려는 콘텐츠에 대한 링크를 복사하여 붙여넣을 수 있습니다. 링크는 링크가 있는 곳에서 끝나는 따옴표 안에 있어야 합니다.

소스를 따옴표로 묶은 후 iFrame에 원하는 높이와 너비를 포함합니다. iFrame의 높이와 너비는 일반적으로 픽셀로 측정되지만 백분율로 측정할 수도 있습니다. 마지막으로 "iFrame>"을 입력하여 이 iFrame 태그를 닫습니다. 이 작업을 올바르게 수행했다면 웹사이트에 성공적인 iFrame이 표시되어야 합니다! 이제 iFrame을 설정했으므로 페이지 중앙에 있는지 확인하십시오.

iFrame 정렬 센터

iFrame을 중앙에 배치하는 것은 웹 페이지가 어떻게 보이는지 결정하는 매우 중요한 부분입니다. iFrame을 만드는 노력을 기울이는 것은 매우 실망스러울 수 있습니다. 단지 약간 떨어져 있을 뿐입니다. 운 좋게도 iFrame을 중앙에 맞추는 것이 처음부터 만드는 것보다 훨씬 쉽습니다! iFrame을 만드는 것과 마찬가지로 HTML을 편집해야 합니다.

HTML 편집기를 열고 중앙에 배치하려는 iFrame을 찾으십시오. 해당 iFrame의 코드 내에서 "align=center"를 입력합니다. 이렇게 하면 페이지가 iFrame 중앙에 오도록 합니다. 페이지에서 높이와 너비를 편집하여 이미지를 가운데에 둘 수도 있습니다. 다시 말하지만, 픽셀이나 백분율로 측정할 수 있습니다.

중앙에 배치하지 않으려면 iFrame을 다르게 정렬할 수도 있습니다. 가운데 대신 "align=" 다음에 "left", "right", "bottom" 또는 "top"을 입력합니다. 이 텍스트에 따라 iFrame이 배치됩니다. 이를 위해 사용되는 도구를 "align 속성"이라고 합니다. align 속성을 사용하면 iFrame의 위치를 매우 간단하게 변경할 수 있습니다. iFrame을 중앙에 배치하는 것은 중요한 콘텐츠에 적합하지만 광고를 표시하는 데 사용되는 것과 같은 일부 iFrame은 웹페이지 측면에 더 적합할 수 있습니다.

iframe 정렬 센터

iFrame 중심 맞추기

iFrame은 콘텐츠를 웹사이트에 혼합하는 좋은 방법이지만 제대로 보이게 하는 것은 까다로울 수 있습니다. iFrames 코드를 열고 요소에 "align=center"를 추가하기만 하면 됩니다. 이제 웹 페이지에 콘텐츠가 표시되는 방식을 더 잘 제어할 수 있습니다. iFrames에 표시되는 콘텐츠는 웹 페이지의 전반적인 모양과 기능을 크게 개선할 수 있습니다. iFrame은 다른 웹사이트의 정보를 볼 수 있는 창 역할을 하기 때문에 웹페이지는 모든 종류의 중요한 정보를 한 곳에 모아둘 수 있습니다. 광고, 비디오 및 지도는 모두 HTML을 통해 웹페이지에 쉽게 추가할 수 있습니다.