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

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...