IFrame이 웹 사이트 디자인에서 어떻게 작동하는지 이해하기
HTML에 요소를 포함 시키면 두 가지 방법으로 CSS 스타일 을 추가 할 수 있습니다.
- IFRAME 자체를 스타일링 할 수 있습니다.
- IFRAME 내에서 특정 조건에서 페이지의 스타일을 지정할 수 있습니다.
CSS를 사용하여 IFRAME 요소 스타일 지정하기
iframe을 스타일링 할 때 가장 먼저 고려해야 할 것은 IFRAME입니다. 대부분의 브라우저에는 많은 스타일이없는 iframe이 포함되어 있지만 일관성을 유지하기 위해 스타일을 추가하는 것이 좋습니다.
다음은 항상 iframe에 포함 된 CSS 스타일입니다.
- 여백 : 0;
- 패딩 : 0;
- 국경 : 없음;
- 너비 : 값 ;
- 높이 : 값 ;
너비와 높이를 내 문서에 맞는 크기로 설정하십시오. 다음은 스타일이없는 프레임의 예와 기본적인 스타일 만있는 프레임의 예입니다. 보시다시피 이러한 스타일은 대부분 iframe 주위의 테두리를 제거하지만 모든 브라우저에서 동일한 여백, 채우기 및 크기로 iframe을 표시합니다.
HTML5 에서는 오버플로 속성을 사용하여 스크롤 막대를 제거하는 것이 좋지만 신뢰할 수는 없습니다. 따라서 스크롤 막대를 제거하거나 변경하려면 iframe에 스크롤 특성을 사용해야합니다. 스크롤 속성을 사용하려면 다른 속성과 같이 추가 한 다음 예, 아니요 또는 자동의 세 가지 값 중 하나를 선택하십시오. yes는 브라우저에 필요하지 않더라도 항상 스크롤 막대를 포함하도록 지시합니다. no는 필요한 모든 스크롤 막대를 제거할지 여부를 말합니다.
auto가 기본값이며 필요한 경우 스크롤 막대가 포함되어 있지 않을 때 스크롤 막대가 포함됩니다.
스크롤 속성을 사용하여 스크롤을 끄는 방법은 다음과 같습니다.
scrolling = "no">
이것은 iframe입니다.
HTML5에서 스크롤을 끄려면 overflow 속성을 사용해야합니다. 그러나이 예제 에서 볼 수 있듯이 모든 브라우저에서 안정적으로 작동하지는 않습니다.
오버 플로우 속성으로 항상 스크롤을 켜는 방법은 다음과 같습니다.
style = "overflow : scroll;">
이것은 iframe입니다.
오버플로 속성으로 스크롤을 완전히 끌 수있는 방법 은 없습니다 .
많은 디자이너는 iframe이 페이지의 배경과 섞여서 독자가 iframe이있는 것을 모를 수 있기를 바랍니다. 그러나 스타일을 추가하여 눈에 띄도록 만들 수도 있습니다. iframe이 더 쉽게 표시 될 수 있도록 테두리를 조정하는 것은 쉽습니다. 테두리 스타일 속성 (또는 관련 border-top, border-right, border-left 및 border-bottom 속성)을 사용하여 테두리 스타일을 지정하면됩니다.
iframe {
border-top : # c00 1px 점선;
국경 - 오른쪽 : # c00 2px 점선;
border-left : # c00 2px 점선;
border-bottom : # c00 4px 점선;
}
그러나 당신은 당신의 스타일에 대한 스크롤과 경계를 멈추지 말아야합니다. iframe에 많은 다른 CSS 스타일을 적용 할 수 있습니다. 이 예제에서는 CSS3 스타일을 사용하여 iframe에 그림자, 둥근 모서리를 제공하고 20도 회전 시켰습니다.
iframe {
margin-top : 20px;
margin-bottom : 30px;
-moz-border-radius : 12px;
-webkit-border-radius : 12px;
border-radius : 12px;
-moz-box-shadow : 4px 4px 14px # 000;
-webkit-box-shadow : 4px 4px 14px # 000;
상자 그림자 : 4px 4px 14px # 000;
-moz-transform : rotate (20deg);
-webkit-transform : rotate (20deg);
-o-transform : 회전 (20도);
-ms-transform : rotate (20deg);
필터 : progid : DXImageTransform.Microsoft.BasicImage (rotation = .2);
}
Iframe 내용 스타일 지정
iframe의 내용을 스타일링하는 것은 다른 웹 페이지의 스타일을 지정하는 것과 같습니다. 그러나 페이지를 편집하려면 액세스 권한 이 있어야합니다 . 페이지를 편집 할 수없는 경우 (예 : 다른 사이트에있는 경우)
페이지를 편집 할 수 있으면 사이트의 다른 웹 페이지 스타일과 마찬가지로 외부 스타일 시트 나 스타일을 문서에 추가 할 수 있습니다.