HTML에서 요소를 대체했습니다 : 신화와 현실

이 기사는 HTML에서 대체 된 요소의 자주 이해되는 행동을 탐구하여 본질을 명확하게하고 일반적인 오해를 없애줍니다.

프론트 엔드 개발자는 브라우저 및 운영 체제에 대한 일관되지 않은 렌더링으로 인해 Iframes, Applet 및 Form Control과 같은 요소와 도전에 직면합니다. 수많은 라이브러리가 해결 방법을 제공하는 반면, 대체 된 요소의 개념 인 근본 원인을 이해하는 것이 중요합니다. 이 기사는 결정적인 설명을 제공하기 위해 W3C 사양을 탐구합니다.

키 테이크 아웃 :

대체 요소 : 해당 콘텐츠는 CSS 서식 모델 (예 : 이미지, 임베디드 문서)을 벗어납니다. 그들은 종종 고유 치수 (너비, 높이, 종횡비)를 가지고 있습니다 내재 차원 :

는 페이지의 컨텍스트와 무관하게 요소 자체의 선호하는 크기를 나타냅니다. 대체 된 모든 요소에 3 차원이 모두있는 것은 아닙니다 , , 및 와 같은 요소는 항상 항상 대체 요소입니다.

오해 :
• 많은 사람들이 형태 제어가 요소를 대체한다고 믿는다. 그러나 HTML 표준은 명시 적으로 비 체류 된 요소로 분류합니다. 그들의 기본 치수는 내재적 특성이 아닌 브라우저 별 렌더링 규칙에서 비롯됩니다.
• 대체 요소 이해 :
W3C는 대체 된 요소를 다음과 같이 정의합니다. 내용은 IT 참조 외부 리소스로 대체됩니다.
• <embed></embed> 내재 차원이 설명된다 : <iframe></iframe> 내재 차원 (너비, 높이, 종횡비)은 CSS 이미지 값으로 정의되며 컨텐츠 모듈 레벨 3을 대체합니다. 이러한 치수는 요소의 자연 크기를 나타냅니다. 이미지에는 세 가지가 모두 있습니다. SVG는 종횡비 만 가질 수 있습니다. 빈이 iframe에는 아무것도 없습니다. 두 사람의 존재는 세 번째를 자동으로 정의합니다 실제로 요소를 대체했습니다 HTML Living 표준은 상세한 렌더링 규칙을 제공합니다. 일부 요소는 항상 교체되는 반면 다른 요소는 특정 조건 하에서 만 교체됩니다. <video></video>
  내장 내용 (항상 교체) :
  • , , . 임베디드 내용 (조건부 교체) : , <embed></embed>,
  및
  • (이미지가로드되거나로드 될 때 교체되거나로드 될 때 교체; 그렇지 않으면 버튼으로 렌더링 할 수 있음). 대체 요소의 기본 크기 : 내재 차원을 사용할 수 없으면 브라우저는 기본 규칙을 적용합니다 (시각적 형식 모델 세부 사항) : <applet></applet> 명시 적 폭, 높이 및 비율이 존재하는 경우 사용됩니다. 비율 만 알려져 있으면 및 <audio></audio>가 로 설정되어 종횡비를 유지합니다. 치수가없는 경우 : viewport ≥ 300px : <object></object>. viewport & lt; 300px : 및 <canvas></canvas>는
  이며 2 : 1 종횡비입니다.
  • <img alt="HTML에서 요소를 대체했습니다 : 신화와 현실" > <input type="image"> 형태 제어 : 설명 :
  다른 양식 컨트롤은

  교체 요소가 아닙니다. HTML 표준은 그것들을 비류로 분류합니다. 그들의 외관은 브라우저 별 렌더링과 CSS 속성에 의해 결정되며, 크로스 브라우저 및 크로스 -OS 불일치로 이어집니다.

  결론 :

  교체 된 요소와 양식 컨트롤의 차이를 이해하려면 HTML 및 CSS 사양을 신중하게 검사해야합니다. 양식 컨트롤 중 하나만 대체 된 요소입니다. 이 설명은 HTML 렌더링의 자주 오해 된 측면에 대한 명확한 이해를 제공합니다. 자주 묻는 질문 (FAQ) :

  (이 섹션은 유용한 추가이며 의사 원리에 대한 상당한 재 작성이 필요하지 않기 때문에 입력에서 크게 변하지 않은 상태로 남아 있습니다.)
  html에서 정확히 요소가 무엇입니까? html의 교체 요소는 외관 및 치수가 외부 자원에 의해 정의되는 요소입니다. 콘텐츠가 이러한 리소스로 대체되기 때문에 "교체"라고합니다. 대체 된 요소의 예로는 이미지, 객체, 비디오 및 임베디드 문서가 포함됩니다. 이러한 요소의 실제 내용은 HTML 문서 자체가 아니라 외부 파일에 의해 결정됩니다. 교체 된 요소가 비류 요소와 어떻게 다릅니 까? 대체 된 요소와 비류 요소의 주요 차이점은 콘텐츠가 결정되는 방식에 있습니다. 비교 요소의 경우 컨텐츠는 HTML 문서 자체에 의해 결정됩니다. 교체 된 요소의 경우 컨텐츠는 외부 리소스에 의해 결정됩니다. 이것은 대체 된 요소의 외관과 치수가 HTML 문서에 지정된 것과 다를 수 있음을 의미합니다. 교체 된 요소의 크기를 제어 할 수 있습니까?

  예, CSS를 사용하여 대체 요소의 크기를 제어 할 수 있습니다. '폭'및 '높이'속성을 사용하여 요소의 너비와 높이를 지정할 수 있습니다. 그러나 너비와 높이를 모두 지정하지 않으면 외부 자원의 종횡비가 유지 될 것입니다. 대체 요소를 사용하는 데 제한이 있습니까? 교체 된 요소는 많은 유연성을 제공하지만 몇 가지 제한 사항도 제공됩니다. 예를 들어 CSS 또는 JavaScript를 사용하여 대체 된 요소의 내용을 변경할 수 없습니다. 또한 일부 CSS 속성은 '수직-정상'및 '라인 높이'와 같은 대체 된 요소에는 적용되지 않습니다. 대체 된 요소의 일반적인 사용은 무엇입니까?

  교체 요소는 일반적으로 외부 리소스를 웹 페이지에 포함시키는 데 사용됩니다. 여기에는 이미지, 비디오, 오디오 파일 및 기타 멀티미디어 컨텐츠가 포함됩니다. 또한 PDF와 같은 문서를 포함시키고 게임 및 퀴즈와 같은 대화 형 컨텐츠를 작성하는 데 사용될 수도 있습니다. 교체 된 요소의 소스를 어떻게 지정합니까?

  대체 요소의 소스는 'SRC'속성을 사용하여 지정됩니다. 이 속성의 값은 외부 리소스의 URL입니다. 예를 들어, 이미지를 포함 시키려면 'SRC'속성이 이미지의 URL에 설정된 'IMG'요소를 사용합니다. 는 대체 된 요소가 내 웹 페이지의 성능에 영향을 미칠 수 있습니까? 예, 교체 된 요소는 웹 페이지의 성능에 영향을 줄 수 있습니다. 이러한 요소의 내용은 외부 리소스에서로드되므로 웹 페이지의로드 시간을 늘릴 수 있습니다. 이 영향을 최소화하려면 외부 리소스의 크기를 최적화하고 게으른 적재 기술을 사용하는 것을 고려해야합니다.

  . 교체 요소를 사용하기위한 접근성 고려 사항이 있습니까? 예, 교체 된 요소를 사용할 때는 접근성을 고려하는 것이 중요합니다. 예를 들어, 이미지의 경우 이미지의 내용을 설명하는 'Alt'속성을 항상 포함시켜야합니다. 이를 통해 스크린 리더가 컨텐츠를 이해하여 시각 장애가있는 사용자가 웹 페이지에 더 액세스 할 수 있도록 도와줍니다. 요소가 교체 된 CSS를 사용할 수 있습니까? 예, 요소가 교체 된 CSS를 사용할 수 있습니다. 그러나 모든 CSS 속성이 교체 된 요소에 적용되는 것은 아닙니다. 예를 들어 '폭'및 '높이'속성을 사용하여 요소의 크기를 제어 할 수 있지만 '컨텐츠'속성을 사용하여 요소의 내용을 변경할 수는 없습니다. 교체 요소를 사용하기위한 모범 사례가 있습니까? 교체 된 요소를 사용할 때는 외부 리소스의 크기를 최적화하여 웹 페이지의로드 시간에 미치는 영향을 최소화하는 것이 중요합니다. 또한 이미지가 접근성을 향상시키기위한 'ALT'속성을 포함하십시오. 그리고 CSS로 대체 된 요소의 크기를 제어 할 수는 있지만 왜곡을 방지하기 위해 외부 자원의 종횡비를 유지해야합니다.

  .

위 내용은 HTML에서 요소를 대체했습니다 : 신화와 현실의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!