9가지 매우 유용한 HTML 트릭

HTML에는 유용할 수 있는 실용적인 비밀이 많이 있습니다.

하지만 사이트가 Internet Explorer 및 기타 브라우저에서 작동하는지 확인하고 싶습니다.

Endtest을 사용하여 자동화된 테스트를 만들고 크로스 브라우저 클라우드에서 실행합니다.


Netflix은 동일한 플랫폼을 사용하여 웹 앱을 테스트합니다.

그것은 심지어 그들의 일부에 대한 필수 기술로 나열됩니다.

Endtest에는 다음과 같은 몇 가지 정말 좋은 기능이 있습니다.
• Windows 및 macOS 시스템에서 실행되는 브라우저 간 그리드
• 자동화된 테스트를 위한 코드리스 편집기
• 웹 애플리케이션 지원
• 네이티브 및 하이브리드 Android 및 iOS 앱 모두 지원
• 테스트 실행을 위한 무제한 비디오 녹화
• 스크린샷 비교
• 지리적 위치
• If 문
• 루프
• 테스트에서 파일 업로드
• CI/CD 시스템과의 손쉬운 통합을 위한 Endtest API
• 고급 주장
• 실제 모바일 장치에서 모바일 테스트
• Endtest Mailbox로 이메일 테스트

docs 을 확인해야 합니다.

다음은 9가지 매우 유용한 HTML 트릭입니다.

1. <Figure> 태그

이것은 사진에 마크를 표시하는 데 사용할 수 있습니다.
<figure> 요소에는 <figcaption> 도 포함될 수 있습니다.

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>

그리고 이것은 다음과 같이 보일 것입니다:

2. <비디오> 태그

이를 통해 비디오 재생을 위한 미디어 플레이어를 내장할 수 있습니다.

예를 들어, AWS S3에 비디오를 업로드하고 <video> 태그를 사용하여 웹 사이트에 포함할 수 있습니다.

이를 위해 YouTube를 사용하는 것은 비전문적으로 보일 수 있습니다.

그리고 Vimeo에서는 비용을 지불하지 않고 동영상을 퍼갈 수 없습니다. ☹️

너비, 높이, 자동 재생, 루프, 컨트롤 등과 같은 특정 속성을 지정할 수 있습니다.

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>

그리고 이것은 다음과 같이 보일 것입니다:


getUserMedia() 또는 WebRTC을 사용하여 라이브 스트림을 포함할 수도 있습니다.

3. <사진> 태그

이 태그는 더 작은 뷰포트에 대한 대체 이미지 버전을 표시하여 반응형 방식으로 이미지를 표시하는 데 도움이 됩니다.

하나 이상의<source> 태그와 하나<img> 태그를 포함해야 합니다.
<img> 태그는 뷰포트가 <source> 태그와 일치하지 않거나 브라우저가 지원하지 않는 경우에만 사용됩니다.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

4. <progress> 태그

<progress> 태그는 작업의 진행 상황을 나타냅니다.
<progress> 태그를 <meter> 태그(게이지를 나타냄)와 혼동해서는 안 됩니다.

<progress value="63" max="100">
</progress>

다음과 같이 보입니다.

5. <미터> 태그

meter 요소를 사용하여 지정된 범위(게이지) 내의 데이터를 측정할 수 있습니다.

이것은 최소값과 최대값 또는 백분율을 사용하여 수행할 수 있습니다.

<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>

다음은 다음과 같습니다.

6. <map> 태그

<map> 태그는 클라이언트 측 이미지 맵을 정의하는 데 사용됩니다.

이미지 맵은 클릭 가능한 영역이 있는 이미지입니다.
<map> 의 요소에서 X 및 Y 좌표를 언급하기만 하면 됩니다.

즉, 태양계 지도를 만들고 각 행성의 영역을 정의하고 방문자를 클릭한 각 행성에 대한 별도의 페이지로 안내합니다.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

7. contenteditable 속성

이 속성은 요소의 내용이 편집 가능한지 여부를 지정합니다.

<p contenteditable="true">This is an editable paragraph.</p>

8. 제안 입력

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

스타일링을 추가하지 않았다고 신경쓰지 않으셨으면 합니다.

나는 내 예에서 가능한 한 바닐라로 유지하는 것을 선호합니다.

9. <noscript> 태그

<noscript> 요소 내부의 콘텐츠는 JavaScript가 비활성화된 경우에만 브라우저에서 렌더링됩니다.

JavaScript 없이 작동을 중지하는 구성 요소에 대한 대체 메커니즘을 제공합니다.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

HTML 트릭을 찾고 있다는 것은 정말 멋진 일이라고 생각합니다. 하지만 웹 애플리케이션이 모든 브라우저와 장치에서 올바르게 작동하고 있다고 확신하십니까?

Endtest을 사용하여 자동 테스트를 빠르게 생성하고 브라우저 간 클라우드에서 실행할 수 있습니다.

사용하기 위해 코딩할 필요도 없습니다.

진지하게, 그냥 읽으십시오 docs .