HTML 속성(Attributes)은 HTML 요소(element)에 대한 추가 정보를 제공하는 데 사용됩니다. HTML 요소는 보통 태그로 표시되는데, 이러한 태그에는 여러 속성이 포함될 수 있습니다. 이러한 속성은 해당 요소의 동작, 모양, 동작 방식 등을 지정하는 데 사용됩니다.
cite 인용문이나 변경 내용의 출처를 가리키는 URL |
cite 속성은 인용문이나 변경 내용의 출처를 가리키는 URL 값을 가지며 blockquote, del, ins, q 요소에서 사용됩니다. 이 속성으로 인용문이나 변경 내용의 출처를 제공함으로써 정보의 신뢰성을 높이고, 웹 페이지의 저작자, 검색 엔진 등이 이 정보를 활용할 수 있습니다. |
---|---|
class 하나 이상의 클래스 이름을 지정 |
class 속성은 요소에 하나 이상의 클래스 이름을 지정하는 속성입니다. 여러 요소가 동일한 클래스 이름으로 된 목록을 가질 수 있으며, 이 클래스 이름은 CSS나 자바스크립에서 요소를 분류해서 식별하고 선택하여 스타일링 및 조작하는 데 사용됩니다. |
contenteditable 에디터 개발을 위해 알아야 할 필수 속성 |
contenteditable 속성은 요소의 콘텐츠를 편집할 수 있는지 여부를 지정하는 속성입니다. 이 속성의 값을 true로 설정하면 요소의 콘텐츠를 편집할 수 있고 false로 설정하면 편집할 수 없습니다. |
crossorigin 외부 출처 리소스와의 상호작용 허용 방식을 지정 |
crossorigin 속성은 해당 요소에 링크된 외부 출처의 리소스와 현재 웹 페이와의 상호작용을 할 수 있도록 교차 출처 리소소 공유(CORS, Cross-Origin Resource Sharing) 체계에서 처리하는 설정 방법을 지정하는 속성입니다. |
data-* 표준 사용자 지정 데이터 속성 |
data-* 속성은 HTML에서 정의된 표준 속성 이외의 HTML 표준 '사용자 지정 데이터 속성'입니다. 이 속성은 data- 접두사와 그 뒤에 원하는 이름을 지정하여 속성의 이름을 만들고, 사용자 지정 데이터를 속성의 값으로 지정합니다. |
datetime 해당 요소와 관련된 시간 및 날짜 정보 |
datetime 속성은 해당 요소와 관련된 시간 및 날짜를 나타내며 del, ins, time 요소에서 사용됩니다. 이 속성을 사용하면 브라우저나 검색 엔진의 경우 날짜와 시간 데이터를 이해할 수 있어서 더 유용한 정보을 제공할 수 있습니다. |
enterkeyhint 가상 키보드의 Enter 버튼 모양 설정 |
enterkeyhint 속성은 가상 키보드의 Enter 키에 대해 표시할 텍스트나 아이콘의 모양 등의 레이블(action label)을 명시적으로 설정하는 속성입니다. 이 속성은 사용자가 Enter 키를 눌렀을 때 어떤 동작을 기대하는지에 대한 더 유용한 힌트(hint)를 설정을 통해 제공하는 것입니다. |
hidden 숨겨진 요소임을 나타내는 속성 |
hidden 속성은 해당 요소가 시각적으로 보이지 않고 스크린 리더에서도 접근할 수 없도록 숨겨진(hidden) 요소임을 나타내는 속성입니다. 이 속성은 요소의 콘텐츠가 사용자에게 표시되어서는 안 됨을 나타낼 때 사용됩니다. |
id 웹 페이지 내에서 유일한 고유식별자 설정 |
id 속성은 해당 요소의 고유식별자(ID, unique identifier)를 지정하는 속성입니다. 이 속성의 값은 해당 요소를 스타일을 위해 CSS로 선택하거나, 자바스크립트로 식별하거나, URL의 프래그먼트를 식별할 목적 등의 고유한 값으로 사용됩니다. |
inputmode 가상 키보드의 입력 모드 설정 |
inputmode 속성은 가상 키보드가 있는 모든 장치(예: 모바일이나 태블릿)에서 입력 필드나 편집 가능한 콘텐츠의 가상 키보드 모양을 명시적으로 설정하는 속성입니다. 사용자가 가상 키보드를 사용할 상황에서 좀 더 유용한 가상 키보드 입력 모드를 제공해 줄 수 있습니다. |
lang 기본 언어를 지정 |
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(primary language)를 지정합니다. 이 속성을 사용하면 브라우저나 스크린 리더, 검색 엔진 등에 사용해야 하는 언어 정보를 제공합니다. |
rel 링크된 리소스와 현재 문서 사이의 관계를 지정 |
rel 속성은 링크된 리소스와 현재 문서 사이의 관계를 지정하는 데 사용되는 속성입니다. rel은 relationship의 줄임말이며, 링크된 리소스와 현재 문서 간의 관계를 설명하는 목적으로 사용됩니다. 이 속성은 a, area, link에서 사용됩니다. |
rel=prefetch 다음에 사용될 리소스를 미리 로딩하여 캐시로 저장 |
link 태그의 rel="prefetch"는 브라우저에게 href 속성으로 지정한 리소스를 미리 로딩하여 캐시에 저장하도록 설정합니다. 현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지나 페이지 로딩 후에 로드되는 리소스를 미리 로딩하여 캐시에 저장할 때 사용합니다. |
rel=dns-prefetch 링크된 외부 도메인의 DNS 조회를 미리 수행 |
link 태그의 rel="dns-prefetch"는 브라우저에게 href 속성으로 지정한 외부 도메인의 DNS 조회를 미리 수행하고 IP 주소를 캐싱하도록 설정합니다. 이렇게 하면 브라우저가 해당 도메인을 연결할 때의 대기 시간이 줄기 때문에 연결 속도를 향상시킵니다. |
rel=preconnect 링크된 외부 도메인을 미리 연결 |
link" 태그의 rel="preconnect"는 브라우저에게 href 속성으로 지정한 외부 도메인을 미리 연결하도록 설정합니다. 이렇게 하면, 브라우저가 외부 도메인 연결에 필요한 시간을 절약할 수 있어서 해당 도메인의 리소스(예: 이미지, 스크립트, 폰트 등) 로드를 더 빠르게 합니다. |
rel=preload 리소스를 우선순위로 즉시 다운로드하기 |
link" 태그의 rel="preload"는 브라우저에게 href 속성으로 지정한 리소스를 로드 순서대로 기다리지 않고 우선순위로 즉시 다운로드 및 캐싱하도록 설정합니다. head 태그 내에서 사용됩니다. |
role 웹 콘텐츠 접근성을 개선하는 강력한 도구 |
role 속성은 장애를 가진 사용자들을 위한 웹 콘텐츠 접근성을 개선하는 강력한 도구입니다. 이 속성을 사용하여 웹 페이지의 구조와 의미를 명확하게 전달하고 상호 작용을 용이하게 만들 수 있습니다. 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕는 중요한 기능입니다. |
<img> srcset과 sizes 속성 아주 쉬운 설명과 사용법 |
HTML의 <img> 태그로 반응형 이미지(웹 브라우저의 가로 사이즈와 해상도에 따라)를 자동 조절하고 구현하게 할 수 있는 srcset 속성과 sizes 속성의 개념 이해와 사용법에 대해 알아보겠습니다. |
title 요소에 대한 지침 또는 설명 등의 참고 정보 |
title 속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다. title 속성에 대한 사용 목적 및 웹 접근성, 사용 방법, 주의할 점 등에 대해 알아봅니다. |