.아빠-엄마 {
  margin: 0;
  padding: 0;
  background: skyblue;
}
.아빠-엄마__자식 {
  background: inherit;
}
.아빠-엄마__자식:last-child {
  font-weight: lighter;
  font-size: small;
}
.아빠-엄마__자식--예쁜-딸래미 {
  color: pink;
}
.아빠-엄마__자식--개구쟁이-막내 {
  color: tan;
  transform: skewX(30deg);
}

여기서 개구쟁이 막내는 특별하게 .아빠-엄마__자식--개구쟁이-막내란 class를 따로 지정해 줄 필요 없이 CSS pseudo-class인 :last-child만 써서 처리해 줄 수도 있었지만, 워낙 개구쟁이라 어쩔 수 없었다는 소문이…

추가 참고 문서:

• Scalable and Modular Architecture for CSS
• ‘Scope’ in CSS
• Using Encapsulation In CSS

아직 완벽하지 못 하다고 생각돼서 다른 이의 시선을 의식해서 자꾸 움츠러들고 머뭇거리는 것이 어리석은 짓이라는 것은 알지만, 그 진실함과 진정성을 품을 수 있게 하는 대상을 찾아, 다른 사람과 함께 공유하기란 정말로 어렵고 힘든 일이다.

완벽해질 필요도, 또 그렇게 될 수도 없다는 것을 알지만, 우연히 발견한 글귀를 읽고서 갑자기 불편해진 마음이 지금 나의 솔직한 심정이다.

 없음.

HTML5에선 근래에 그 쓰임새가 더욱 다양해진 여러 형태의 웹 문서나 웹 애플리케이션의 사용 패턴에 부응하려고 기존 elements의 확장 개념으로 좀 더 명확한 구조적/의미론적 정의를 부여하는 새로운 elements가 추가되었다.

그래서 그 쓰임새에 맞는 적절한 elements를 가지고 HTML 문서를 작성하면, 저자가 의도한 대로 그 의미가 제대로 전달되면서 더불어 다양한 웹 접속 장비에서의 해석도 훨씬 수월해지기 마련이다.

문제는, 웹 브라우저가 새로운 elements에 대응하는 Accessibility APIs를 아직 제대로 적용하지 못하고 있는 실정이다. 결국 웹 접근성을 고려해서 WAI-ARIA에 근거한 적당한 ARIA landmark role을 직접 지정해 주어야 하는데, 마침 W3C에서 HTML을 작성할 때 WAI-ARIA를 올바로 구현하는 법에 대한 안내 문서(W3C Editor’s Draft )를 공개하였다.

이 문서에서 ARIA role을 적용해야만 하는 HTML5 elements와 해당 element에 지정해 주어야 하는 기본 ARIA role을 간추리면 다음과 같다.
ARIA role을 적용해야만 하는 HTML5 elements(이)란 제목의 글 마저 읽기 →

CSS를 작성하다보면 스타일 정의 갯수가 증가함에 따라 주의를 한다고 해도 분명 얘기치 않게 중복된 스타일 선언을 하기 마련이다. 물론 나중에 최적화 과정에서 CSS 파일을 minimize 하게 되면 파일 크기에 큰 영향을 끼치진 않겠지만, 나중에 관리적인 측면에서 불필요하게 덤으로 정의된 스타일은 상당히 귀찮아질 수가 있다.

csscss는 이렇게 CSS 파일을 해석해서 덤으로 중복되게 정의된 스타일 선언을 꼭 집어서 보여주는 도구인데, Ruby gem으로 배포되고 있으며 설치는 다음과 같다.

$ gem install csscss

csscss – CSS 파일에서 중복 정의된 스타일을 꼬집어주는 도구(이)란 제목의 글 마저 읽기 →

JavaScript에서 간단하게 다음과 같이 탐지할 수가 있다.

if (document.body.scrollWidth > window.innerWidth) {
  // horizontal scrollbar is visible. 
}

이 시점은 가령 기존 데스크탑 전용 웹페이지를 반응형 디자인으로 구현하고자 할 때, 여러 breakpoints 중 하나의 후보가 될 수 있다. 하지만 미리 마련된 어떤 기준에 따라 나머지 적당한 breakpoints를 자동 탐지해 내는 것은 너무 복잡한 일이다.

결국, 나머진 그냥 눈대중?