HTML 속성(Attributes)은 HTML 요소(element)에 대한 추가 정보를 제공하는 데 사용됩니다. HTML 요소는 보통 태그로 표시되는데, 이러한 태그에는 여러 속성이 포함될 수 있습니다. 이러한 속성은 해당 요소의 동작, 모양, 동작 방식 등을 지정하는 데 사용됩니다.
|
button 태그의 type 버튼의 컨트롤 유형을 지정 |
button 태그의 type 속성은 버튼의 컨트롤 유형을 지정합니다. 가능한 키워드 값은 'button', 'reset', 'submit'이 있습니다. type 속성을 지정하지 않으면 기본값은 'submit'입니다. |
|---|---|
| <button type="button"> | button 태그의 type="button"은 클릭 가능한 일반 버튼 유형의 컨트롤을 나타냅니다. 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다. |
| <button type="reset"> | button 태그의 type="reset"은 양식 초기화 버튼입니다. 이 버튼을 클릭하면 해당 요소가 포함되어 있는 form 태그로 나타내는 양식의 모든 컨트롤의 값을 초기화합니다. |
| <button type="submit"> | button 태그의 type="submit"은 양식 제출 버튼입니다. 이 버튼을 클릭하면 해당 요소가 포함되어 있는 form 태그로 나타내는 양식의 모든 컨트롤의 값을 제출합니다. |
|
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의 프래그먼트를 식별할 목적 등의 고유한 값으로 사용됩니다. |
|
img 태그의 alt 이미지의 대체 텍스트를 지정 |
이미지를 의미하는 img 태그의 alt 속성은 이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다. 웹 접근성 차원에서 이미지의 대체 수단으로 텍스트를 제공하기 위한 올바른 사용 방법에 대해 알아봅니다. |
|
img 태그의 srcset, sizes <img>로 반응형 이미지 구현하기 |
HTML의 img 태그로 반응형 이미지(웹 브라우저의 가로 사이즈와 해상도에 따라)를 자동 조절하고 구현하게 할 수 있는 srcset 속성과 sizes 속성의 개념 이해와 사용법에 대해 알아보겠습니다. |
|
input 태그의 type 다양한 입력 컨트롤 유형을 지정 |
input 태그의 type 속성은 입력 받는 데이터의 컨트롤 유형을 지정합니다. input 태그는 type 속성의 값에 따른 다양한 컨트롤 유형이 있으며, 유형에 따른 입력 필드의 동작과 표시 방식이 달라집니다. |
| <input type="button"> | input 태그의 type="button"은 클릭 가능한 일반 버튼 유형의 컨트롤을 나타냅니다. 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다. |
| <input type="checkbox"> | input 태그의 type="checkbox"는 체크박스를 나타냅니다. 단일한 값으로 체크와 취소를 할 수 있습니다. 일반적으로 정사각형이지만 모서리가 둥글게 되어 있을 수도 있습니다. |
| <input type="color"> | input 태그의 type="color"는 사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드를 나타냅니다. 이 컬러 피커(color picker, 색상 선택기)에서는 투명도(알파 채널) 조정 기능이 제공되지 않습니다. |
| <input type="date"> | input 태그의 type="date"는 사용자가 달력 형태의 인터페이스를 통해 직접 날짜를 선택할 수 있는 입력 필드를 나타냅니다. 이 필드는 유효성 검사 기능을 통해서 잘못된 날짜 형식이나 불가능한 날짜 입력(예: 2월 31일)을 방지합니다. |
| <input type="datetime-local"> | input 태그의 type="datetime-local"은 사용자가 날짜와 시간을 한 번에 쉽게 입력할 수 있도록 날짜와 시간 선택 인터페이스를 제공하는 입력 필드를 나타냅니다. |
| <input type="email"> | input 태그의 type="search"은 한 줄 이메일 주소 입력 필드를 나타냅니다. 이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 이메일 주소를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다. |
| <input type="file"> | input 태그의 type="file"은 사용자가 디바이스에서 파일을 선택하고 업로드할 수 있는 입력 필드입니다. 옵션으로, 여러 개의 파일을 선택할 수 있게 하거나, 허용되는 파일 형식을 지정하는 등의 다양한 속성을 제공합니다.
|
| <input type="hidden"> | input 태그의 type="hidden"은 사용자가 시각적으로 보거나 직접 수정할 수 없는 값을 나타내는 숨겨진 필드입니다. 이 필드는 데이터를 다루는 웹 개발자가 웹 양식에 추가적인 데이터를 포함시키기 위해 사용되며, 양식이 제출될 때 서버로 전송됩니다. |
| <input type="image"> | input 태그의 type="image"는 텍스트가 아닌 이미지로 표시되는 양식 제출 버튼입니다. 표시할 이미지의 경로는 src 속성으로 지정합니다. |
| <input type="number"> | input 태그의 type="number"는 숫자 입력 필드를 나타냅니다. 이 필드는 숫자만 입력하거나 선택할 수 있도록 구성되어 있으며, 숫자가 아닌 입력을 거부하는 유효성 검사 기능이 내장되어 있습니다. |
| <input type="password"> | input 태그의 type="password"는 한 줄 비밀번호 입력 필드를 나타냅니다. 브라우저는 입력되는 민감한 정보를 화면에서 보이지 않게 텍스트 문자를 점("•")과 같은 기호로 대체하여 읽을 수 없게 처리합니다. |
| <input type="radio"> | input 태그의 type="radio"는 라디오 버튼을 나타냅니다. 일반적으로 그룹화된 라디오 버튼을 사용하며, 주어진 그룹에서 하나의 라디오 버튼만을 선택할 수 있습니다. |
| <input type="range"> | input 태그의 type="range"는 사용자가 주어진 숫자 범위가 있는 인터페이스(예: 슬라이더 컨트롤)에서 숫자를 선택할 수 있는 입력 필드를 나타냅니다. 이 필드는 숫자만 선택할 수 있도록 구성되어 있습니다. |
| <input type="reset"> | input 태그의 type="reset"은 양식 초기화 버튼입니다. 이 버튼을 클릭하면 해당 요소가 포함되어 있는 form 태그로 나타내는 양식의 모든 컨트롤의 값을 초기화합니다. |
| <input type="search"> | input 태그의 type="search"는 한 줄 검색어 입력 필드를 나타냅니다. 이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 검색어를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다. |
| <input type="submit"> | input 태그의 type="submit"은 양식 제출 버튼입니다. 이 버튼을 클릭하면 해당 요소가 포함되어 있는 form 태그로 나타내는 양식의 모든 컨트롤의 값을 제출합니다. |
| <input type="tel"> | input 태그의 type="tel"은 한 줄 전화번호 입력 필드를 나타냅니다. 이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 전화번호를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다. |
| <input type="text"> | input 태그의 type="text"는 기본 한 줄 텍스트 입력 필드를 나타냅니다. type="text"는 input 태그에서 사용되는 type 속성의 기본값이며, 사용자가 일반 한 줄 텍스트를 입력할 수 있는 기본 컨트롤입니다. |
| <input type="time"> | input 태그의 type="time"은 사용자가 시간을 쉽게 입력할 수 있도록 시간 선택 인터페이스를 제공하는 입력 필드를 나타냅니다. 이 필드는 유효성 검사 기능을 통해 잘못된 시간 형식이나 불가능한 시간 입력(예: '12시 반', '오후 3시')을 방지합니다. |
| <input type="url"> | input 태그의 type="url"은 한 줄 URL 입력 필드를 나타냅니다. 이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, URL을 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다. |
|
inputmode 가상 키보드의 입력 모드 설정 |
inputmode 속성은 가상 키보드가 있는 모든 장치(예: 모바일이나 태블릿)에서 입력 필드나 편집 가능한 콘텐츠의 가상 키보드 모양을 명시적으로 설정하는 속성입니다. 사용자에게 가상 키보드를 사용할 상황에서 좀 더 유용한 가상 키보드 입력 모드를 제공해 줄 수 있습니다. |
|
lang 기본 언어를 지정 |
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(primary language)를 지정합니다. 이 속성을 사용하면 브라우저나 스크린 리더, 검색 엔진 등에 사용해야 하는 언어 정보를 제공합니다. |
|
rel 링크된 리소스와 현재 문서 사이의 관계를 지정 |
rel 속성은 링크된 리소스와 현재 문서 사이의 관계를 지정하는 데 사용되는 속성입니다. rel은 relationship의 줄임말이며, 링크된 리소스와 현재 문서 간의 관계를 설명하는 목적으로 사용됩니다. 이 속성은 a, area, link에서 사용됩니다. |
|
<link rel="prefetch"> 다음에 사용될 리소스를 미리 로딩하여 캐시로 저장 |
link 태그의 rel="prefetch"는 브라우저에게 href 속성으로 지정한 리소스를 미리 로딩하여 캐시에 저장하도록 설정합니다. 현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지나 페이지 로딩 후에 로드되는 리소스를 미리 로딩하여 캐시에 저장할 때 사용합니다. |
|
<link rel="dns-prefetch"> 링크된 외부 도메인의 DNS 조회를 미리 수행 |
link 태그의 rel="dns-prefetch"는 브라우저에게 href 속성으로 지정한 외부 도메인의 DNS 조회를 미리 수행하고 IP 주소를 캐싱하도록 설정합니다. 이렇게 하면 브라우저가 해당 도메인을 연결할 때의 대기 시간이 줄기 때문에 연결 속도를 향상시킵니다. |
|
<link rel="preconnect"> 링크된 외부 도메인을 미리 연결 |
link 태그의 rel="preconnect"는 브라우저에게 href 속성으로 지정한 외부 도메인을 미리 연결하도록 설정합니다. 이렇게 하면, 브라우저가 외부 도메인 연결에 필요한 시간을 절약할 수 있어서 해당 도메인의 리소스(예: 이미지, 스크립트, 폰트 등) 로드를 더 빠르게 합니다. |
|
<link rel="preload"> 리소스를 우선순위로 즉시 다운로드하기 |
link 태그의 rel="preload"는 브라우저에게 href 속성으로 지정한 리소스를 로드 순서대로 기다리지 않고 우선순위로 즉시 다운로드 및 캐싱하도록 설정합니다. head 태그 내에서 사용됩니다. |
|
role 웹 콘텐츠 접근성을 개선하는 강력한 도구 |
role 속성은 장애를 가진 사용자들을 위한 웹 콘텐츠 접근성을 개선하는 강력한 도구입니다. 이 속성을 사용하여 웹 페이지의 구조와 의미를 명확하게 전달하고 상호 작용을 용이하게 만들 수 있습니다. 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕는 중요한 기능입니다. |
|
style 요소에 직접 CSS 스타일하기 |
style 속성으로 해당 요소에 직접 CSS 스타일을 지정할 수 있습니다. 이렇게 style 속성으로 직접 해당 요소에만 스타일링하는 것을 '인라인 스타일'이라고 합니다. |
|
title 요소에 대한 지침 또는 설명 등의 참고 정보 |
title 속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다. title 속성에 대한 사용 목적 및 웹 접근성, 사용 방법, 주의할 점 등에 대해 알아봅니다. |