728x90
HTML5 Data-* 속성 Data Attribute
HTML5에서 data-* 속성 은근 사용 빈도가 높다.
data-* 속성은 거두절미하고
태그에 간략한 데이터를 저장하는 것이다.
HTML5 이전에는 Html 문서 내에
데이터를 저장하기위해
태그를 안보이게하고 해당 태그에
밸류값을 넣어놓고 사용하는 등
여러가지 핵스러운 방법이 동원되었는데,
data-*속성을 사용하면
간결한 코드에 유지보수가 용이해지고
자바스크립트를 통한 데이터 접근이 간단해진다.
사용 방법은 아래와 같이 간단하다.
HTML 태그 내 데이터 속성 사용
<태그 data-원하는이름="값"></태그>
Javascript에서 데이터 추출
const element = document.querySelector('...');
const data = element.dataset.데이터속성이름('data-'제외);
샘플예제
샘플예제 : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5 Data-* Attribute Example</title>
</head>
<body>
<section class="main">
<div class="box" data-index="1" data-text="Hi" data-text-align="center" data-line-height="100px"></div>
<div class="box" data-index="2" data-text="Hello" data-text-align="center" data-line-height="100px"></div>
<div class="box" data-index="3" data-text="Goodbye" data-text-align="center" data-line-height="100px"></div>
</section>
</body>
</html>
샘플예제 : CSS
.main > .box {
width: 100px;
height : 100px;
margin-bottom : 10px;
}
.box[data-index="1"] {
background : royalblue;
}
.box[data-index="2"] {
background : lightgreen;
}
.box[data-index="3"] {
background : yellow;
}
샘플예제 : JAVASCRIPT
const box1 = document.querySelector('.box[data-index="1"]');
const box2 = document.querySelector('.box[data-index="2"]');
const box3 = document.querySelector('.box[data-index="3"]');
box1.innerText = box1.dataset.text;
box2.innerText = box2.dataset.text;
box3.innerText = box3.dataset.text;
box1.style.textAlign = box1.dataset.textAlign;
box2.style.textAlign = box1.dataset.textAlign;
box3.style.textAlign = box1.dataset.textAlign;
box1.style.lineHeight = box1.dataset.lineHeight;
box2.style.lineHeight = box1.dataset.lineHeight;
box3.style.lineHeight = box1.dataset.lineHeight;728x90
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] 볼륨 조절 효과 만들기 feat. input type="range" (0) | 2021.08.14 |
|---|---|
| [HTML / Favicon] 파비콘 만들기 및 적용 방법! (브라우저 탭아이콘) (1) | 2021.06.09 |
| [Html] 시멘틱 태그 semantic tag (0) | 2021.02.06 |
| [Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element (0) | 2021.02.03 |
댓글