지루하고 오래된 HTML이 할 수 있는 6가지 멋진 일 🤯
4550 단어 programmingwebdevjavascripthtml
1. 자산 미리 로드 및 캐시 📥
자산을 미리 로드하고 캐시하는 방법이 궁금하십니까? 한 줄의 코드만 있으면 완료됩니다!
<link
rel="preload"
href="https://example.com/asset.png"
as="image"
/>
2. 페이지에 대한 사용자 정의 링크 미리보기 추가 🖼️
링크 미리보기가 생성되는 방식이 궁금하십니까?
meta
태그만 있으면 됩니다!<meta property="og:title" content="Page title" />
<meta
property="og:description"
content="Page description"
/>
<meta
property="og:image"
content="https://example.com/asset.png"
/>
위에 표시된
meta
태그는 Open Graph Protocol을 사용하며 모든 meta
태그 생성기를 사용하여 다른 모든 플랫폼(예: Twitter 카드)에 대한 태그를 생성할 수 있습니다.3. 다른 링크로 리디렉션 ↪️
사용자를 다른 링크(결제 확인 후 일반적으로 사용됨)로 리디렉션하는 것은 단 한 줄의 코드입니다!
<meta
http-equiv="refresh"
content="3; url=https://google.com/"
/>
위의 코드는 3초 후에 사용자를 Google로 리디렉션합니다.
4. 전화 또는 메일 📞
전화를 걸거나 메일을 보내려면 링크가 필요하십니까?
a
구조에 태그!<a href="tel:+919876543210">Call</a>
<a href="mailto:[email protected]">Mail</a>
5. 색상 선택기 추가 🎨
웹사이트에 색상 선택기를 추가하고 싶습니까? 한 줄만 있으면 됩니다. 멋진 라이브러리나 JavaScript가 필요하지 않습니다!
<input type="color" />
6. 편집 가능한 콘텐츠 ✏️
요소에
contenteditable
속성을 추가하기만 하면 모든 콘텐츠를 편집 가능하게 만들 수 있습니다.<p contenteditable="true">
This is an editable paragraph
</p>
적절한 스타일과 함께 사용하면 WYSIWYG 편집기를 만드는 데에도 사용할 수 있습니다.
참고: 이 속성을 사용할 때 발생할 수 있는 보안 문제에 주의하십시오. 따라서 의미를 알지 못하는 경우 피하십시오.
그게 다야! 🎉
읽어 주셔서 감사합니다
개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서가 필요하십니까? Upwork에 저에게 연락하십시오
내가 무엇을 하고 있는지 보고 싶습니까? 내 Personal Website 및 GitHub을 확인하십시오.
연결하시겠습니까? 에 나에게 연락
저는 디지털 노마드이며 가끔 여행을 떠납니다. 나를 팔로우하여 내가 무엇을 하고 있는지 확인하세요.
격주로 새로운 정보를 보려면 내 블로그를 팔로우하세요.
자주하는 질문
다음은 제가 받는 몇 가지 자주 묻는 질문입니다. 따라서 이 FAQ 섹션이 문제를 해결하기를 바랍니다.
저는 초보자입니다. Front-End Web Dev를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.
죄송합니다. 저는 이미 많은 업무를 처리하고 있으며 누군가를 멘토링할 시간이 없습니다.
Reference
이 문제에 관하여(지루하고 오래된 HTML이 할 수 있는 6가지 멋진 일 🤯), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ruppysuppy/6-cool-things-boring-old-html-can-do-3160텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)