CSS: Semantic하게 CSS 관리 하는 법

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 - 가시적인 값이 원하는 값이 아닐때

https://schema.org/WebPage

해당 링크를 통해, 스키마를 참고하고 사용할 수 있다.

예시 코드

<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

출처
코드 스피츠 강의
https://webdir.tistory.com/92

Author And Source

이 문제에 관하여(CSS: Semantic하게 CSS 관리 하는 법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@song_lego/CSS-Segmantic-하게-css-관리-하는-법

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)