CodeSpitz - Semantic Web & CSS Query

티스토리 뷰

HTML & CSS

CodeSpitz - Semantic Web & CSS Query

_Bibidi 2021. 12. 20. 16:58

[ Semantic Web ]

semantic web에서 어떻게 CSS를 어떻게 쿼리처럼 쓰는가에 대한 문제

Semantic Web : 의미론적 웹. HTML 태그를 화면에 보이는 요소를 구성하기 위해서가 아니라 하나의 문서로서 의미를 갖도록 tagging하자는 개념, 철학.

HTML은 의미론적으로 작성하고 화면에 보이는 모양만 CSS로 조정하는 전략을 사용함.

검색 엔진이 HTML 문서를 읽어들였을 때 마치 데이터베이스처럼 문서로부터 유의미한 것들을 추출해서 다양한 검색 결과를 만들어내게끔 머신에 친화적인 문서를 만들자.

하나의 문서를 데이터베이스처럼 잘 조직화해서 필요한 속성들을 잘 넣어가지고 필요한 태그를 잘 만들어가자.

이걸 지키기 위해선 줄을 나누기 위해 div나 p 태그를 함부로 쓰는 것을 허용하면 안 된다. 또 장식 같은 것을 넣기 위해서 이미지 태그를 쓴다던지 구분점을 넣기 위해 div를 쓴다던지 레이아웃을 잡기 위해 쓸데없이 태그를 추가하지 않는다.

HTML을 작성할 때 이게 화면에 어떻게 보일지를 잊어버리고 이게 그냥 순수한 워드라는 문서라고 했을 때 어떻게 태깅이 되어 있어야 하는지를 고려해 보는 것

HTML5에는 태그만으로는 모든 의미를 다 커버할 수 없다. 거기를 더 추가적으로 처리할 수 있는 HTML5 스펙들이 발표가 된다.

DOM - 더 이상 화면의 구성 요소로 DOM을 평가할 수 없다. DOM의 순서와 무관하게 요소들이 화면에 배치될 수 있기 때문이다.

CSS Selector - 그러나 CSS selector를 사용할 때는 보통 DOM의 구조에 밀접하게 해서 만드려고 한다. 굉장히 보이는 모양에 관련된 selector를 사용하는 것이 문제가 된다. 의미론에 입문하는 사람이 처음 선택하는 것이 .class 구문으로 의미를 부여하려고 한다. 이렇게 하다 보면 태그에 다 클래스로 의미를 부여하게 된다. 그런데 class명을 준 것을 semantic web이라 하지 않는다.

CSS - 그에 비해서 CSS 자체의 특성은 완전히 의미와는 무관한 property로 되어 있다. 대부분 다 그래픽스 렌더링 엔진과 관련된 명령들이다. DOM과 CSS를 연결해 주는 것이 selector인데, selector를 어떻게 작성하느냐에 따라서 DOM과 CSS가 유기적으로 연결되느냐, 유지 보수가 쉽게 되느냐 안 되느냐가 결정된다. CSS Selector를 잘못 배워서 발생하는 문제들이 많다. selector를 잘못 작성해서 의미론적인 DOM을 건들 수 없게 된다.

문제점

1. DOM을 스타일에 맞춰 제작

2. 태그의 변화가 스타일을 깨먹음

유지보수 불가능한 HTML과 CSS => CSS 때문에 유지 보수가 불가능한 상황이 온다. selector가 현재 DOM 구조와 과하게 binding 되어 있어서 그렇다.

해결법

Semantic Selector : selector를 semantic하게 사용하면 된다.

1. 가장 간단한 방법이 selector를 오직 클래스로만 사용하는 것. 그것만으로도 사이트 개편이 된다.

2. CSS Attirubte Selector 사용. []를 이용하여 선택한다. attribute를 기반으로 element를 선택할 수 있게 해주는 스펙이다.

CSS Attribute Selector

[attr] - 속성이 존재함

[attr=val] - 값과 일치

[attr~=val] - 공백으로 구분된 단어로 포함되면 일치

[attr|=val] - 일치하거나 뒤에 -가 붙을 때

[attr*=val] - 값이 포함될 때

[attr^=val] - 값으로 시작할 때

[attr$=val] - 값으로 끝날 때

[(ex) i] - 대소문자 구분 안 함

* Reference : https://drafts.csswg.org/selectors-3/#attribute-selectors

Query Style Selector : table에서 select하는 것처럼 query를 사용하자.

select * from table where field conditions..

base selector[field conditions][..][..],,

<form id="join">
  <input type="text" name"userid" />
  <input type="password" name-"pw" />
  <input type="text" name="nickname" />
</form>

/* Only CSS Ver */
#join [name="userid"] { border: 1px solid #f00 }
#join [name="pw"] { border: 1px solid #0f0 }
#join [name="nick"] { border: 1px solid #00f }

