DOM 구조에 의존하지 않는 셀렉터를 사용하여 CSS를 관리가 하는 것이 중요하다.
1. attr 사용하기
<form id="join">
<input name="userId" />
<input name="pw" />
<input name="nickname" />
</form>이런 HTML 돔의 구조가 있다고 가정해보자.
#join {
[name="userId"] {
border: ! px solid #eee;
}
[name="pw"] {
border: ! px solid #0f0;
}
[name="nick"] {
border: ! px solid #ccc;
}
}attr으로 UserId, PassWord, Nickname 값 즉 데이터 값을 사용했다는 것을 인지해라!
DOM이 아닌 태그의 의미를 찾아서 selecting했다.
2. MICRODATA
웹 페이지의 기존 컨텐츠 내에 메타 데이터를 중첩하는 데 사용되는 표준 방식이다.
속성 예시
itemscope- 적용범위 설정
itemtype- 스키마 설정
itemid- 특정 id부여
itemprop- 속성명
content- 비가시적일 때 값을 설정
value- 가시적인 값이 원하는 값이 아닐때
해당 링크를 통해, 스키마를 참고하고 사용할 수 있다.
예시 코드
<div itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">홍길동</h1>
<p><img itemprop="photo" src="http://example.com/photo.jpg" alt="홍길동사진"></p> <a itemprop="url" href="http://hong.com/">홍길동은 누구인가</a>
</div>
MicroData를 사용하여서 DOM에 의미를 넣는다.
[itemtype$="Person"]{
[itemprop="name"] {border: 2px solid #eee;font-size:20px;}
[itemprop="photo"] {font-size:20px;line-height:14px}
[name="nick"] {border: 3px solid #ccc;}
}MicroData 값들을 활용하여 CSS(SaSS)코드를 작성한다.
이를 통해 디자인 유지 보수에 쉬으면서 동시에 의미도 부여할 수 있다.
중요한 것은 Attr를 DOM 구조에 영향받지 않도록 하는 것이다.
3. DATESET
데이터 속성을 사용하면 W3C표준을 통과한다.
<div data-type="http://data-vocabulary.org/Person">
<h1 data-name="name">홍길동</h1>
<p><img data-name="photo" src="http://example.com/photo.jpg" alt="홍길동사진"></p> <a data-description="url" href="http://hong.com/">홍길동은 누구인가</a>
</div>또한, 자바스크립트 상에서도 활용 가능다.
예시
console.log(div.dataset.name)예시
//html 코드
<body>
<h1 data-name>Code Spitz72 - member</h1>
<table>
<thead>
<th> </th>
<th>018</th>
<th>12</th>
<th>2%}</th>
<th>37}</th>
<th>H2</th>
</thead>
<tr data-id="1">
<td>1</td>
<td_data-name=" 0 9 ">015 </td> <td data-1=" on"> 4</td>
<td data-2="on"> </td>
<td data-3="on"> 4</td>
<td></td>
</tr>
<tr data-id="22">
<td>22</td>
<td data-name="Suho Lee">Suho Lee</td>
<td data-1="on"> 4</td>
<td data-2="on"> 4</td>
<td data-3="on">
</tr>
*</td>
<td></td>
<tr data-id="36">
<td>36</td>
<td data-name="Beom Yeon Andrew Kim">Beom Yeon Andrew Kim</td>
<td data-1="on"> </td>
<td data-2="off">2.</td>
<td data-3="off">2.</td>
<td></td>
</tr>
<tr data-id="7">
<td>7</td>
<td data-name="HoHoon Lee">HoHoon Lee</td>
<td data-1="off">244</td>
<td data-2="off"> 4</td>
<td data-3="off">2.</td>
<td></td>
</tr>
</table>
<footer>
<div data-license>MIT</div>
<div data-publisher>Bsidesoft co.</div>
...//SaSS 코드
[data-1="on"],[data-2="on"],[data-3="on"] { color: green}
[data-1="off"],[data-2="off"],[data-3="off"] { color: red}
[data-1="on"]+[data-2="on"]+[data-3="on"]+td { background: green}
[data-1="off"]+[data-2="off"]+[data-3="off"]+td { background: red}class와 id는 의미보다는 디자인을 위해 사용해라!
참고
특성 선택자-Attr
이왕 사는거 넓은 주방을 가지는 성공하는 삶을 살고 싶습니다.