알아야 할 13가지 HTML 속성

HTML에서 속성은 HTML 요소에 대한 추가 정보를 제공하는 데 사용됩니다. 이 글에서는 웹사이트의 시각적 매력을 향상시킬 수 있는 13가지 HTML 속성에 대해 알아봅니다.

Accept

accept 속성을 <input> 요소(파일 유형에만 해당)와 함께 사용하여 서버가 허용할 수 있는 파일 유형을 지정할 수 있습니다.

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

Alt

alt 속성을 <img> 요소와 함께 사용하여 웹 페이지에 이미지를 표시할 수 없는 경우 대체 텍스트를 지정할 수 있습니다.

<img src="nature.png" alt="A beautiful sunset" />

Autocomplete

autocomplete 속성을 <form>, <input> 및 <textarea> 요소와 함께 사용하여 브라우저의 자동 완성 기능을 제어할 수 있습니다.

<input type="text" name="name" autocomplete="on" />

Contenteditable

Contenteditable 속성을 사용하여 요소의 콘텐츠가 편집 가능한지 여부를 지정할 수 있습니다. 이를 통해 사용자는 요소 내의 콘텐츠를 수정할 수 있습니다.

<div contenteditable="true">You can edit this content.</div>

이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.

Download

download 속성을 <a> 요소와 함께 사용하여 사용자가 링크를 클릭할 때 링크된 리소스를 탐색하는 대신 다운로드하도록 지정할 수 있습니다.

<a href="document.pdf" download="document.pdf">Download PDF</a>

Hidden

hidden 속성을 사용하여 웹 페이지에서 요소를 숨길 수 있습니다. 이 속성은 JavaScript 또는 CSS를 통해 표시 여부를 제어할 때 유용합니다.

<div hidden>This is hidden content.</div>

이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.

Loading

<img> 요소와 함께 loading 속성을 사용하여 브라우저에서 이미지를 로드하는 방법을 제어할 수 있습니다. 세 가지 값이 있습니다. "eager", "lazy", "auto"의 세 가지 값이 있습니다.

<img src="image.png" loading="lazy" />

Multiple

<input> 및 <select> 요소와 함께 multiple 속성을 사용하여 사용자가 한 번에 여러 값을 선택/입력할 수 있도록 할 수 있습니다.

<input type="file" multiple />
<select multiple>
  <option value="java">Java</option>
  <option value="javascript">JavaScript</option>
  <option value="typescript">TypeScript</option>
  <option value="rust">Rust</option>
</select>

Poster

<video> 요소와 함께 poster 속성을 사용하여 사용자가 비디오를 재생할 때까지 이미지를 표시할 수 있습니다.

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4" />
</video>

Readonly

<input> 요소와 함께 readonly 속성을 사용하여 해당 요소가 편집할 수 없는 읽기 전용임을 지정할 수 있습니다.

<input type="text" value="This is readonly." readonly />

Srcset

<img> 및 <source>(<picture>) 요소와 함께 srcset 속성을 사용하여 이미지 소스 목록을 제공할 수 있습니다. 이렇게 하면 브라우저에서 화면 크기에 따라 다른 이미지를 선택할 수 있습니다.

<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg" />

Spellcheck

<input> 요소(비밀번호 아님), 콘텐츠 편집 가능 요소, <textarea> 요소와 함께 spellcheck 속성을 사용하여 브라우저에서 맞춤법 검사를 사용하거나 사용하지 않도록 설정할 수 있습니다.

<input type="text" spellcheck="false" />

Title

title 속성을 사용하여 요소에 대한 추가 정보를 제공할 수 있습니다. 이 정보는 일반적으로 사용자가 요소 위로 마우스를 가져가면 표시됩니다.

<a href="document.pdf" title="Click to download">Download File</a>

이 속성은 전역 속성이므로 모든 HTML 요소에 이 속성을 사용할 수 있습니다.