[TIL] 0203

코드 스피츠 스터디 - Semantic Web & Semantic Selector

Semantic Web

• 기계에게 친화적인 웹
• 데이터베이스화 시키기 좋은 웹
• 검색 엔진이 유의미한 것을 추출해서 다양하고 유효한 검색결과를 만들어내게끔하기 위해
  Semantic하게 html문서를 짜야한다

시맨틱 웹에서 css를 어떻게 사용하면 좋은가?

• 보통 selector사용 시 dom의 구조에 밀접하게 선택하려한다(자식 선택자 등등)
• css는 의미와 무관하다
• selector는 의미(Dom)와 스타일(css)을 연결한다
• selector어떻게 사용하냐에 따라서 유지보수나 의미-스타일간 연결이 잘 되는지를 결정할 수 있다

돔의 구조에서 벗어나는 semantic selector의 종류
1. selector를 오직 class만 쓴다 (특정 돔을 기준으로 구조를 의존해 선택하는 선택자들을 피한다)
2. 돔구조에 영향을 받지 않을 semantic selector를 찾는다 (sql의 원리와 비슷)

• attribute selector
  • 태그에서 진짜 의미를 갖는 것을 골라 selector로 사용하는 것이 핵심
• HTML5 MicroData
  • 기존 태그 속성 보다 더욱 더 시맨틱하게 사용할 수 있는 표준 속성
• Data Set
  • 표준적인 커스텀 속성
  • data로 시작
  • -로 단어 분리
  • js에서도 dataset이라는 프로퍼티로 사용할 수 있다

html에서 class사용 권장하지 않음

• 디자인적인 니즈와 의미론적인 니즈가 다르다
• id와 class는 디자인을 위해 비워둔다(class=’black_theme’)
• 나머지 data속성을 의미를 위해 사용한다
  • 안변하니까
  • 문서구조에 대한 것
  • 기본 구조나 레이아웃에 대한 스타일 지정 시 사용한다

MonthSub Refactoring

• atom단위 컴포넌트 리팩토링 및 스토리북 등록

---

오늘 코드스피츠 강의에서는 아주아주 유용한 것을 배웠다.
css를 짤 때 돔 구조에 의존적이게 짤 수 밖에 없다고 생각했는데 그렇게 됐을 경우
html, css 둘 중 어느것도 함부로 수정할 수 없다는 것에 공감갔고, 잘못된 방식이라는 것을 알았다.
앞으로 스타일적 요소는 제외하고 주로 태그 기본 속성과 Data Set속성으로 선택자를 이용해야겠다고 생각했다.

스토리북 리팩토링을 시작하고부터 많은 컴포넌트를 다시 수정했다.
컴포넌트만 리팩토링할 때보다 고칠 점이 더 잘 보였다.
스토리북에 등록하려면 컴포넌트를 잘 짜야한다는 것을 느꼈다.