zoaseo
To Infinity And Beyond
zoaseo
전체 방문자
오늘
어제
  • 분류 전체보기 (760)
    • 개발이 좋아서 (378)
      • SAP가 좋아서 (0)
      • Java가 좋아서 (42)
      • Spring이 좋아서 (50)
      • JPA가 좋아서 (0)
      • QueryDSL이 좋아서 (26)
      • Docker가 좋아서 (7)
      • Redis가 좋아서 (7)
      • AWS가 좋아서 (5)
      • CI/CD가 좋아서 (6)
      • Troubleshooting이 좋아서 (4)
      • Kotlin이 좋아서 (7)
      • SQL이 좋아서 (6)
      • HTTP가 좋아서 (21)
      • JavaScript가 좋아서 (30)
      • TypeScript가 좋아서 (6)
      • Vue가 좋아서 (21)
      • Flutter가 좋아서 (61)
      • React가 좋아서 (20)
      • Redux(React)가 좋아서 (2)
      • Angular가 좋아서 (22)
      • HTML이 좋아서 (9)
      • CSS가 좋아서 (15)
      • PHP가 좋아서 (9)
      • Illustrator가 좋아서 (2)
    • 노력이 좋아서 (169)
    • 결과물이 좋아서 (14)
    • 코딩연습이 좋아서 (168)
      • 이론이 좋아서 (62)
      • SQL이 좋아서 (90)
    • 유용한 사이트가 좋아서 (28)
    • Github (2)

인기 글

티스토리

hELLO · Designed By 정상우.
zoaseo

To Infinity And Beyond

개발이 좋아서/HTML이 좋아서

html 커스텀 속성

2022. 5. 20. 09:31

data- 로 시작하는 속성을 정의

-> 자바스크립트에서는 dataset이라는 객체로 만듬

ex)

<div data-color='red' data-size='big'></div>

-> dataset={

    color: 'red',

    size: 'big',

}

-> div.dataset.color

-> div.dataset.size

ex)

<a href="">

<img src="">

<div>

    <button data-key='date' data-value='50'>50일</button>

    <button data-value='100'>100일</button>

    <button data-value='today'>오늘은</button>

</div>        

button.dataset

{

    key: date,

    value: 50,

}

'개발이 좋아서 > HTML이 좋아서' 카테고리의 다른 글

html - label 태그  (0) 2022.04.05
html - 변수 표기법  (0) 2022.04.05
html - ID, CLASS속성/ 요소 복제/ 넘버링/ 텍스트 {}/ 그룹핑/ 커스텀 속성  (0) 2022.04.05
html - 태그정리  (0) 2022.04.05
html - img, video  (0) 2022.04.05

    티스토리툴바