네이게이션 건너뛰기
codingEverybody
  • HTML
  • CSS
  • JavaScript
  • PHP
  • HTML 소개
  • HTML 태그
  • HTML 속성
  • 유용한 활용 팁
HTML
  • HTML 소개
  • <!DOCTYPE html>
    선언의 올바른 의미
  • HTML 주석
    올바른 이해와 사용 방법
HTML 태그
  • HTML 태그 소개
  • <a>
  • <abbr>
  • <address>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <datalist>
  • <del>
  • <details>
  • <summary>
  • <dfn>
  • <div>
  • <dl>
  • <dt>
  • <dd>
  • <em>
  • <fieldset>
  • <legend>
  • <figure>
  • <figcaption>
  • <footer>
  • <form>
  • <h1>~<h6>
  • <head>
  • <header>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <li>
  • <link>
  • <main>
  • <map>
  • <area>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <picture>, <source>
  • <pre>
  • <progress>
  • <q>
  • <ruby>, <rt>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <sup>
  • <table>
  • <caption>
  • <tr>
  • <td>
  • <th>
  • <thead>
  • <tbody>
  • <tfoot>
  • <col>
  • <colgroup>
  • <template>
  • <textarea>
  • <time>
  • <title>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>
HTML 속성
  • HTML 속성 소개
  • button 태그의 type
    버튼의 컨트롤 유형을 지정
  • <button type="button">
  • <button type="reset">
  • <button type="submit">
  • cite
    인용문이나 변경 내용의 출처를 가리키는 URL
  • class
    하나 이상의 클래스 이름을 지정
  • contenteditable
    에디터 개발을 위해 알아야 할 필수 속성
  • crossorigin
    외부 출처 리소스와의 상호작용 허용 방식을 지정
  • data-*
    표준 사용자 지정 데이터 속성
  • datetime
    해당 요소와 관련된 시간 및 날짜 정보
  • dir
    언어의 특성에 맞게 읽고 쓰는 텍스트의 방향을 지정
  • enterkeyhint
    가상 키보드의 Enter 버튼 모양 설정
  • hidden
    숨겨진 요소임을 나타내는 속성
  • href
    링크된 리소스의 URL을 지정
  • id
    웹 페이지 내에서 유일한 고유식별자 설정
  • img 태그의 alt
    이미지의 대체 텍스트를 지정
  • img 태그의 srcset, sizes
    <img>로 반응형 이미지 구현하기
  • input 태그의 type
    다양한 입력 컨트롤 유형을 지정
  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • inputmode
    가상 키보드의 입력 모드 설정
  • lang
    기본 언어를 지정
  • placeholder
    텍스트 박스에 플레이스홀더 텍스트 지정하기
  • rel
    링크된 리소스와 현재 문서 사이의 관계를 지정
  • <link rel="prefetch">
    다음에 사용될 리소스를 미리 로딩하여 캐시로 저장
  • <link rel="dns-prefetch">
    링크된 외부 도메인의 DNS 조회를 미리 수행
  • <link rel="preconnect">
    링크된 외부 도메인을 미리 연결
  • <link rel="preload">
    리소스를 우선순위로 즉시 다운로드하기
  • role
    웹 콘텐츠 접근성을 개선하는 강력한 도구
  • style
    요소에 직접 CSS 스타일하기
  • tabindex
    요소의 키보드 tab 포커스 탐색 제어하기
  • th 태그의 scope
    향상된 테이블 헤더 구조의 접근성 제공
  • title
    요소에 대한 지침 또는 설명 등의 참고 정보
HTML 유용한 활용 팁
  • HTML 유용한 활용 팁 소개
  • 오픈 그래프 프로토콜
    웹 페이지의 소셜 미디어 공유 미리보기 설정
  • 특수 문자 사용법과 의의
    예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기
  • 웹 페이지에서 이모지(이모티콘) 사용하기
    웹 페이지에 이모지 삽입하는 방법
  • <video> 태그 자동 재생 완벽 가이드
    자동 재생 안 됨 해결

HTML 속성 소개

HTML 다음