/^ SASS ver */
#join {
  [name="userid"] { border: 1px solid #f00 }
  [name="pw"] { border: 1px solid #0f0 }
  [name="nick"] { border: 1px solid #00f }
}

여기서 name 속성은 태그에서 변하지 않는 요소이다. 왜냐하면 데이터 상으로 의미가 name에 걸려 있기 때문이다. 데이터 구조에 근거한 selecting이기 때문에 아무리 디자인 개편을 해도 바뀔 일이 없다. 이건 단순히 속성 선택자를 사용한다고 semantic이 되는 것이 아니다. 속성 선택자로 무엇을 골랐냐가 제일 중요하다. 서버랑 JSON API나 requery API가 합의된 이상 안 바뀔 속성이라는 점이 중요하다. DOM의 구조나 디자인에 따라 바뀌지 않을 녀석들이다. 그런 것들을 선택해야 semantic이 되는 것이다.

SASS를 이용하면 CSS의 중복 코드를 많이 줄일 수 있다. 그러니 되도록이면 SASS를 쓰는 습관을 들여야 한다.

HTML을 작성할 때 그림을 그린다고 생각하지 말고 데이터를 생산한다는 마음가짐으로 작성해야 한다.

HTML5 MicroData

itemscope - 적용 범위 설정

itemtype - 스키마 설정

itemid - 특정 id 부여

itemprop - 속성명

content - 비가시적일 때 값을 설정

value - 가시적인 값이 원하는 값이 아닐 때

itemref - scope 계층 구조 안에 없을 때

* Reference : https://html.spec.whatwg.org/multipage/

schema.org

itemscope, itemtype에 대해 데이터 구조(=스키마)를 공유하기 위해 만든 사이트. 검색 엔진은 이런 표준화 되어있는 스키마를 다 알고 있기 때문에 이런 것들을 기준으로 하면 훨씬 더 쉽게 formatting이 된다.

* Reference

1. http://schema.org/WebPage

2. http://schema.org/BreadcrumbList

3. http://schema.org/CollegeOrUniversity

<body itemscope itemtype="http://schema.org/WebPage">
  <h1 itemprop="name">CodeSpitz76 - 5</h1>
  <nav itemprop="breadcrumb">Home</nav>
  <p itemprop="description">
    코드스피츠76 5회차 수업은 css를 쿼리화하여 사용하는 방법을 다룹니다.
  </p>
  <ul>
    <li itemprop="mainEntity" itemscope itemtype="http://schema.org/CollegeOrUniversity">
      <h2> itemprop="name">HTML5 MicroData</h2>
      <p itemprop="description">마이크로데이터에 대한 개념과 예제</p>
    </li>
    <li itemprop="mainEntity" itemscope itemtype="http://schema.org/CollegeOrUniversity">
      <h2> itemprop="name">HTML5 DataSet</h2>
      <p itemprop="description">데이터셋에 대한 개념과 예제</p>
    </li>
  </ul>
  <footer>
    <div itemprop="license">MIT</div>
    <div itemprop="publisher">Bsidesoft co.</div>
  </footer>
</body>

[itemtype$="WebPage"] {
  [itemprop="name"] { font-size:20px; padding:0; margin:10px 0; }
  [itemprop="breadcrumb"] { font-size:11px; margin:0 10px color:#234A7F; }
  [itemprop="description"] { font-size:14px; line-height:20px; color:#444; }
  ul { list-style:none; padding:0; }
  [itemprop="mainEntity"] { padding:0 20px; margin:10px; border:1px solid #999; border-radius:20px }
  [itemprop="license"] { font-size:11px; color:#999; }
  [itemprop="publisher"] { font-size:12px; font-weight:bold; font-family:sans-serif; }
}

[itemtype="CollegeOrUniversity"] {
  [itemprop="name"] { font-size:15px; }
  [itemprop="description"] { font-size:12px; line-height:15px; }
}

이런 방식으로 작성하면 DOM의 구조를 바꾸든 사이트 디자인 개편을 하든 안 바뀐다. nav은 항상 nav이고 name도 문서인 이상 h1 태그가 아니더라도 항상 name이란 속성을 가지고 있어야 한다. license도 어딘가에 반드시 license가 있어야 하고 publisher도 반드시 어딘가에서 publisher여야 한다.

HTML5 Dataset

커스텀 속성을 위한 속성 확장자이다. 커스텀 속성을 사용하더라도 w3c value data를 통과시킬 수 있다. 값이 없는 선언도

- 이름을 -를 이용해 계속 이을 수 있고 조회할 땐 camelcase를 이용하면 된다.

- 값이 없는 선언 형태도 표준으로 인정하고 있다. 이를 이용하면 코딩 양이 줄어든다.

- CSS attribute selector로 찾을 수 있다.

* HTML에서 속성은 모두 소문자로 적용된다. 그래서 -를 이용해 띄워쓰기를 한다.

* Reference : https://www.w3.org/TR/html5/dom.html#dom-dataset

<div data-id="hika"></div>
console.log(div.dataset.id); // hika

<div data-member-id="k0123"></div>
console.log(div.dataset.memberId); // k0123

<body data-type="http://schema.org/WebPage">
  <h1 data-name>CodeSpitz76 - 5</h1>
  <nav data-breadcrumb>Home</nav>
  <p data-description>
    코드스피츠76 5회차 수업은 css를 쿼리화하여 사용하는 방법을 다룹니다.
  </p>
  <ul>
    <li data-mainEntity data-type="http://schema.org/CollegeOrUniversity">
      <h2 data-name>HTML5 MicroData</h2>
      <p data-description>마이크로데이터에 대한 개념과 예제</p>
    </li>
    <li data-mainEntity data-type="http://schema.org/CollegeOrUniversity">
      <h2 data-name>HTML5 DataSet</h2>
      <p data-description>데이터셋에 대한 개념과 예제</p>
    </li>
  </ul>
  <footer>
    <div data-license>MIT</div>
    <div data-publisher>Bsidesoft co.</div>
  </footer>
</body>

[data-type$="WebPage"] {
  color:#900;
  [data-name] { font-size:20px; padding:0; margin:10px 0; }
  [data-breadcrumb] { font-size:11px; margin:0 10px color:#234A7F; }
  [data-description] { font-size:14px; line-height:20px; color:#444; }
  ul { list-style:none; padding:0; }
  [data-mainEntity] { padding:0 20px; margin:10px; border:1px solid #999; border-radius:20px }
  [data-license] { font-size:11px; color:#999; }
  [data-publisher] { font-size:12px; font-weight:bold; font-family:sans-serif; }
}

[data-type$="CollegeOrUniversity"] {
  [data-name] { font-size:15px; }
  [data-description] { font-size:12px; line-height:15px; }
}

이러면 부담이 조금 많이 줄어들게 된다. 회사에서 약속한 format으로 기술하면 되니까 굳이 schema.org를 찾아 들어가서 하나 하나 공부하지 않아도 된다.

앞으로 HTML이든 CSS든 id와 class를 의미론으로 사용하지 말고 디자인을 위해서 비워둔다. id, class는 굉장히 유동적이고 일반적인 디자이너가 선호하는 selector이기 때문이다.

selector도 굉장히 간단해졌다.

selector를 사용하는 전략은 간단하다. 의미론적이고 이런 거 다 떠나서 생명력이 길게 가고 유지 보수에 강한 selector가 무엇인가 고민해 봐야 된다. semantic web 기반으로 selector를 작성하는 것은 그러한 요령 중 하나일뿐이다.

[ ]

<body>
  <h1 data-name>CodeSpitz72 - member</h1>
  <table>
    <thead><th>번호</th><th>이름</th><th>1강</th><th>2강</th><th>3강</th><th>개근</th></thead>

    <tr data-id="1"><td>1</td><td data-name="이도형">이도형</td>
      <td data-1="on">출석</td><td data-2="on">출석</td><td data-3="on">출석</td><td></td>
    </tr>

    <tr data-id="22"><td>22</td><td data-name="Suho Lee">Suho Lee</td>
      <td data-1="on">출석</td><td data-2="on">출석</td><td data-3="off">결석</td><td></td>
    </tr>

    <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">결석</td><td data-3="off">결석</td><td></td>
    </tr>

    <tr data-id="7"><td>7</td><td data-name="HoHoon Lee">HoHoon Lee</td>
      <td data-1="off">결석</td><td data-2="off">결석</td><td data-3="off">결석</td><td></td>
    </tr>
  </table>
</body>

[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-color: green; }
[data-1="off"]+[data-2="off"]+[data-3="off"]+td { background-color: red; }

@for $i from 1 through 3 {
  $ret: "";
  @for $j from 1 through 3 {
    @if $j == $i {
      $ret: $ret + '[data-' + $h + '="on"]';
    } @else {
      $ret: $ret + '[data-' + $j + '="off"]';
    }
    $ret: $ret + '+';
  }
  $ret: $ret + 'td';
  #{$ret} {background: yellow};
}

'+'는 sibling을 의미한다. 3, 4번째 줄 코드는 이러한 sibling들의 다음 td의 background color를 정한다. CSS로 많은 것을 커버하면 자바스크립트 의존성이 낮아져 프로그래밍 오류가 날 가능성이 적고 프로그램이 깨져도 화면만 깨지지 프레임 전체는 깨지지 않을 가능성이 크다. 정적으로 케어할 수 있는 건 정적으로 케어하는 것이 좋다. CSS의 경우 코드가 많아도 이미지 한 장보다는 적다. 이미지는 한 장만 해도 1mb를 훌쩍 넘는다. 코드는 정말 많아봐야 5k, 10k 정도이다. 파싱 과정도 거의 없다. 로딩하면 바로 화면에 뿌린다. 늦게 로딩되어도 스타일이 늦게 먹는 것뿐이다.

'HTML & CSS' 카테고리의 다른 글

CodeSpitz - Display Model (0)	2021.12.20
CodeSpitz - Transform 3D & SCSS & Compass (0)	2021.12.20
CodeSpitz - CSSOM & Vendor Prefix (0)	2021.12.20
CodeSpitz - CSS Box Model (0)	2021.12.20
CodeSpitz - Graphics System & Normal Flow (0)	2021.11.09

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

티스토리 뷰