HTML에서 속성은 HTML 요소에 대한 추가 정보를 제공하는 데 사용됩니다. 이 글에서는 웹사이트의 시각적 매력을 향상시킬 수 있는 13가지 HTML 속성에 대해 알아봅니다.
Accept
accept
속성을 <input>
요소(파일 유형에만 해당)와 함께 사용하여 서버가 허용할 수 있는 파일 유형을 지정할 수 있습니다.
1 | <input type="file" accept=".jpg, .jpeg, .png" /> |
Alt
alt
속성을 <img>
요소와 함께 사용하여 웹 페이지에 이미지를 표시할 수 없는 경우 대체 텍스트를 지정할 수 있습니다.
1 | <img src="nature.png" alt="A beautiful sunset" /> |
Autocomplete
autocomplete
속성을 <form>
, <input>
및 <textarea>
요소와 함께 사용하여 브라우저의 자동 완성 기능을 제어할 수 있습니다.
1 | <input type="text" name="name" autocomplete="on" /> |
Contenteditable
Contenteditable
속성을 사용하여 요소의 콘텐츠가 편집 가능한지 여부를 지정할 수 있습니다. 이를 통해 사용자는 요소 내의 콘텐츠를 수정할 수 있습니다.
1 | <div contenteditable="true">You can edit this content.</div> |
이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.
Download
download
속성을 <a>
요소와 함께 사용하여 사용자가 링크를 클릭할 때 링크된 리소스를 탐색하는 대신 다운로드하도록 지정할 수 있습니다.
1 | <a href="document.pdf" download="document.pdf">Download PDF</a> |
Hidden
hidden
속성을 사용하여 웹 페이지에서 요소를 숨길 수 있습니다. 이 속성은 JavaScript 또는 CSS를 통해 표시 여부를 제어할 때 유용합니다.
1 | <div hidden>This is hidden content.</div> |
이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.
Loading
<img>
요소와 함께 loading
속성을 사용하여 브라우저에서 이미지를 로드하는 방법을 제어할 수 있습니다. 세 가지 값이 있습니다. “eager”, “lazy”, "auto"의 세 가지 값이 있습니다.
1 | <img src="image.png" loading="lazy" /> |
Multiple
<input>
및 <select>
요소와 함께 multiple
속성을 사용하여 사용자가 한 번에 여러 값을 선택/입력할 수 있도록 할 수 있습니다.
1 | <input type="file" multiple /> |
Poster
<video>
요소와 함께 poster
속성을 사용하여 사용자가 비디오를 재생할 때까지 이미지를 표시할 수 있습니다.
1 | <video controls poster="image.png" width="500"> |
Readonly
<input>
요소와 함께 readonly
속성을 사용하여 해당 요소가 편집할 수 없는 읽기 전용임을 지정할 수 있습니다.
1 | <input type="text" value="This is readonly." readonly /> |
Srcset
<img>
및 <source>
(<picture>
) 요소와 함께 srcset
속성을 사용하여 이미지 소스 목록을 제공할 수 있습니다. 이렇게 하면 브라우저에서 화면 크기에 따라 다른 이미지를 선택할 수 있습니다.
1 | <img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg" /> |
Spellcheck
<input>
요소(비밀번호 아님), 콘텐츠 편집 가능 요소, <textarea>
요소와 함께 spellcheck
속성을 사용하여 브라우저에서 맞춤법 검사를 사용하거나 사용하지 않도록 설정할 수 있습니다.
1 | <input type="text" spellcheck="false" /> |
Title
title
속성을 사용하여 요소에 대한 추가 정보를 제공할 수 있습니다. 이 정보는 일반적으로 사용자가 요소 위로 마우스를 가져가면 표시됩니다.
1 | <a href="document.pdf" title="Click to download">Download File</a> |
이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.