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

Frontend

댓글 쓰기

You may also enjoy

pinia기본

May 05 2023

src/main.js ```js import { createPinia } from ‘pinia’;

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...