같은 조건의 요소에 색 혹은 백그라운드만 변경하고 싶을 때, 선택자를 이용해 따로 클래스를 지정하거나 혹은 nth-child로 지정하곤 한다. 그런데 지정하는 수가 두 세개 쯤이라면 상관이 없겠다만 그 이상이라면? 게다가 수정을 해야하는 상황이라면..?
이럴 때 필요한 것이 사용자 정의 속성! 선택자로 따로 지정하지 않아도 저장한 값을 불러오기만 하면 된다.
1. HTML 데이터 속성 attr
HTML 태그는 태그의 선언과 속성들로 구성된다. 이 때 태그의 속성(attribute)이라는 것은 현대 태그에 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)이다. - 출처 즉, attr, HTML 데이터 속성은 화면에 안보이게 글이나 추가 정보를 앨리먼트에 담아 놓을 수 있는 방법이다.
사용방법
- 어트리뷰트 이름은 아무렇게나 지어도 되지만, 보통
data-뭐뭐형태로 작명.<html> <nav> <a href="#link" class="menu" data-text="메일"></a> <a href="#link" class="menu" data-text="뉴스"></a> <a href="#link" class="menu" data-text="지도"></a> </nav> </html>
- css에서 활용할 때
<style> /* 내부에서 활용하고 싶을 때, 가상클래스 활용, attr()로 불러오면 된다 */ .menu::before { content: attr(data-text); } /* 선택자로도 활용 가능 */ a[data-text="메일"] {} </style>활용예시 )
data-text=""에 각 메뉴를 넣어두고 가상클래스::before,::after로 불러와 포지션 조정한 것
- jquery에서 활용할 때
<script> //attr('')로 불러올 수 있다. 아래는 메뉴에 마우스오버됐을 때 attr 불러오게 한 예시 $('nav li').mouseenter(function(){ var changeImage = $(this).attr('data-image') $('.photo').css({ 'background-image' : 'url('+ changeImage +')' }) }) </script>활용예시 )
li엔
data-image=""에 각 백그라운드 경로를 넣어두고 jquery로 불러오고, a엔data-text=""에 각 메뉴 이름을 넣어::before로 불러와 포지션 조정한 것
2. CSS 사용자 지정 속성 var
attr와 비슷한 개념으로는 CSS변수가 있다. CSS를 작성하다보면 중복되는 속성값을 작성하는 상황을 자주 겪을 것인데, 이런 상황에서 중복되는 값을 여타 프로그래밍 언어처럼 변수처럼 사용자 지정 속성(변수)에 값을 저장해서 CSS속성 값으로 사용할 수 있는것이다. - 출처
사용방법
변수명 앞에는 --를 붙여야 하고, var()로 감싸서 CSS 내에서 변수를 사용할 수 있다.
<style> body { background-color: var(--color); } </style>
- 중복되는 속성은 최상위 클래스
:root에서 변수를 선언하여 사용<style> :root { --color: purple; --size: 12px; } h1 { color: var(--color); } li:hover, button { background-color: var(--color); font-size: var(--size); } </style> <body> <h1>타이틀</h1> <ul> <li>컨텐츠 내용1</li> <li>컨텐츠 내용2</li> </ul> <button>버튼</button> </body>이렇게 공통적으로 겹치는 속성일 때 사용하면 유용하다. 수정시 root에 선언한 값만 조정하면 되니까.
- attr처럼 사용하고 싶다면 HTML에서 변수를 선언하여 사용
<style> .card { width: 300px; height: 400px; background-color: var(--color); } </style> <body> <div class="card" style="--color:cadetblue;"></div> <div class="card" style="--color:hotpink;"></div> <div class="card" style="--color:royalblue;"></div> </body>활용예시 )
div에 각각 다른 컬러를 변수
style="--color:"에 저장한 후 타이틀과 버튼에 불러온 것
