콘요맘떼 개발일지

attr( )을 활용하면 다른 attritube와 마찬가지로 data-attribute에 담긴 값을 가져올 수 있다. 그러나 이전에 data-attribute를 소개하는 포스트(링크)에서 해당 방법은 content를 제외한 경우에는 사용을 지양해야 한다고 언급했다. 분명 값은 가져올 수 있는데 왜 사용하면 안 된다고 하는 것일까? 문제의 원인은 attr( )가 가져오는 값은 string이라는 점이다. 따라서 content를 제외한 경우에는 값을 가져와도 쓸모가 없다. 예를 들어서 color을 지정해주기 위해서 "#FFFFFF"라는 값을 data-attribute로 전달해줘도 이것은 헥스 코드가 아닌 문자열로 인식되기 때문에 색상이 적용되지 못한다. 마찬가지로 10, 5px, 3rem, 100vw와 같은 ..

데이터 속성을 활용하면 자유롭게 HTML element에 추가적인 정보를 저장할 수 있다. HTML에서 사용하기 HTML element에 데이터 정보를 추가해주고 싶다면 data-로 시작하는 속성을 추가해주면 된다. data-로 시작하기만 하면 그 어떤 것도 상관없다. 자 이제 넣은 정보를 활용할 때이다. 물론 화면상으로는 보이지 않으면서 HTML 문서상으로만 무슨 정보를 추가하기 위해 데이터 속성을 활용할 수도 있지만 일반적으로 데이터 속성은 CSS 혹은 Javascript에서 활용하기 위해 등록된다. CSS 정말 마음대로 넣어주기는 했지만 데이터 속성도 엄연한 HTML 속성이다. 따라서 CSS에서도 접근할 수 있다. (1) 속성 선택자에서 활용하기 (2) Property Value에서 활용하기 att..