HTML 속성(Attributes)은 HTML 요소(element)에 대한 추가 정보를 제공하는 데 사용됩니다. HTML 요소는 보통 태그로 표시되는데, 이러한 태그에는 여러 속성이 포함될 수 있습니다. 이러한 속성은 해당 요소의 동작, 모양, 동작 방식 등을 지정하는 데 사용됩니다.

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 요소에서 사용됩니다. 이 속성을 사용하면 브라우저나 검색 엔진의 경우 날짜와 시간 데이터를 이해할 수 있어서 더 유용한 정보을 제공할 수 있습니다.
dir
언어의 특성에 맞게 읽고 쓰는 텍스트의 방향을 지정
dir 속성은 텍스트의 읽고 쓰는 방향(direction)을 지정합니다. 이 속성을 사용하면 요소 내 텍스트를 언어의 특성에 맞게 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 읽고 쓸 수 있습니다.
enterkeyhint
가상 키보드의 Enter 버튼 모양 설정
enterkeyhint 속성은 가상 키보드의 Enter 키에 대해 표시할 텍스트나 아이콘의 모양 등의 레이블(action label)을 명시적으로 설정하는 속성입니다. 이 속성은 사용자가 Enter 키를 눌렀을 때 어떤 동작을 기대하는지에 대한 더 유용한 힌트(hint)를 설정을 통해 제공하는 것입니다.
hidden
숨겨진 요소임을 나타내는 속성
hidden 속성은 해당 요소가 시각적으로 보이지 않고 스크린 리더에서도 접근할 수 없도록 숨겨진(hidden) 요소임을 나타내는 속성입니다. 이 속성은 요소의 콘텐츠가 사용자에게 표시되어서는 안 됨을 나타낼 때 사용됩니다.
href
링크된 리소스의 URL을 지정
HTML의 href 속성은 해당 요소에 링크된 리소스의 URL을 지정합니다. 이 속성은 a, area, base, link 요소에서 참조하는 하이퍼링크를 설정합니다.
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)를 지정합니다. 이 속성을 사용하면 브라우저나 스크린 리더, 검색 엔진 등에 사용해야 하는 (인간) 콘텐츠 언어 정보를 제공합니다.
placeholder
텍스트 박스에 플레이스홀더 텍스트 지정하기
placeholder 속성은 텍스트 박스에 값이 없을 때 사용자의 데이터 입력을 돕기 위한 짧은 힌트(단어 또는 짧은 문구)를 나타냅니다. 힌트는 샘플 값 또는 예상 형식에 대한 간략한 설명일 수 있습니다.
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 속성으로 직접 해당 요소에만 스타일링하는 것을 '인라인 스타일'이라고 합니다.
tabindex
요소의 키보드 tab 포커스 탐색 제어하기
tabindex 속성은 웹 페이지에서 사용자가 키보드의 Tab 키를 눌러 웹 페이지의 포커스가 가능한 요소에 포커스를 맞춰 탐색할 때, 해당 요소에 포커스를 허용하거나 방지할 수 있으며, 포커스되는 요소의 상대적 순서를 결정할 수 있습니다.
th 태그의 scope
향상된 테이블 헤더 구조의 접근성 제공
테이블의 헤더 셀(th 태그)의 scope 속성은 해당 헤더 셀이 어떤 범위의 셀과 관련이 있는지 명확하게 지정하는 속성입니다.
title
요소에 대한 지침 또는 설명 등의 참고 정보
title 속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다. title 속성에 대한 사용 목적 및 웹 접근성, 사용 방법, 주의할 점 등에 대해 알아봅니다.
HTML 다음

codingEverybody는 모든 사람을 위한 코딩 학습서입니다.
모든 자료와 예제는 오류를 방지하기 위해 지속적으로 검토되지만 완전한 정확성을 보증할 수는 없습니다.
따라서, 모든 자료와 예제를 신뢰하기 전에 스스로의 판단에 따라 오류, 버그, 취약점이 없는지 신중하게 테스트하고 검토해야 합니다.
크리에이티브 커먼즈 저작자표시-저작자표시 4.0 국제 에 따라 사용할 수 있습니다.

Copyright © 옵티안. All Rights Reserved.