1. 비표준 속성 다루기
자바스크립트로 HTML 태그를 다루다보면, 아래 예시와 같이 비표준 속성을 사용하게 되는 경우가 생긴다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<p>할 일 : <b field="title"></b></p>
<p>담당자 : <b field="manager"></b></p>
<p>상태 : <b field="status"></b></p>
<div>
상태 변경:
<button class="btn" status="대기중">대기중</button>
<button class="btn" status="진행중">진행중</button>
<button class="btn" status="완료">완료</button>
</div>
<script src="index.js"></script>
</body>
</html>/* css */
[status] {
padding: 5px 10px;
}
[status="대기중"] {
background-color: #FF6767;
color: #FFFFFF;
}
[status="진행중"] {
background-color: #5f62ff;
color: #FFFFFF;
}
[status="완료"] {
background-color: #07c456;
color: #FFFFFF;
}-
위 HTML 코드에서,
b태그들의field속성과button태그들의status속성은 비표준 속성이다. -
위 css 코드의
[속성이름]처럼, 대괄호를 이용하면 대괄호 안에 있는속성이름을 가진 태그들을 선택할 수 있으며,[속성이름="값"]처럼 작성하면 좀 더 구체적으로속성이름에 해당값을 가진 태그들을 선택할 수 있다.
그렇다면, 이러한 비표준 속성들은 어떻게 활용할 수 있을까?
1.1 비표준 속성 활용
1.1.1 선택자
아래 예시와 같이, querySelector로 태그를 선택할 떄, css 선택자를 활용해서 태그를 선택하는 데 사용이 가능하다.
const fields = document.querySelectorAll('[field]');
console.log(fields);
1.1.2 값을 표시할 태그 구분
비표준 속성은 객체 형태의 데이터가 있을 때, 각 property value들이 들어갈 태그를 구분하는 데 활용이 가능하다.
const fields = document.querySelectorAll('[field]');
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};
for (let tag of fields) {
const field = tag.getAttribute('field');
tag.textContent = task[field];
}
1.1.3 스타일이나 데이터 변경
getAttribute method를 활용해서 property value를 가져오고, setAttribute method를 활용해서 property value를 설정해주는 원리로, 이벤트를 통해 실시간으로 스타일을 변경하거나 데이터를 변경하는 데 활용할 수 있다.
때로는, class를 다루는 것보다 setAttribute로 비표준 속성을 변경하는 것이 스타일을 다루기에 더 편한 경우도 존재한다.
const fields = document.querySelectorAll('[field]');
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};
for (let tag of fields) {
const field = tag.getAttribute('field');
tag.textContent = task[field];
}
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
const status = btn.getAttribute('status');
btn.onclick = function () {
fields[2].textContent = status;
fields[2].setAttribute('status', status);
};
}
1.2 dataset property
HTML은 개발자들의 요구를 반영하기 위해 계속해서 발전하고 있는 언어이기 때문에, 비표준 속성을 사용해 코드를 작성했을 때, 시간이 지난 후, 그 속성이 표준으로 등록이 될 가능성이 있다는 문제점이 존재한다.
때문에, 비표준 속성을 사용하기 위해 미리 약속된 방식인, data-* 속성이 존재하며, data-로 시작하는 속성은 모두 dataset이라는 property에 저장된다.
위에서 언급했던 코드들을 아래와 같이 수정하면, 조금 더 안전하게 비표준 속성을 활용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<p>할 일 : <b data-field="title"></b></p>
<p>담당자 : <b data-field="manager"></b></p>
<p>상태 : <b data-field="status"></b></p>
<div>
상태 변경:
<button class="btn" data-status="대기중">대기중</button>
<button class="btn" data-status="진행중">진행중</button>
<button class="btn" data-status="완료">완료</button>
</div>
<script src="index.js"></script>
</body>
</html>/* css */
[data-status] {
padding: 5px 10px;
}
[data-status="대기중"] {
background-color: #FF6767;
color: #FFFFFF;
}
[data-status="진행중"] {
background-color: #5f62ff;
color: #FFFFFF;
}
[data-status="완료"] {
background-color: #07c456;
color: #FFFFFF;
}const fields = document.querySelectorAll('[data-field]');
const task = {
title: '코드 에디터 개발',
manager: 'CastleRing, Raccoon Lee',
status: '',
};
for (let tag of fields) {
const field = tag.dataset.field;
tag.textContent = task[field];
}
const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
const status = btn.dataset.status;
btn.onclick = function () {
fields[2].textContent = status;
fields[2].dataset.status = status;
};
}💡 비표준 속성을 반드시 활용해야만 하는 상황은 발생하지 않을 가능성이 크지만, 상황에 따라 비표준 속성을 활용하는 것이 더 효율적일 수 있기 때문에, 비표준 속성에 관한 내용들도 기억해두자.
