HTML data-* 속성
화면에 보이지는 않지만 데이터를 심어놓을 때 data-set 속성을 사용할 수 있습니다. data-set을 속성값에 입력해준 div 태그를 만들었습니다. 사용자에게 데이터를 보여주지 않으면서 속성에 데이터를 심어두고 필요할 때 마다 사용할 수 있습니다.
HTML 문법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>data-set</title>
</head>
<body>
<div id="user_name1" data-user="Bill" data-role="observser" data-user-id="101">Bill Gates</div>
<script>
const user_name = document.querySelector("#user_name1");
console.log(user_name.dataset.user);
console.log(user_name.dataset.role);
console.log(user_name.dataset.userId);
</script>
</body>
</html>
Javascript 문법
이제 속성에 추가된 data 속성들을 출력합니다. javascript에서 data-set 속성값들을 가져와 출력합니다. dataset 뒤의 속성들은 camelCase로 변경합니다. 예를 들어 data-user-id의 경우 userId로 변수 타입을 지정해서 javascript에서 가져올 수 있습니다.
const user_name = document.querySelector("#user_name1");
console.log(user_name.dataset.user);
console.log(user_name.dataset.role);
console.log(user_name.dataset.userId);
CSS 문법
data-* 속성은 CSS에서도 사용이 가능합니다. []로 속성을 묶어주고, 구체적인 data-* 속성을 지정해주면서 스타일 값을 변경할 수 있습니다.
// data-* 속성값으로 element 특정
#user_name1[data-columns='3']{
background-color: red;
}
data-* 문제점
크롤러는 data-* 속성의 데이터를 읽지 못합니다. 따라서 보여야만 하는 데이터 속성에서는 사용하지 않는게 맞습니다.
또한 Internet Explorer 11 이전 버전의 웹 브라우저에서는 data 속성을 지원하지 않습니다. 만약 이전 버전의 웹 브라우저를 사용한다면 getAttribute() 속성을 이용하셔야 합니다.
더 많은 콘텐츠
MySQL INDEX, VIEW 사용하는 방법
MySQL 인덱스(INDEX) 사용하기 인덱스(Index)는 테이블의 조회 속도를 올리기 위해 일부 칼럼의 데이터만을 빠르게 검색할 수 있는 자료구조 입니다. 테이블 내 특정 1개의 칼럼을 사용해서 인덱스 테
incomeplus.tistory.com
'Programming > JavaScript' 카테고리의 다른 글
| DOM 이란? (feat javascript CRUD) (0) | 2022.05.02 |
|---|---|
| Javascript String to Arrray 자바스크립트 문자열 배열 변환 방법 (0) | 2022.01.28 |
| JavaScipt 오버로딩 vs 오버라이딩 (0) | 2021.10.29 |
| JavaScript 프로토타임 체인이란? (0) | 2021.10.29 |
| JavaScript 객체 생성방식의 종류? (0) | 2021.10.29 |
| JavaScript 프로토타입이란 (0) | 2021.10.29 |
댓글