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

	}

}

댓글 쓰기