[HTML] 당신이 잘 모르는 8가지 HTML 팁

[ 언어·프레임워크/HTML·CSS ]

[HTML] 당신이 잘 모르는 8가지 HTML 팁 - 번역

2022년 12월 11일 20시 54분 18초에 업로드 된 글입니다.

작성자: DandyNow

728x90

당신이 잘 모르는 8가지 HTML 팁
여러분의 마음을 사로잡을 HTML 팁 모음입니다!

1. 장치 카메라를 여는 캡처 속성

input 태그에 이메일, 문자, 비밀번호 등의 속성이 있는 것처럼 모바일 기기의 카메라를 열어 이미지를 캡처하는 속성도 있습니다.

이것은 두 가지 값을 가질 수 있는 capture속성으로 수행됩니다.

전면 카메라 사용자
후면 카메라 환경

<input type="file" capture="user" accept="image/*">

2. 웹사이트 자동 새로고침

head태그에서 일정 시간이 지나면 웹사이트가 새로고침 되도록 설정할 수 있습니다!

<head>
    <meta http-equiv="refresh" content="10">
</head>

이 스니펫은 10초마다 웹사이트를 새로고침 합니다.

3. 맞춤법 검사 활성화

HTML spellcheck 속성을 사용하고 이를 true로 설정하여 활성화할 수 있습니다. lang속성을 사용하여 사용할 언어를 지정합니다.

<input type="text" spellcheck="true" lang="en">

표준 속성이며 모든 브라우저에서 지원됩니다.

4. 업로드할 파일 형식 지정

accept속성을 사용하여 사용자가 input 태그에 업로드할 수 있는 파일 형식을 지정할 수 있습니다.

<input type="file" accept=".jpeg,.png">

5. 번역 방지

translate속성을 no로 설정하면 변환이 방지됩니다. 예를 들어 로고, 회사 또는 브랜드 이름과 같은 구문이나 단어를 번역하지 않으려는 경우에 중요합니다.

<p translate="no">Brand name</p>

6. 입력 태그에 여러 항목 입력

이는 multiple속성으로 수행할 수 있습니다.

<input type="file" multiple>

파일과 이메일 모두에서 작동합니다. 이메일의 경우 각 이메일을 쉼표로 구분합니다.

7. 동영상 포스터(썸네일) 만들기

poster속성을 사용하면 비디오를 다운로드하는 동안 또는 사용자가 재생 버튼을 누를 때까지 표시되는 이미지를 만들 수 있습니다.

이것이 포함되지 않은 경우 비디오의 첫 번째 프레임이 대신 사용됩니다.

<video poster="picture.png"></video>

8. 링크 클릭 시 자동 다운로드

대상 리소스에 대한 링크를 클릭할 때 특정 리소스를 다운로드하려면 download속성을 추가하십시오.

<a href="image.png" download>

행복한 코딩! 😃

필요하신 분에게 공유해주세요! 💚

더 많은 것을 보려면 팔로우하십시오 ⚡

원문

https://medium.com/@laka9/8-html-tips-you-probably-dont-know-about-d2547a3748f0

8 HTML tips you probably don’t know about

A collection of HTML tips that would definitely blow your mind!

medium.com

728x90

저작자표시 비영리 변경금지

'언어·프레임워크 > HTML·CSS' 카테고리의 다른 글

[CSS] Tailwind에서 중첩된 CSS가 감지되었다는 경고 : Nested CSS was detected... (0)	2023.10.27
[CSS] input 자동 완성 폰트 색 변경 (0)	2023.02.14
[Bootstrap] SearchBar components 배치 방법 (0)	2022.11.14
[CSS] 가로/세로 중앙-가운데-정렬(Tailwind 추가) (0)	2022.11.03
[CSS] 동그라미 안에 텍스트 넣기, 대각선 그리기 (0)	2022.10.30

다음글이 없습니다.

이전글이 없습니다.