HTML의 data attributes는 HTML5에서만 가능하다.
기본 구조
data-이름
/* <div data-display-name="chan"></div> */
-
html에서의 속성추가
<div data-index="1" data-display-name="chan"></div> <div data-index="2" data-display-name="young"></div>
-
CSS에서 적용
div{ width:200px; height:200px; background-color: tomato; margin-bottom: 50px; } [data-display-name='chan']{ background-color: brown; }
-
Output
-
-
Javascript에서의 응용
<script> const chan = document.querySelector('div[data-display-name="chan"]') /*div[data-display-name="chan"] : data-display-name="chan"인애들 중 div태그만*/ console.log(chan.dataset) console.log(chan.dataset.index) </script>
-
Console
[object DOMStringMap] { displayName: "chan", index: "1" } 1
display_name이 아니라 카멜방식인 displayName으로 나온다.
-
-
주의
코드내 root 수정은 다음과 같이 @media에서만 정할 수 있다.
:root{
--font-size:32px
}
@media screen and (max-width:768px){
:root{
--font-size:7px
}
}
HTML
👉 마크다운과 html에서 텍스트 정렬
2022.05.24
👉 마크다운과 html 에서 이미지 정렬
2021.05.07
👉 Markup(html)을 사용한 특수문자 --- 제목
2021.05.05
👉 HTML5 Data 속성
2021.04.03
👉 HTML의 다양한 태그
2021.04.02
👉 Visual studio code의 유용한 툴
2021.04.01
👉 HTML 기초
2021.04.01
Frontend
👉 pinia기본
2023.05.05
👉 github pages에서 vue router 404 에러
2023.04.03
👉 object의 변수인 경우 ref와 reactive 어느 것을 사용할까
2023.04.02
👉 Route
2023.04.01
👉 Template ref
2023.03.26
👉 provide와 inject
2023.03.25
👉 slots
2023.03.24
👉 nonProps
2023.03.23
👉 v-model을 통한 3depth 양방향 바인딩
2023.03.22
👉 emit, component와 v-model을 통한 양방향 바인딩
2023.03.21
👉 props
2023.03.20
👉 watch
2023.03.19
👉 양방향 바인딩
2023.03.18
👉 event Parameter
2023.03.17
👉 Scope와 Closure
2023.03.17
👉 classStyleBinding
2023.03.16
👉 computed
2023.03.15
👉 Ref와 Reactive
2023.03.14
👉 notion page를 웹사이트에 삽입하기
2022.01.25
👉 간단한 반응형 메뉴갖는 웹 만들기
2021.08.04
👉 Json
2021.04.16
👉 Javascript 배열
2021.04.15
👉 Javascript 객체
2021.04.14
👉 Javascript 클래스
2021.04.13
👉 Javascript 함수
2021.04.12
👉 Javascript 변수심화
2021.04.11
👉 Javascript 변수
2021.04.10
👉 CSS Centering
2021.04.09
👉 CSS flexbox
2021.04.08
👉 CSS 변수
2021.04.07
👉 CSS Size
2021.04.06
👉 CSS layout
2021.04.05
👉 CSS 기본
2021.04.04
👉 HTML5 Data 속성
2021.04.03
👉 HTML의 다양한 태그
2021.04.02
👉 Visual studio code의 유용한 툴
2021.04.01
👉 HTML 기초
2021.04.01
댓글 쓰기