속성은 HTML 개요에서 간단히 다루었습니다. 이제 자세히 살펴볼 차례입니다.
속성은 HTML을 더욱 강력하게 만드는 요소입니다. 속성은 여는 태그에 표시되는 공백으로 구분된 이름과 이름/값 쌍입니다. 요소에 대한 정보 및 기능 제공
속성은 요소의 동작, 링크, 기능을 정의합니다. 일부 속성은 전역적이므로 . 전부가 아닌 여러 요소에 적용되는 속성도 있고, 요소별로 적용되는 속성도 있습니다. 단일 요소와만 관련이 있습니다. HTML에서는 부울을 제외한 모든 속성과 어느 정도 열거형 속성에 값이 필요합니다.
속성 값에 공백이나 특수문자가 포함되어 있으면 값을 따옴표로 묶어야 합니다. 따라서 가독성을 높이기 위해 인용하는 것이 좋습니다.
HTML은 대소문자를 구분하지 않지만 일부 속성 값은 대소문자를 구분합니다. HTML 사양에 속하는 값은 대소문자를 구분하지 않습니다. 클래스 및 ID 이름과 같이 정의된 문자열 값은 대소문자를 구분합니다. HTML에서 속성 값이 대소문자를 구분하는 경우 CSS 및 JavaScript에서 속성 선택기의 일부로 사용되는 경우 대소문자를 구분합니다. 그렇지 않은 경우에는 그렇지 않습니다.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
부울 속성
불리언 속성이 있으면 항상 true입니다. 불리언 속성에는 autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple,, selected.
이러한 속성 중 하나 이상이 존재하는 경우 요소는 사용 중지, 필수, 읽기 전용 등이 됩니다. 없으면 없는 것입니다.
부울 값은 생략하거나, 빈 문자열로 설정하거나, 속성 이름이 될 수 있습니다. 하지만 그 값이 실제로
true 문자열로 설정해야 합니다. true, false, 😀 등 모든 값이 유효하지 않더라도 true로 확인됩니다.
이 세 태그는 동일합니다.
<input required>
<input required="">
<input required="required">
속성 값이 false인 경우 속성을 생략합니다. 속성이 true인 경우 속성을 포함하되 값을 제공하지 않습니다.
예를 들어 required="required"는 HTML에서 유효한 값이 아닙니다. 그러나 required가 불리언이므로 잘못된 값은 true로 확인됩니다.
그러나 잘못된 열거 속성이 누락된 값과 반드시 같은 값으로 확인되는 것은 아니므로
어떤 속성이 부울인지 열거된 속성을 기억하고 유효하지 않은 값을 제공할 가능성이 있다는 것을 기억하기 위해 값을 생략하는 습관이 있습니다.
true와 false 간에 전환할 때 값을 전환하는 대신 JavaScript로 속성을 완전히 추가하고 삭제합니다.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
SVG와 같은 XML 언어에서는 부울 속성을 비롯한 모든 속성이 값을 포함해야 합니다.
열거형 속성
열거형 속성은 때때로 불리언 속성과 혼동됩니다. 사전 정의된 유효한 값 집합이 제한적인 HTML 속성입니다.
불리언 속성과 마찬가지로 속성은 있지만 값이 누락된 경우 기본값이 있습니다. 예를 들어 <style contenteditable>를 포함하면
기본값은 <style contenteditable="true">입니다.
그러나 불리언 속성과 달리 이 속성을 생략한다고 해서 거짓인 것은 아닙니다. 누락된 값이 있는 현재 속성
항상 그렇지는 않습니다. 잘못된 값의 기본값은 null 문자열과 반드시 동일하지는 않습니다. 예시를 계속 살펴보면
contenteditable의 기본값은 inherit가 누락되거나 잘못된 경우이며 false로 명시적으로 설정할 수 있습니다.
기본값은 속성에 따라 다릅니다. 불리언 값과 달리 속성은 자동으로 'true'가 아닙니다. 있습니다. 만약
<style contenteditable="false">를 포함하지 않으면 요소를 수정할 수 없습니다. 값이 잘못된 경우(예: <style contenteditable="😀">)
또는 놀랍게도 <style contenteditable="contenteditable">인 경우 값이 유효하지 않으며 기본값은 inherit입니다.
열거형 속성이 있는 경우 대부분의 경우 누락된 값과 잘못된 값은 동일합니다. 예를 들어 <input>의 type 속성이
이(가) 누락되었거나, 존재하지만 값이 없거나, 잘못된 값이 있는 경우 기본값은 text입니다. 이는 흔한 일이지만 흔한 법은 아닙니다.
따라서 어떤 속성이 부울인지 열거된 속성을 파악하는 것이 중요합니다. 값을 잘못 입력하지 않도록 가능한 한 값을 생략하고 필요에 따라 값을 찾습니다.
전역 속성
전역 속성은 <head>의 요소를 비롯하여 모든 HTML 요소에 설정할 수 있는 속성입니다. 이보다 더 많은
30개의 전역 속성 이론적으로는 모두 HTML 요소에 추가할 수 있지만 일부 전역 속성은 아무런 영향을 미치지 않습니다.
일부 요소에서 설정되면 예를 들어 <meta>에서 hidden을 메타 콘텐츠로 설정하면 표시되지 않습니다.
id
전역 속성 id는 요소의 고유 식별자를 정의하는 데 사용됩니다. 다음과 같은 다양한 용도로 사용됩니다.
- 링크 부분 식별자의 대상.
- 스크립팅을 위한 요소 식별.
- 양식 요소를 해당 라벨에 연결.
- 보조 기술에 관한 라벨 또는 설명 제공
- CSS에서 (높은 구체적이거나 속성 선택기로) 타겟팅 스타일
id 값은 공백이 없는 문자열입니다. 공백이 포함되어 있으면 문서는 손상되지 않지만
id를 HTML, CSS, JS에서 이스케이프 문자로 바꿉니다. 다른 모든 문자도 유효합니다. id 값은 😀 또는 .class일 수 있습니다.
좋은 생각은 아닙니다. 현재와 미래의 내가 더 쉽게 프로그래밍할 수 있도록 id의 첫 문자를 문자로 만듭니다.
ASCII 문자, 숫자, _, -만 사용해야 합니다. id 이름 지정 규칙을 만든 다음 이를 준수하는 것이 좋습니다.
id 값은 대소문자를 구분합니다.
id는 문서별로 고유해야 합니다. id를 두 번 이상 사용해도 페이지 레이아웃이 손상되지 않을 것입니다.
자바스크립트, 링크 및 요소 상호작용이 예상대로 작동하지 않을 수 있습니다.
링크 프래그먼트 식별자
탐색 메뉴에는 4개의 링크가 있습니다. 링크 요소는 나중에 다루겠지만 지금은 링크가 제한되지 않습니다. HTTP 기반 URL로 전환됩니다. 현재 문서 (또는 다른 문서)의 페이지 섹션에 대한 프래그먼트 식별자일 수 있습니다.
머신러닝 워크숍 사이트의 페이지 헤더 탐색 메뉴에는 다음 4개의 링크가 있습니다.
href 속성은 링크를 활성화하면 사용자가 연결되는 하이퍼링크를 제공합니다. URL에 해시 표시 (#)가 포함된 경우
이라는 문자열이 뒤에 오면 이 문자열이 프래그먼트 식별자입니다. 이 문자열이id
프래그먼트는 해당 요소의 앵커 또는 북마크입니다. 브라우저에서 앵커가 정의된 지점으로 스크롤합니다.
이 4개의 링크는 id 속성으로 식별된 페이지 4개를 가리킵니다. 사용자가
탐색 메뉴에 있는 4개의 링크, 프래그먼트 식별자에 의해 연결된 요소, 일치하는 ID를 포함하는 요소
#를 빼면 뷰로 스크롤합니다.
머신러닝 워크숍의 <main> 콘텐츠에는 ID가 포함된 4개의 섹션이 있습니다. 사이트 방문자가
<nav>의 링크인 경우 프래그먼트 식별자가 있는 섹션이 뷰로 스크롤됩니다. 이 마크업은 다음과 유사합니다.
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
<nav> 링크의 프래그먼트 식별자를 비교하면 각각이 <main>에 있는 <section>의 id와 일치하는 것을 알 수 있습니다.
브라우저는 무료로 '페이지 상단' 링크를 클릭합니다. href="#top"를 설정하거나 대소문자를 구분하지 않거나 href="#"로 설정하면 스크롤됩니다.
사용자를 페이지 상단으로 이동시킬 수 있습니다.
href의 해시 표시 구분자는 프래그먼트 식별자의 일부가 아닙니다. 프래그먼트 식별자는 항상 마지막
서버에 전송되지 않습니다.
CSS 선택 도구
CSS에서는 #feedback과 같은 ID 선택기를 사용하여 각 섹션을 타겟팅할 수 있으며, 구체적일 경우 대소문자를 구분하는
속성 선택기, [id="feedback"].
스크립트 작성
MLW.com에는 마우스 사용자만을 위한 이스터 에그가 있습니다. 조명 스위치를 클릭하면 페이지를 켜거나 끌 수 있습니다.
조명 스위치 이미지의 마크업은 다음과 같습니다.
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
id 속성은 getElementById() 메서드의 매개변수로 사용할 수 있으며 # 접두사와 함께
querySelector() 및 querySelectorAll() 메서드의 매개변수입니다.
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
하나의 JavaScript 함수는 이 기능을 사용하여 id 속성으로 요소를 타겟팅합니다.
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
HTML <label> 요소에는 연결된 양식 컨트롤의 id 값을 값으로 사용하는 for 속성이 있습니다.
모든 양식 컨트롤에 id를 포함하고 각각을 라벨의 for 속성과 페어링하여 명시적 라벨을 만들면
모든 양식 컨트롤에 연결된 라벨이 있습니다.
각 라벨은 정확히 하나의 양식 컨트롤에 연결될 수 있지만, 양식 컨트롤에는 두 개 이상의 연결된 라벨이 있을 수 있습니다.
양식 컨트롤이 <label> 열기 태그와 닫기 태그 사이에 중첩되어 있는 경우 for 및 id 속성
필수는 아닙니다. 이를 '암시적' 라벨을 지정합니다. 라벨을 통해 모든 사용자는 각 양식 컨트롤의 용도를 알 수 있습니다.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
for와 id 간의 연결을 통해 보조 기술 사용자가 정보를 사용할 수 있습니다. 또한
라벨의 아무 곳이나 클릭하면 연결된 요소에 포커스가 지정되고 컨트롤의 클릭 영역이 확장됩니다. 단지 유용한 방법이
마우스의 정확성이 떨어질 수 있으므로 수동기민성에 문제가 있는 사용자에게 광고를 게재할 수 있습니다. 라디오보다 손가락 너비가 넓은 모든 휴대기기 사용자에게
버튼을 클릭합니다.
이 코드 예에서 가짜 퀴즈의 모조 5번째 질문은 객관식 객관식 한 개 선택 질문입니다. 각 양식 컨트롤에는
각각 고유한 id를 가집니다. 실수로 ID가 중복되지 않도록 ID 값은 질문 번호와 값의 조합입니다.
라디오 버튼을 포함할 때 라벨이 라디오 버튼의 값을 설명하므로 <fieldset>에 동일한 이름의 버튼이 모두 포함됩니다.
여기서 <legend>는 전체 세트의 라벨 또는 질문이 됩니다.
기타 접근성 용도
접근성 및 사용성 측면에서 id를 사용하는 것은 라벨로 제한되지 않습니다. 텍스트 소개에서 <section>는
<h2>의 id를 <section>의 aria-labelledby 값으로 참조하여 지역 랜드마크로 변환하여
액세스 가능한 이름:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
접근성을 보장하는 데 사용할 수 있는 50개가 넘는 aria-* 상태와 속성이 있습니다. aria-labelledby, aria-describedby,
aria-details 및 aria-owns은 공백으로 구분된 id 참조 목록을 값으로 사용합니다. aria-activedescendant
현재 포커스가 설정된 하위 요소를 식별하고, 단일 요소의 단일 id 참조를 값으로 사용합니다.
(한 번에 한 요소에만 포커스를 둘 수 있음)
class
class 속성은 CSS (및 JavaScript)로 요소를 타겟팅하는 추가적인 방법을 제공하지만 다른 용도는 없습니다.
(프레임워크와 구성 요소 라이브러리에서 이를 사용할 수도 있음). 클래스 속성은 공백으로 구분된 목록을 값으로 사용합니다.
할 수 있습니다.
사운드 의미론적 구조를 구축하면 위치 및 기능에 따라 요소를 타겟팅할 수 있습니다. 사운드 구조 하위 요소 선택기, 관계형 선택기, 속성 선택기를 사용할 수 있습니다. 속성에 대해 알아보고 이 섹션 전반에서 동일한 속성 또는 속성 값을 가진 요소에 스타일을 지정하는 방법을 고려해 보세요. 그것은 당신이 클래스 속성을 사용하면 안 되며, 이는 대부분의 개발자가 종종 필요하지 않음을 깨닫는 것입니다.
지금까지 MLW는 어떤 클래스도 사용하지 않았습니다. 단일 클래스 이름 없이 사이트를 시작할 수 있나요? 한번 보시죠.
style
style 속성을 사용하면 인라인 스타일을 적용할 수 있습니다. 인라인 스타일은 속성이 설정된 단일 요소에 적용되는 스타일입니다.
style 속성은 CSS 속성 값 쌍을 값으로 가져오며, 값의 문법은
CSS 스타일 블록: CSS와 마찬가지로 속성 뒤에 콜론이 나오며 세미콜론은 각 선언의 끝부분에서 값 다음에 나옵니다.
스타일은 속성이 설정된 요소에만 적용되며, 설정되지 않은 경우 하위 요소는 상속된 속성 값을 상속합니다.
중첩된 요소, <style> 블록 또는 스타일 시트에서 다른 스타일 선언에 의해 재정의되었습니다. 값이
단일 스타일 블록은 해당 요소에만 적용되며, 생성된 콘텐츠에 사용하거나 키프레임 애니메이션을 만들거나
다른 at 규칙의 경우
style는 실제로 전역 속성이지만 사용하지 않는 것이 좋습니다. 대신 별도의 파일에서 스타일을 정의하세요.
즉, style 속성은 개발 중에 테스트 목적과 같이 빠른 스타일을 지정할 수 있도록 유용하게 사용할 수 있습니다. 그런 다음
'솔루션' 연결된 CSS 파일에 붙여넣습니다.
tabindex
tabindex 속성을 모든 요소에 추가하여 포커스를 받도록 할 수 있습니다. tabindex 값은
이 탭 순서에 추가되며, 선택적으로 기본이 아닌 탭 순서에 추가됩니다.
tabindex 속성은 정수를 값으로 사용합니다. 음수 값 (-1를 사용하는 규칙)은 요소가 다음을 가능하게 합니다.
포커스를 받지만(예: JavaScript 등을 통해) 탭 시퀀스에 요소를 추가하지는 않습니다. 0의 tabindex 값은
포커스 가능하고 탭을 통해 도달할 수 있는 요소로, 소스 코드 순서로 페이지의 기본 탭 순서에 추가합니다. 1의 값
이상은 요소를 우선순위가 지정된 포커스 시퀀스에 배치하므로 권장되지 않습니다.
이 페이지에는 <button> 역할을 하는 <share-action> 맞춤 요소를 사용하는 공유 기능이 있습니다. 0의 tabindex
이 포함됩니다.
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
button의 role는 스크린 리더 사용자에게 이 요소가 버튼처럼 작동해야 한다고 알립니다. JavaScript는
버튼 기능 약속이 유지됩니다. click 및 keydown 이벤트 처리와 Enter 및 Space 키 누름 처리 등이 포함됩니다.
양식 컨트롤, 링크, 버튼, 수정 가능한 콘텐츠 요소에 포커스를 맞출 수 있는 경우 키보드 사용자가 Tab 키를 누를 때
포커스는 tabindex="0"가 설정된 것처럼 다음 포커스 가능 요소로 이동합니다. 다른 요소는 기본적으로 포커스를 맞출 수 없습니다. tabindex 추가
속성을 해당 요소에 추가하면 포커스를 받지 않을 때 포커스를 받을 수 있습니다.
tabindex가 1 이상인 요소가 문서에 포함된 경우 별도의 탭 시퀀스에 포함됩니다. Codepen에서 알 수 있듯이
탭은 가장 낮은 값부터 가장 높은 값 순으로 별도의 순서로 시작된 다음 소스 순서로 일반 시퀀스로 진행됩니다.
탭 순서를 변경하면 사용자 경험이 매우 저하될 수 있습니다. 탐색 시 키보드와 스크린 리더 같은 보조 기술에 의존하기가 어렵습니다. 있습니다. 또한 개발자가 관리하고 유지하기도 어렵습니다. 집중이 중요합니다. 포커스와 포커스 순서를 다루는 전체 모듈이 있습니다.
role
role 속성은 ARIA 사양의 일부입니다.
HOWWG HMTL 사양보다 훨씬 더 정확합니다. role 속성은
콘텐츠에 의미론적 의미를 제공하여 스크린 리더가 사이트 사용자에게 객체의 예상 사용자 상호작용을 알릴 수 있도록 하는 데 사용됩니다.
몇 가지 일반적인 UI 위젯은 콤보박스,
메뉴 바, 탭 목록,
및 트리그리드가 있습니다.
예를 들어 탭으로 구분된 디자인 패턴을 생성할 때 tab, tablist 및
tabpanel 역할을 사용할 수 있습니다. 실제로 볼 수 있는 사람
사용자 인터페이스는 위젯을 탐색하고 연결된 탭을 클릭하여 여러 패널을 표시하는 방법을 경험으로 배웠습니다.
버튼 그룹을 사용하여 여러 패널을 표시할 때 <button role="tab">에 tab 역할을 포함하면 스크린 리더 사용자가 알 수 있습니다.
현재 포커스가 있는 <button>가 일반적인 버튼 같은 기능을 구현하는 대신 관련 패널을 뷰로 전환할 수 있습니다.
role 속성이 브라우저 동작을 변경하거나 키보드 또는 포인터 기기 상호작용을 변경하지 않으며 role="button"를 <span>에 추가합니다.
<button>로 변환하지 않습니다. 따라서 의미론적 HTML 요소를 원하는 용도로 사용하는 것이 좋습니다. 그러나
올바른 요소를 사용할 수 없는 경우 role 속성을 사용하면 시맨틱이 아닌 요소가 재구성되었을 때 스크린 리더 사용자에게 알릴 수 있음
의미론적 요소의 역할에 통합되어야 합니다.
contenteditable
contenteditable 속성이 true로 설정된 요소는 수정 가능하고, 포커스 가능하며, 마치 탭 순서에 추가됩니다.
tabindex="0"이(가) 설정되었습니다. Contenteditable는 true 및 false 값을 지원하는 열거형 속성이며 기본값은 inherit입니다.
속성이 없거나 잘못된 값이 있는 경우입니다.
이 세 개의 여는 태그는 동일합니다.
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
<style contenteditable="false">를 포함하면 요소를 수정할 수 없습니다 (<textarea>와 같이 기본적으로 수정 가능한 상태가 아닌 경우).
<style contenteditable="😀"> 또는 <style contenteditable="contenteditable">과 같이 값이 잘못된 경우 기본값은 inherit입니다.
상태 간에 전환하려면 HTMLElement.isContentEditable 읽기 전용 속성 값을 쿼리합니다.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
또는 editor.contentEditable를 true, false 또는 inherit로 설정하여 이 속성을 지정할 수 있습니다.
전역 속성은 <style> 요소를 비롯한 모든 요소에 적용할 수 있습니다. 속성과 약간의 CSS를 사용하여 실시간 CSS 편집기를 만들 수 있습니다.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
style의 color를 inherit이 아닌 다른 값으로 변경해 보세요. 그런 다음 style를 p 선택기로 변경해 보세요.
표시 속성을 삭제하지 마세요. 삭제 시 스타일 블록이 사라집니다.
커스텀 속성
지금까지는 HTML 전역 속성의 표면만 다뤘습니다. 하나 또는 제한된 요소 집합에만 적용되는 속성도 더 많이 있습니다. 수백 개의 정의된 속성이 있더라도 사양에 없는 속성이 필요할 수 있습니다. HTML을 사용해 보세요.
data- 프리픽스를 추가하여 원하는 맞춤 속성을 만들 수 있습니다. data-로 시작하는 모든 속성 이름을 지정할 수 있습니다.
그 뒤에 xml로 시작하지 않고 콜론 (:)을 포함하지 않는 일련의 소문자가 옵니다.
HTML은 관대하며 data로 시작하지 않는 지원되지 않는 속성을 만들거나
xml로 맞춤 속성을 설정하거나 :를 포함하는 경우 data-로 시작하는 유효한 맞춤 속성을 만들면 이점이 있습니다.
맞춤 데이터 속성을 사용하면 기존 속성 이름을 실수로 사용하는 일이 발생하지 않습니다. 커스텀 데이터 속성은 미래 경쟁력을 확보할 수 있습니다.
브라우저는 data- 접두사가 붙은 특정 속성의 기본 동작을 구현하지 않지만 기본 제공 데이터 세트 API가 있습니다.
맞춤 속성을 반복합니다. 맞춤 속성은 애플리케이션별 정보를 전달하는 훌륭한 방법입니다.
할 수 있습니다. data-name 형식으로 요소에 맞춤 속성을 추가하고 dataset[name]를 사용하여 DOM을 통해 속성에 액세스합니다.
를 지정해야 합니다.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
전체 속성 이름을 사용하여 getAttribute()를 사용하거나 더 간단한 dataset 속성을 활용할 수 있습니다.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
dataset 속성은 각 요소의 data- 속성의 DOMStringMap 객체를 반환합니다. 몇 가지 커스텀 속성이 있습니다.
<blockquote> 데이터 세트 속성을 사용하면 맞춤 속성에 액세스하기 위해 커스텀 속성이 무엇인지 알 필요가 없습니다.
이름 및 값:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
이 도움말의 속성은 전역적입니다. 즉, 모든 HTML 요소에 적용할 수 있습니다.
추가할 수 있습니다. 다음으로 소개 이미지에서 다루지 않은 두 가지 속성(target 및 href)을 살펴보겠습니다.
링크를 더 자세히 살펴보면서 다른 여러 요소별 속성을 살펴보겠습니다.
이해도 확인
속성에 관한 지식을 테스트합니다.
id는 문서 내에서 고유해야 합니다.
올바르게 구성된 맞춤 속성을 선택합니다.
data-birthdaybirthdaydata:birthday